/* =============================================================
   Punjabia — music.css · the /music/ tree
   -------------------------------------------------------------
   Components for the Music hub and its sub-pages: the page-wide
   script mode, the song lesson lines, the animated piano, the
   playable dhol, the rhythm grid, the "ho!" button, instrument
   cards, and the audio "recording coming" placeholder.

   Palette discipline: Manuscript & Phulkari only. The lit piano
   key and the current lyric line are marigold; madder is the
   single accent; no new colours are introduced.
   All motion honours prefers-reduced-motion.
   ============================================================= */

/* ---------- Page-wide script mode ----------
   body[data-script] is set by music.js (persisted in localStorage).
   Scoped to <main> so the brand mark and toggle keep both scripts. */
body[data-script="gur"]  main .shah { display: none !important; }
body[data-script="shah"] main .gur  { display: none !important; }
body[data-script] main .script-mode .gur,
body[data-script] main .script-mode .shah { display: inline !important; }

.script-mode {
  position: sticky; top: .6rem; z-index: 40;
  display: flex; justify-content: center; margin: 0 auto 1.2rem;
  width: fit-content; gap: .25rem; padding: .3rem;
  background: color-mix(in srgb, var(--khaddar-50) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-warm); border-radius: 999px;
  box-shadow: 0 4px 18px rgba(20, 22, 47, .08);
}
.script-mode button {
  border: 0; background: transparent; cursor: pointer;
  padding: .38rem .9rem; border-radius: 999px;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  color: var(--text-2);
}
.script-mode button[aria-pressed="true"] {
  background: var(--indigo-800); color: var(--cream);
}
.script-mode .gur, .script-mode .shah { font-size: .92rem; }

/* ---------- Knowledge / review chips ---------- */
.review-flag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-sans); font-size: .66rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--src-competing);
  border: 1px dashed color-mix(in srgb, var(--src-competing) 55%, transparent);
  border-radius: 999px; padding: .18rem .6rem;
}

/* ---------- Variant note (folk texts) ---------- */
.variant-note {
  margin: 1.2rem 0 1.6rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--gold-500);
  background: color-mix(in srgb, var(--gold-300) 18%, var(--khaddar-50));
  border-radius: 0 10px 10px 0;
  font-family: var(--font-serif); font-style: italic;
  color: var(--text-2); font-size: .98rem; line-height: 1.6;
}

/* ---------- Song lesson lines ---------- */
.songline {
  border: 1px solid var(--line-warm); border-radius: 14px;
  background: var(--khaddar-50); padding: 1.1rem 1.25rem;
  margin: 0 0 1rem;
}
.songline__num {
  font-family: var(--font-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-theme);
  margin: 0 0 .5rem;
}
.songline__scripts .gur  { font-family: var(--font-gur); font-size: 1.5rem; line-height: 1.8; color: var(--ink-900); display: block; }
.songline__scripts .shah { font-family: var(--font-shah); font-size: 1.42rem; line-height: 2.2; color: var(--indigo-600); display: block; direction: rtl; text-align: right; margin-top: .25rem; }
.songline__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: .4rem 1.6rem; align-items: start; margin-top: .2rem; }
.songline__meta p { margin: 0 0 .45rem; }
.songline__meta .roman   { font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; color: var(--text-2); }
.songline__meta .literal { font-family: var(--font-serif); font-size: .95rem; color: var(--text-3); }
.songline__meta .natural { font-family: var(--font-serif); font-size: 1.02rem; color: var(--text); }
.songline__meta .label {
  font-family: var(--font-sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
  display: block; margin-bottom: .1rem;
}
.songline__note {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line-warm);
  font-size: .95rem; color: var(--text-2); font-family: var(--font-serif);
}
.songline.is-current { border-color: var(--gold-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-500) 45%, transparent); }
@media (max-width: 700px) {
  .songline__grid { grid-template-columns: 1fr; }
}

/* Word-layer buttons inherit .wl from wordlayer.css */

