/*
 * music.gonglogic.com/theory — the Music Theory course.
 *
 * Built on the music site's tokens (music.css: --paper, --surface, --ink, --accent,
 * --ok, --bad, --staff …), so it follows the site's light and dark schemes without a
 * colour of its own. Every rule is scoped to [data-area="music"], as music.css's are.
 * Loaded only on the course's pages (MusicTheoryController).
 */

/* ── the course ─────────────────────────────────────────────────────────── */
[data-area="music"] .th-mast__actions { margin-top: 1.25rem; }

[data-area="music"] .th-course {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  counter-reset: none;
}
[data-area="music"] .th-course__item { display: flex; }
[data-area="music"] .th-course__link {
  flex: 1;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem; min-height: 4.25rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-area="music"] .th-course__link:hover { border-color: var(--accent); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); }
[data-area="music"] .th-course__num,
[data-area="music"] .th-part__num {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 0.95rem/1 var(--sans);
  background: var(--accent-wash); color: var(--accent-ink);
}
[data-area="music"] .th-course__item.is-complete .th-course__num { background: var(--ok); color: var(--surface); }
[data-area="music"] .th-course__body { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; }
[data-area="music"] .th-course__title { font: 600 1.02rem/1.25 var(--display); }
[data-area="music"] .th-course__sub { font-size: 0.86rem; color: var(--ink-2); }

/* Four dots: Learn, Play, Test, Quiz. */
[data-area="music"] .th-dots { display: flex; gap: 0.25rem; flex: none; }
[data-area="music"] .th-dots i {
  display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1.5px solid var(--rule-2); background: transparent;
}
[data-area="music"] .th-dots i.is-done { background: var(--ok); border-color: var(--ok); }

/* ── a lesson's head, contents and way on ──────────────────────────────── */
[data-area="music"] .th-head { margin: 0.6rem 0 1.4rem; }
[data-area="music"] .th-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; }
[data-area="music"] .th-head__num {
  margin: 0; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent-ink);
}
[data-area="music"] .th-head__title { margin: 0.25rem 0 0; font: 600 clamp(1.6rem, 4vw, 2.3rem)/1.15 var(--display); }
[data-area="music"] .th-head__sub { margin: 0.45rem 0 0; font-size: 1.05rem; color: var(--ink-2); }

[data-area="music"] .th-parts { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; }
[data-area="music"] .th-part__link {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1rem; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none;
}
[data-area="music"] .th-part__link:hover { border-color: var(--accent); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; }
[data-area="music"] .th-part__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
[data-area="music"] .th-part__name { font: 600 1.1rem/1.25 var(--display); }
[data-area="music"] .th-part__blurb { font-size: 0.88rem; color: var(--ink-2); }
[data-area="music"] .th-part__count { flex: none; font-size: 0.85rem; color: var(--ink-3); }
[data-area="music"] .th-part__tick,
[data-area="music"] .th-tabs__tick { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--rule-2); }
[data-area="music"] .is-done .th-part__tick,
[data-area="music"] .is-done .th-tabs__tick {
  background: var(--ok); border-color: var(--ok);
  /* a check mark, drawn — no icon font to load */
  background-image: linear-gradient(45deg, transparent 52%, var(--surface) 52% 64%, transparent 64%),
                    linear-gradient(-45deg, transparent 47%, var(--surface) 47% 60%, transparent 60%);
  background-size: 50% 50%, 60% 60%;
  background-position: 22% 62%, 72% 42%;
  background-repeat: no-repeat;
}
@media (max-width: 599px) {
  [data-area="music"] .th-part__blurb { display: none; }
}

[data-area="music"] .th-onward { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
[data-area="music"] .th-pager { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
[data-area="music"] .th-pager__link--next { margin-left: auto; text-align: right; }

/* The parts, on every part page. */
[data-area="music"] .th-tabs {
  display: flex; gap: 0.35rem; margin: 0.4rem 0 0.2rem; padding: 0.3rem;
  background: var(--paper-2); border-radius: var(--r);
  overflow-x: auto; scrollbar-width: none;
}
[data-area="music"] .th-tabs::-webkit-scrollbar { display: none; }
[data-area="music"] .th-tabs__tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.45rem 0.8rem; border-radius: var(--r-s);
  font-size: 0.92rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
[data-area="music"] .th-tabs__tab:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
[data-area="music"] .th-tabs__tab.is-current { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
[data-area="music"] .th-tabs__tab--home { flex: 0 0 auto; color: var(--ink-3); font-weight: 500; }
[data-area="music"] .th-tabs__tick { width: 0.85rem; height: 0.85rem; }

/* ── Learn ─────────────────────────────────────────────────────────────── */
[data-area="music"] .th-learn { display: grid; gap: 1.5rem; }
[data-area="music"] .th-learn__heading { margin: 0 0 0.4rem; font: 600 1.3rem/1.25 var(--display); }
[data-area="music"] .th-learn__body { margin: 0; font-size: 1.08rem; line-height: 1.7; max-width: 62ch; }

/* ── Play and Test ─────────────────────────────────────────────────────── */
[data-area="music"] .th-instruction { margin: 0; max-width: 46ch; font-size: 1.02rem; color: var(--ink-2); }
[data-area="music"] .th-stage {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l);
  padding: 0.9rem; box-shadow: var(--shadow-1);
}
[data-area="music"] .th-staff { position: relative; }
[data-area="music"] .th-staff__frame {
  display: block; width: 100%; height: 190px; border: 0; background: transparent;
}
@media (max-width: 599px) { [data-area="music"] .th-staff__frame { height: 160px; } }
[data-area="music"] .th-status { min-height: 1.6rem; margin: 0.4rem 0.2rem; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
[data-area="music"] .th-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.75rem; }
[data-area="music"] .th-controls__hint { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); }
[data-area="music"] .th-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.85rem; min-height: 2.4rem;
  font: 600 0.9rem/1 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-s); cursor: pointer;
}
[data-area="music"] .th-btn:hover:not(:disabled) { border-color: var(--accent); }
[data-area="music"] .th-btn:disabled { opacity: 0.6; cursor: default; }
/* Offered, not pressed on anyone: most readers have no MIDI keyboard. */
[data-area="music"] .th-btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
[data-area="music"] .th-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--ink-2); }

