/* reference chapter — styles owned by this chapter alone.
   Tokens only; every colour, size and radius comes from css/style.css.

   "Compared To What?" sits in Foundations, so it carries that part's marker.
   The declaration is written out rather than inherited by accident. */

#ch-reference { --accent: var(--part-1); --accent-ink: var(--part-1-ink); }

/* Sub-sections get their own sheet and their own heading weight — no card
   ever sits inside another one. */
#ch-reference .ref-card { margin-top: 22px; }

/* An accidental has no glyph in the serif or the grotesque, so wherever a
   note name is set at display size the sign itself is set in the mono. */
#ch-reference .acc { font-family: var(--mono); font-size: 0.84em; }

/* ---------- shared furniture ---------- */

#ch-reference .ref-chips { display: flex; flex-wrap: wrap; gap: 7px; }
#ch-reference .ref-chips .step-chip { font-size: 13.5px; padding: 6px 14px; }

#ch-reference .ref-lab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--ink-soft);
  white-space: nowrap;
}

#ch-reference .ref-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 4px;
}
#ch-reference .ref-homeline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 2px;
}

#ch-reference .ref-two {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px; align-items: start; margin-top: 20px;
}
#ch-reference .ref-cell { min-width: 0; }

#ch-reference .ref-name {
  font-family: var(--serif); font-weight: 700; line-height: 1.04;
  font-size: clamp(26px, 3.4vw, 32px);
}
#ch-reference .ref-rn {
  font-family: var(--mono); font-size: 0.44em; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 11px; vertical-align: 0.34em;
}
#ch-reference .ref-sub {
  font-family: var(--mono); font-size: 13.5px; color: var(--ink-soft);
  margin-top: 6px; line-height: 1.5;
}
#ch-reference .ref-tags {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
#ch-reference .ref-tags .chip { font-size: 11.5px; padding: 3px 10px; letter-spacing: 0.03em; }
#ch-reference .chip.ref-tone { color: var(--ink); }
#ch-reference .chip.ref-ext { color: var(--accent-ink); }
#ch-reference .ref-emotion {
  font-family: var(--serif); font-style: italic; font-size: 17.5px; color: var(--ink);
}

#ch-reference .ref-say {
  font-size: 14.5px; line-height: 1.62; color: var(--ink-soft);
  max-width: 48ch; margin: 12px 0 0;
}
#ch-reference .ref-say strong { color: var(--ink); font-weight: 600; }

#ch-reference .ref-line { font-size: 16px; color: var(--ink-soft); margin: 14px 0 4px; }
#ch-reference .ref-line strong { color: var(--ink); font-weight: 600; }

#ch-reference .ref-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

#ch-reference .ref-kbd { margin-top: 16px; max-width: 460px; }
#ch-reference .ref-kbd.wide { max-width: 100%; }

#ch-reference .ref-cap {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
  max-width: 52ch; margin-top: 9px;
}

#ch-reference .ref-foot {
  font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); max-width: 68ch;
  margin-top: 22px; padding-top: 16px; border-top: 1.5px dashed var(--line);
}
#ch-reference .ref-foot strong { color: var(--ink); font-weight: 600; }
#ch-reference .ref-foot em { font-family: var(--serif); font-size: 16px; color: var(--ink); }
#ch-reference .ref-foot .mono { font-size: 13.5px; color: var(--ink); }

#ch-reference .stave-box { max-width: 300px; }
#ch-reference #refCStave { max-width: 620px; margin-top: 6px; }

/* ---------- the two tables ---------- */

/* Wide content scrolls inside its own container; the page never does. */
#ch-reference .ref-tablewrap { overflow-x: auto; margin-top: 16px; }
#ch-reference .ref-table { border-collapse: collapse; width: 100%; min-width: 430px; }
#ch-reference .ref-table.chain { min-width: 470px; }
#ch-reference .ref-table th {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
  text-align: left; padding: 0 14px 9px 0; white-space: nowrap;
  border-bottom: 1.6px solid var(--ink);
}
#ch-reference .ref-table td {
  padding: 10px 14px 10px 0; border-bottom: 1.4px dashed var(--line);
  font-size: 14.5px; vertical-align: middle;
}
#ch-reference .ref-table tr:last-child td { border-bottom: none; }

#ch-reference .ref-root {
  font-family: var(--serif); font-weight: 700; font-size: 21px;
  white-space: nowrap; padding-left: 9px;
}
#ch-reference .ref-what b, #ch-reference .ref-home b, #ch-reference .ref-step b {
  font-weight: 600; color: var(--ink); display: block;
}
#ch-reference .ref-of {
  display: block; font-size: 11.5px; color: var(--ink-soft);
  letter-spacing: 0.05em; margin-top: 1px;
}
#ch-reference .ref-none { font-size: 13.5px; color: var(--ink-soft); font-style: italic; }
#ch-reference .ref-table th.ref-num, #ch-reference .ref-table td.ref-num {
  width: 78px; color: var(--ink-soft); font-size: 13.5px;
}
#ch-reference .ref-table.chain th.ref-num,
#ch-reference .ref-table.chain td.ref-num { width: 54px; }
#ch-reference .ref-do { text-align: right; white-space: nowrap; padding-right: 0; }
#ch-reference .ref-do .btn { font-size: 12.5px; padding: 5px 12px; }

/* The sounding row is marked in the margin with a marker stroke, never a fill. */
#ch-reference .ref-table tr.on .ref-root { box-shadow: inset 3px 0 0 var(--accent); }
#ch-reference .ref-table tr.on .ref-what b { color: var(--accent-ink); }
#ch-reference .ref-table tr.same .ref-root { color: var(--ink-soft); }

/* the two readings of the chain, side by side and drifting apart */
#ch-reference .ref-table.chain .ref-home,
#ch-reference .ref-table.chain .ref-step {
  border-left: 1.4px dashed var(--line); padding-left: 14px;
}
#ch-reference .ref-table.chain .ref-step b { color: var(--accent-ink); }

/* ---------- the move composer ---------- */

#ch-reference .ref-moves {
  display: flex; flex-direction: column; gap: 8px;
  margin: 16px 0 4px; padding: 15px 0 0; border-top: 1.5px dashed var(--line);
}
#ch-reference .ref-moverow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#ch-reference .ref-moverow .ref-lab { width: 62px; }

#ch-reference .ref-msg {
  font-size: 13.5px; line-height: 1.55; color: var(--ink); max-width: 66ch;
  margin: 0; padding: 0; opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
#ch-reference .ref-msg.show {
  opacity: 1; max-height: 120px;
  margin: 15px 0 0; padding: 10px 14px;
  border: 1.4px dashed var(--line); border-radius: 12px;
}

/* ---------- narrow screens ---------- */

@media (max-width: 940px) {
  #ch-reference .ref-two { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #ch-reference .ref-two > * { min-width: 0; }
  #ch-reference .ref-kbd { max-width: 100%; }
}
@media (max-width: 640px) {
  #ch-reference .ref-moverow .ref-lab { width: auto; }
  #ch-reference .ref-chips .step-chip { font-size: 12.5px; padding: 6px 12px; }
  #ch-reference .ref-root { font-size: 19px; }
  #ch-reference .ref-table td { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  #ch-reference .ref-msg { transition: none; }
}