/* ---------- The dā / dī gloss widget ---------- */
.gloss-widget {
  border: 1px solid var(--line-warm); border-radius: 14px;
  background: var(--khaddar-50); padding: 1.2rem 1.3rem; margin: 1.4rem 0;
}
.gloss-widget p.gloss-line { font-family: var(--font-serif); font-size: 1.15rem; margin: .3rem 0; }
.gloss-noun, .gloss-poss {
  border-radius: 6px; padding: 0 .2rem; cursor: help;
  border-bottom: 2px dotted var(--line-warm);
  transition: background .18s ease, border-color .18s ease;
}
.gloss-widget[data-active="f"] [data-gender="f"],
.gloss-widget[data-active="m"] [data-gender="m"] {
  background: color-mix(in srgb, var(--gold-400) 40%, transparent);
  border-bottom-color: var(--gold-600);
}
.gloss-chip {
  display: inline-block; min-height: 1.4em; margin-top: .6rem;
  font-family: var(--font-sans); font-size: .8rem; color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
  .gloss-noun, .gloss-poss { transition: none; }
}

/* ---------- Piano ---------- */
.piano-module { margin: 1.6rem 0; }
.piano-honesty {
  font-family: var(--font-serif); font-style: italic; font-size: .97rem;
  color: var(--text-2); line-height: 1.65;
  border-left: 3px solid var(--indigo-600); padding: .7rem 1rem;
  background: color-mix(in srgb, var(--indigo-600) 6%, var(--khaddar-50));
  border-radius: 0 10px 10px 0; margin: 0 0 1.2rem;
}
.piano-wrap {
  background: var(--indigo-900); border-radius: 16px; padding: 1.1rem;
  border: 1px solid var(--indigo-700);
}
.piano {
  position: relative; display: flex; height: 168px;
  border-radius: 8px; overflow: hidden; touch-action: manipulation;
}
.piano .key { position: relative; border: 0; cursor: pointer; padding: 0; }
.piano .key.white {
  flex: 1 1 0; background: var(--cream); border-left: 1px solid rgba(20,22,47,.25);
  border-radius: 0 0 6px 6px;
}
.piano .key.white:first-child { border-left: 0; }
.piano .key.black {
  position: absolute; top: 0; width: 8.5%; height: 58%;
  background: var(--indigo-800); border: 1px solid var(--indigo-900);
  border-radius: 0 0 5px 5px; z-index: 2;
}
.piano .key:active, .piano .key.is-down { filter: brightness(.92); }
.piano .key.is-lit.white { background: var(--gold-400); }
.piano .key.is-lit.black { background: var(--gold-600); }
.piano .key:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -3px; z-index: 3; }
.piano .key .finger {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  min-width: 1.5em; padding: .05em .3em; border-radius: 999px;
  background: var(--indigo-800); color: var(--cream);
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.piano .key.is-lit .finger, .piano .key:hover .finger, .piano .key:focus-visible .finger { opacity: 1; }
.piano .key .keyname {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  color: var(--ink-500); font-family: var(--font-sans); font-size: .62rem;
  pointer-events: none;
}
.piano .key.black .keyname { display: none; }

.piano-controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; }
.piano-controls .linebtn {
  border: 1px solid var(--indigo-600); background: var(--indigo-800); color: var(--cream);
  border-radius: 999px; padding: .45rem .95rem; cursor: pointer;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
}
.piano-controls .linebtn[aria-pressed="true"], .piano-controls .linebtn.is-playing {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--indigo-900);
}
.piano-controls .stopbtn { background: transparent; border: 1px solid var(--indigo-600); color: var(--cream-muted); border-radius: 999px; padding: .45rem .8rem; cursor: pointer; font-family: var(--font-sans); font-size: .8rem; }
.piano-tempo { display: inline-flex; align-items: center; gap: .5rem; color: var(--cream-muted); font-family: var(--font-sans); font-size: .78rem; }
.piano-tempo input[type="range"] { accent-color: var(--gold-500); width: 130px; }
.piano-loop { display: inline-flex; align-items: center; gap: .4rem; color: var(--cream-muted); font-family: var(--font-sans); font-size: .78rem; cursor: pointer; }
.piano-loop input { accent-color: var(--gold-500); }
.piano-nowline {
  margin-top: .8rem; min-height: 1.6em; text-align: center;
  color: var(--cream); font-family: var(--font-serif); font-style: italic; font-size: 1rem;
}
.piano-nowline .syll-done { color: var(--cream-muted); }
.piano-nowline .syll-now { color: var(--gold-300); font-weight: 700; font-style: normal; }
.piano-keyhint { margin-top: .55rem; text-align: center; color: var(--cream-muted); font-family: var(--font-sans); font-size: .68rem; letter-spacing: .06em; }