/* The keyboard. White keys share the row; black keys sit in a layer above, each
   placed by theory.js between the two whites it belongs to. On a narrow screen the
   keyboard keeps a playable key width and scrolls inside its own box — the page never
   scrolls sideways — and theory.js brings the next key into view. */
[data-area="music"] .th-keys {
  --white-min: 2.1rem; --black-w: 1.35rem;
  position: relative; overflow-x: auto; overflow-y: hidden;
  border-radius: var(--r-s); background: var(--ink);
  padding: 4px 4px 6px; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
[data-area="music"] .th-keys__row {
  display: flex; height: 9.5rem;
  min-width: calc(var(--whites, 14) * var(--white-min));
}
[data-area="music"] .th-keys__blacks {
  position: absolute; inset: 4px 4px auto 4px; height: 5.9rem; pointer-events: none;
  min-width: calc(var(--whites, 14) * var(--white-min));
}
[data-area="music"] .th-key { margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-area="music"] .th-key--white {
  flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center;
  margin-right: 2px; background: #fbfaf6; border: 0; border-radius: 0 0 5px 5px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,0.08);
}
[data-area="music"] .th-key--white:last-child { margin-right: 0; }
[data-area="music"] .th-key--black {
  position: absolute; top: 0; width: var(--black-w); height: 100%;
  background: #1c1c22; border: 0; border-radius: 0 0 4px 4px; pointer-events: auto;
  box-shadow: inset 0 -4px 0 rgba(255,255,255,0.08);
}
[data-area="music"] .th-key__name { margin-bottom: 0.45rem; font: 600 0.62rem/1 var(--sans); color: #8a8a86; }
[data-area="music"] .th-key--white:active { background: #ecebe4; }
[data-area="music"] .th-key--black:active { background: #34343c; }
/* Play only: the key to press glows; a chord's tones already down stay lit.
   THE STAFF'S OWN COLOURS — vexstaff.html marks the target note #007AFF, a right note
   #34C759, a wrong one #FF3B30 — so the key and the note it stands for are one colour.
   Solid, not a wash: the keyboard's frame is near-black, and a translucent tint over a
   white key let it through, so the lit key read as a dark, pressed one. */
[data-area="music"] .th-key--white.is-target { background: #d9e9ff; box-shadow: inset 0 0 0 3px #007aff; }
[data-area="music"] .th-key--black.is-target { background: #007aff; box-shadow: 0 0 0 2px #fff inset; }
[data-area="music"] .th-key--white.is-held { background: #d6f5df; box-shadow: inset 0 0 0 3px #34c759; }
[data-area="music"] .th-key--black.is-held { background: #34c759; }
[data-area="music"] .th-key.is-right { background: #34c759 !important; }
[data-area="music"] .th-key.is-wrong { background: #ff3b30 !important; }
[data-area="music"] .th-instrument.is-restarting .th-stage { animation: th-shake 0.35s; }
@keyframes th-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { [data-area="music"] .th-instrument.is-restarting .th-stage { animation: none; } }
@media (max-width: 599px) {
  [data-area="music"] .th-keys { --white-min: 2.35rem; }
  [data-area="music"] .th-keys__row { height: 8rem; }
  [data-area="music"] .th-keys__blacks { height: 5rem; }
}

/* ── done: the result of a run, or a quiz ─────────────────────────────── */
[data-area="music"] .th-done {
  margin-top: 1.2rem; padding: 1.2rem 1.25rem;
  background: var(--ok-wash); border: 1px solid var(--ok); border-radius: var(--r-l);
}
[data-area="music"] .th-done__stars { margin: 0; font-size: 1.6rem; letter-spacing: 0.15em; color: #c8962f; }
[data-area="music"] .th-done__stars:empty { display: none; }
[data-area="music"] .th-done__title { margin: 0.2rem 0 0.25rem; font: 600 1.35rem/1.2 var(--display); }
[data-area="music"] .th-done__detail { margin: 0; color: var(--ink-2); }
[data-area="music"] .th-done__actions { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
[data-area="music"] .th-done__actions .th-onward { margin: 0; }

/* ── Quiz ──────────────────────────────────────────────────────────────── */
[data-area="music"] .th-quiz { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
[data-area="music"] .th-q { padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
[data-area="music"] .th-q__prompt { margin: 0 0 0.75rem; font: 600 1.1rem/1.4 var(--display); }
[data-area="music"] .th-q__options { display: grid; gap: 0.45rem; }
[data-area="music"] .th-q__option {
  text-align: left; padding: 0.7rem 0.9rem; min-height: 2.75rem;
  font: 500 1rem/1.35 var(--sans); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--r-s); cursor: pointer;
}
[data-area="music"] .th-q__option:hover:not(:disabled) { border-color: var(--accent); }
[data-area="music"] .th-q__option:disabled { cursor: default; }
[data-area="music"] .th-q__option.is-right { border-color: var(--ok); background: var(--ok-wash); }
[data-area="music"] .th-q__option.is-wrong { border-color: var(--bad); background: var(--bad-wash); }
[data-area="music"] .th-q__why { margin: 0.7rem 0 0; font-size: 0.95rem; color: var(--ink-2); }