/* Compose · Harmony 2 (docs/ui-overhaul-2/compose/B-harmony/HARMONY-2.md §8): the page's own lights and marks. The kit is
   face.css. The chord is rose (--face-chord); home and pull are violet (--rootc); the tune is the cool mover (--ae-walk);
   a passing note is silver (--text2) and thin; "Could be" is the place's warm light (--ae-land); amber means selected, only.
   Every colour is a house token or a color-mix of one (no raw hex). */
.fp-harmony2 {
  --h2-chord: var(--face-chord);
  --h2-chord-60: color-mix(in srgb, var(--face-chord) 60%, transparent);
  --h2-chord-30: color-mix(in srgb, var(--face-chord) 30%, transparent);
  --h2-chord-16: color-mix(in srgb, var(--face-chord) 16%, transparent);
  --h2-chord-09: color-mix(in srgb, var(--face-chord) 9%, transparent);
  --h2-home: var(--rootc);
  --h2-home-70: color-mix(in srgb, var(--rootc) 70%, transparent);
  --h2-home-40: color-mix(in srgb, var(--rootc) 40%, transparent);
  --h2-home-16: color-mix(in srgb, var(--rootc) 16%, transparent);
  --h2-home-09: color-mix(in srgb, var(--rootc) 9%, transparent);
  --h2-land-14: color-mix(in srgb, var(--ae-land) 14%, transparent);
  --h2-pass: var(--text2);
  --h2-off: var(--ae-walk);            /* an off note: drawn hollow in the tune's cool white, so it never outshines the chord */
  --h2-off-fill: var(--ae-walk-10);
  --h2-ring: color-mix(in srgb, var(--text2) 30%, transparent);
}
.fp-harmony2 .face + .face { margin-top: 18px; }
.fp-harmony2 .face-pic svg { touch-action: pan-y; }
.fp-harmony2 .face-pic svg [data-hit] { cursor: pointer; outline: none; }
.fp-harmony2 .face-pic svg [data-hit]:focus-visible .hit { stroke: var(--face-sel); stroke-width: 2; }
.fp-harmony2 .face-pic svg .grip { cursor: ew-resize; }
.fp-harmony2 .face-pic svg .drag { cursor: grab; }
.fp-harmony2 .face-pic svg .hit { fill: transparent; }
.fp-harmony2 .face-pic { transition: opacity 120ms ease; }
.fp-harmony2 .face-pic.is-held { opacity: 0.55; }
.fp-harmony2 .h2-wait { margin: 0; padding: 40px 28px; font-size: 13px; color: var(--face-quiet); }
/* the legend under each picture: always on (the facts the heads had no room for; the marks' key is the kit's .face-key row, D-64) */
.fp-harmony2 .face-legend.on { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 0 28px 14px; font-size: 12.5px; color: var(--face-quiet); }
.fp-harmony2 .face.compact .face-legend.on { padding: 0 16px 12px; }
/* an item wraps inside the face rather than run off it (REVIEW-H2-BUILD-1 M2); its mark never shrinks */
.fp-harmony2 .face-legend .lk { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.fp-harmony2 .face-legend .lk-end { margin-left: auto; }
.fp-harmony2 .face-legend .lf { flex: 1 0 100%; }
.fp-harmony2 .face-legend b { margin-left: 2px; color: var(--text2); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; }
.fp-harmony2 .face-legend svg { flex: none; }
/* the zone bar's extra line: the selected chord's facts and the editor's button */
.fp-harmony2 .zone-extra { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--face-quiet); min-height: 30px; }
.fp-harmony2 .zone-extra:empty { display: none; }
/* the chord editor opens here, under its own button, so opening it never moves the button (lesson 9) */
.fp-harmony2 .h2-drawer { flex: 1 0 100%; min-width: 0; margin-top: 6px; color: var(--face-quiet); }
.fp-harmony2 .h2-drawer svg { display: block; touch-action: pan-y; }
.fp-harmony2 .h2-drawer svg [data-hit] { cursor: pointer; outline: none; }
.fp-harmony2 .h2-drawer svg [data-hit]:focus-visible .hit { stroke: var(--face-sel); stroke-width: 2; }
.fp-harmony2 .h2-drawer svg .drag { cursor: grab; }
.fp-harmony2 .h2-drawer svg .hit { fill: transparent; }
.fp-harmony2 .zx-name { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--face-chord); }
.fp-harmony2 .zx-edit { position: relative; font: inherit; font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--face-chord) 18%, var(--surface2)); border: 1px solid var(--face-chord); border-radius: 999px; height: 30px; padding: 0 14px; cursor: pointer; white-space: nowrap; }
.fp-harmony2 .zx-edit::before { content: ""; position: absolute; inset: -7px 0; }
.fp-harmony2 .zx-edit:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; }
/* Hear it in place: a quieter companion to Edit notes, in the tune's colour (it plays; it does not edit) */
.fp-harmony2 .zx-hear { position: relative; font: inherit; font-size: 12.5px; color: var(--ae-walk); background: transparent; border: 1px solid var(--ae-walk-25); border-radius: 999px; height: 30px; padding: 0 14px; cursor: pointer; white-space: nowrap; }
.fp-harmony2 .zx-hear::before { content: ""; position: absolute; inset: -7px 0; }
.fp-harmony2 .zx-hear:hover { border-color: var(--ae-walk-60); }
.fp-harmony2 .zx-hear[aria-pressed="true"] { background: var(--ae-walk-10); border-color: var(--ae-walk-60); }
.fp-harmony2 .zx-hear:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; }
/* an empty scale note on the close-up: a place to add */
.fp-harmony2 .add:hover .add-ring, .fp-harmony2 .add:focus-visible .add-ring { stroke: var(--h2-chord); }
.fp-harmony2 .add:hover .add-plus, .fp-harmony2 .add:focus-visible .add-plus { stroke: var(--h2-chord); }
/* the fit's button under Plays is the kit's end-line link (.ctl .ends.after button); a 44 px target under a finger */
.fp-harmony2 .h2-fit::before { content: ""; position: absolute; inset: -15px -6px; }
.fp-harmony2 .ctl .ends.after .h2-fit { color: var(--face-chord); border-bottom-color: var(--h2-chord-60); }
.fp-harmony2 .h2-fitq { font-size: 11px; color: var(--face-quiet); white-space: nowrap; }
.fp-harmony2 .h2-cents { font-size: 11px; color: var(--face-quiet); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fp-harmony2 *, .fp-harmony2 .face-pic { transition: none !important; } }