/* ---------- Dhol ---------- */
.dhol-widget { margin: 1.4rem 0; }
.dhol {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  max-width: 460px; margin-inline: auto; height: 150px;
  border-radius: 18px; overflow: hidden;
  border: 2px solid var(--indigo-700);
  background: var(--indigo-900);
}
.dhol button {
  border: 0; cursor: pointer; position: relative;
  font-family: var(--font-sans); font-weight: 700; letter-spacing: .08em;
  transition: transform .06s ease, filter .06s ease;
}
.dhol .dhol-bass  { background: radial-gradient(circle at 65% 45%, var(--indigo-600), var(--indigo-800)); color: var(--cream); }
.dhol .dhol-treble{ background: radial-gradient(circle at 35% 45%, var(--madder-500), var(--madder-600)); color: var(--cream); }
.dhol button:active, .dhol button.is-hit { transform: scale(.97); filter: brightness(1.18); }
.dhol button small { display: block; font-weight: 500; letter-spacing: .02em; opacity: .75; font-size: .7rem; margin-top: .25rem; }
.dhol button:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -4px; }
.dhol-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; align-items: center; }
.dhol-controls .chaal-btn {
  border: 1px solid var(--line-warm); background: var(--khaddar-50); color: var(--text-2);
  border-radius: 999px; padding: .4rem .95rem; cursor: pointer;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
}
.dhol-controls .chaal-btn[aria-pressed="true"] { background: var(--indigo-800); border-color: var(--indigo-800); color: var(--cream); }
@media (max-width: 700px) { .dhol { max-width: 100%; height: 132px; } }
@media (prefers-reduced-motion: reduce) { .dhol button { transition: none; } .dhol button:active, .dhol button.is-hit { transform: none; } }

/* ---------- Rhythm & chant grid (Kokla) ---------- */
.rhythm-module { margin: 1.4rem 0; }
.rhythm-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin: .8rem 0; }
.rhythm-cell {
  border: 1px solid var(--line-warm); border-radius: 9px;
  background: var(--khaddar-50); text-align: center; padding: .55rem .15rem;
  font-family: var(--font-serif); font-size: .86rem; color: var(--text-2);
  min-height: 2.6em;
}
.rhythm-cell.accent { border-color: var(--madder-500); color: var(--text); font-weight: 650;
  background: color-mix(in srgb, var(--madder-500) 8%, var(--khaddar-50)); }
.rhythm-cell.is-now { background: var(--gold-400); border-color: var(--gold-600); color: var(--ink-900); }
.rhythm-controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.rhythm-controls button {
  border: 1px solid var(--line-warm); background: var(--khaddar-50); color: var(--text-2);
  border-radius: 999px; padding: .45rem 1rem; cursor: pointer;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
}
.rhythm-controls button[aria-pressed="true"] { background: var(--indigo-800); border-color: var(--indigo-800); color: var(--cream); }
@media (max-width: 700px) { .rhythm-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- The "ho!" button ---------- */
.ho-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 5.2em; min-height: 5.2em; border-radius: 50%;
  border: 3px solid var(--gold-500);
  background: radial-gradient(circle at 38% 32%, var(--gold-400), var(--gold-600));
  color: var(--indigo-900); cursor: pointer;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  box-shadow: 0 6px 22px rgba(185, 121, 31, .4);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
  touch-action: manipulation;
}
.ho-btn:active, .ho-btn.is-hit { transform: scale(.9); }
.ho-btn:focus-visible { outline: 3px solid var(--indigo-800); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ho-btn { transition: none; } .ho-btn:active, .ho-btn.is-hit { transform: none; filter: brightness(1.12); } }

/* ---------- Audio placeholder ---------- */
.audio-soon {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px dashed var(--line-warm); border-radius: 999px;
  padding: .35rem .85rem; background: transparent;
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .05em; color: var(--text-3); cursor: default;
}
.audio-soon svg { opacity: .7; }
.audio-live {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--indigo-600); border-radius: 999px;
  padding: .35rem .85rem; background: var(--indigo-800); color: var(--cream);
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600; cursor: pointer;
}

/* ---------- The three doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.door {
  display: block; border: 1px solid var(--line-warm); border-radius: 16px;
  background: var(--khaddar-50); padding: 1.4rem 1.3rem; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.door:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20,22,47,.1); }
.door .door__glyph { font-family: var(--font-gur); font-size: 2rem; color: var(--accent-theme); display: block; margin-bottom: .5rem; }
.door h3 { margin: 0 0 .4rem; font-size: var(--step-1); color: var(--text); }
.door p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.55; }
.door .link-arrow { display: inline-block; margin-top: .7rem; color: var(--accent-theme); font-family: var(--font-sans); font-size: .8rem; font-weight: 600; }
@media (max-width: 800px) { .doors { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .door { transition: none; } .door:hover { transform: none; } }

/* ---------- Instrument cards ---------- */
.inst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.6rem; }
.inst-card {
  border: 1px solid var(--line-warm); border-radius: 14px; background: var(--khaddar-50);
  padding: 1.1rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .5rem;
}
.inst-card .inst-family {
  font-family: var(--font-sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-theme);
}
.inst-card h3 { margin: 0; font-size: 1.15rem; }
.inst-card h3 a { color: var(--text); text-decoration: none; }
.inst-card h3 a:hover { color: var(--accent-theme); }
.inst-card .inst-scripts { font-size: 1.05rem; }
.inst-card .inst-scripts .gur { font-family: var(--font-gur); color: var(--ink-700); }
.inst-card .inst-scripts .shah { font-family: var(--font-shah); color: var(--indigo-600); margin-left: .45rem; }
.inst-card p.inst-line { margin: 0; font-size: .9rem; color: var(--text-2); line-height: 1.5; flex: 1; }
.inst-card .inst-sound { margin-top: .3rem; }
@media (max-width: 960px) { .inst-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .inst-grid { grid-template-columns: 1fr; } }

/* ---------- Sound description blocks (instrument pages) ---------- */
.sound-desc {
  border: 1px solid var(--line-warm); border-left: 3px solid var(--accent-theme);
  border-radius: 0 12px 12px 0; background: var(--khaddar-50);
  padding: .9rem 1.1rem; margin: 1.2rem 0;
  font-family: var(--font-serif); font-style: italic; color: var(--text-2);
}
.sound-desc .label {
  display: block; font-family: var(--font-sans); font-style: normal; font-size: .64rem;
  font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: .3rem;
}

/* ---------- Pull quote ---------- */
.pullquote {
  margin: 2rem 0; padding: 1.4rem 1.6rem;
  border-left: 4px solid var(--madder-500);
  background: color-mix(in srgb, var(--madder-500) 5%, var(--khaddar-50));
  border-radius: 0 14px 14px 0;
  font-family: var(--font-display); font-size: var(--step-1);
  line-height: 1.5; color: var(--text);
}
.pullquote footer { margin-top: .6rem; font-family: var(--font-sans); font-size: .78rem; color: var(--text-3); }

/* ---------- Sources drawer ---------- */
.sources-drawer { margin: 1.4rem 0; border: 1px solid var(--line-warm); border-radius: 12px; background: var(--khaddar-50); }
.sources-drawer summary {
  cursor: pointer; padding: .85rem 1.1rem; list-style: none;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-theme);
}
.sources-drawer summary::-webkit-details-marker { display: none; }
.sources-drawer summary::after { content: " +"; }
.sources-drawer[open] summary::after { content: " −"; }
.sources-drawer .drawer-body { padding: 0 1.1rem 1rem; }
.sources-drawer ol { margin: 0; padding-left: 1.2rem; }
.sources-drawer li { margin-bottom: .55rem; font-size: .92rem; color: var(--text-2); }

/* ---------- Two-up grid (style.css defines --3 and --4 only) ---------- */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .grid--2 { grid-template-columns: 1fr; } }

/* ---------- Hub: embedded song teaser cards ---------- */
.song-card .card__media { display: flex; align-items: center; justify-content: center; }
.song-diff { color: var(--gold-600); letter-spacing: .12em; font-size: .8rem; }

/* ---------- Print (teacher resources) ---------- */
@media print {
  .site-header, .site-footer, .script-mode, .piano-wrap, .dhol-widget, .nav-toggle { display: none !important; }
  body { background: #fff; }
}