/* Compose · Harmony · the instrument face: the page's own marks and states (FACE §2, §2a). The kit is face.css.
   Harmony's lights: the route and the chord in force are rose (--face-chord = --chordc); home and the arrival are violet
   (--rootc, the same meaning as Melody's pull home); the place is warm; the tune is Melody's cool mover. Every colour is a
   house token or a color-mix of one; amber (--face-sel) means selected, and nothing else. */

.fp-harmony {
  --hf-route-60: color-mix(in srgb, var(--face-chord) 60%, transparent);
  --hf-route-35: color-mix(in srgb, var(--face-chord) 35%, transparent);
  --hf-route-18: color-mix(in srgb, var(--face-chord) 18%, transparent);
  --hf-home: var(--rootc);
  --hf-home-60: color-mix(in srgb, var(--rootc) 60%, transparent);
  --hf-home-12: color-mix(in srgb, var(--rootc) 12%, transparent);
  --hf-track: color-mix(in srgb, var(--text2) 14%, transparent);
}
.fh-h1 .c-chord { color: var(--face-chord); }
.fh-scale { font-size: 13px; color: var(--face-quiet); white-space: nowrap; }

/* the head's Chord pull switch */
.fh-sw { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; padding: 0 4px; height: 36px; cursor: pointer; position: relative; }
.fh-sw::before { content: ""; position: absolute; inset: -4px -2px; }
.fh-sw i { position: relative; width: 30px; height: 17px; border-radius: 9px; background: var(--hf-route-35); box-shadow: inset 0 0 0 1px var(--face-chord); }
.fh-sw i::after { content: ""; position: absolute; top: 3px; left: 16px; width: 11px; height: 11px; border-radius: 50%; background: var(--face-chord); transition: left 120ms ease; }
.fh-sw[aria-checked="false"] i { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2); }
.fh-sw[aria-checked="false"] i::after { left: 3px; background: var(--face-quiet); }
.fh-sw:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; border-radius: 6px; }
.fp-harmony .fh-seg button[aria-checked="true"] { color: var(--face-chord); }   /* scoped: unscoped, it turned every face's selected switch rose */

/* the picture: tap targets, the stale hold */
.fp-harmony .face-pic svg .hit { fill: transparent; }
.fp-harmony .face-pic svg [data-hit] { cursor: pointer; outline: none; }
.fp-harmony .face-pic svg [data-hit]:focus-visible .hit { stroke: var(--face-sel); stroke-width: 2; }
.fp-harmony .face-pic { transition: opacity 120ms ease; }
.fp-harmony .face-pic.is-held { opacity: 0.55; }
.fp-harmony .face-pic svg { touch-action: pan-y; }

/* under the picture: the take block, where the picture has no room for it */
.fp-harmony .face-legend.on { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 2px 28px 14px; font-size: 12.5px; color: var(--face-quiet); }
.fp-harmony .face.compact .face-legend.on { padding: 2px 16px 14px; }
.fp-harmony .face-legend .k { color: var(--text2); }
.hf-take summary { cursor: pointer; list-style: none; min-height: 24px; display: inline-flex; align-items: center; gap: 6px; color: var(--face-quiet); }
.hf-take summary::-webkit-details-marker { display: none; }
.hf-take summary::before { content: "▸"; font-size: 10px; }
.hf-take[open] summary::before { content: "▾"; }
.hf-take summary:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; border-radius: 4px; }
.hf-take > div { margin: 6px 0 2px; line-height: 1.5; color: var(--text2); }

/* the cells whose control is not a ruler: the dice, the switch (a 44 px row, as a ruler's) */
.hf-btnrow { height: 44px; margin-top: 0; display: flex; align-items: center; }
.hf-swval { display: inline-block; font: 400 22px/1.15 var(--mono); letter-spacing: -0.02em; color: var(--text); margin: 3px 0 0; min-height: 28px; }
.deck.narrow .hf-swval { font-size: 19px; }
.hf-swrow { padding-bottom: 0; }
.hf-dice { font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius-sm); height: 32px; width: 100%; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; white-space: nowrap; position: relative; }
.hf-dice::before { content: ""; position: absolute; inset: -6px 0; }
.hf-dice:hover { border-color: var(--text2); }
.hf-dice:focus-visible, .hf-swc:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; }
.hf-swc { position: relative; width: 44px; height: 24px; border-radius: 12px; border: 0; padding: 0; cursor: pointer; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2); }
.hf-swc::before { content: ""; position: absolute; inset: -10px -2px; }   /* a 44 px tall target around the 24 px switch */
.hf-swc::after { content: ""; position: absolute; top: 5px; left: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--face-quiet); transition: left 120ms ease; }
.hf-swc[aria-checked="true"] { background: color-mix(in srgb, var(--g) 35%, transparent); box-shadow: inset 0 0 0 1px var(--g); }
.hf-swc[aria-checked="true"]::after { left: 25px; background: var(--g); }
.ctl[data-key="harmonyAnchorStrength"] .ends { margin-top: -9px; }

.ruler.hf-off { visibility: hidden; height: 0; margin: 0; overflow: hidden; pointer-events: none; }   /* kept for the kit's wiring; the cell shows a button instead */

/* the retired settings: a quiet disclosure in the deck's foot */
.hf-retired-wrap { flex: 1 1 100%; order: 3; }
.hf-retired summary { cursor: pointer; color: var(--face-quiet); list-style: none; min-height: 24px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.hf-retired summary::-webkit-details-marker { display: none; }
.hf-retired summary::before { content: "▸"; font-size: 10px; }
.hf-retired[open] summary::before { content: "▾"; }
.hf-retired summary:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; border-radius: 4px; }
.hf-rt-body { margin: 6px 0 4px; max-width: 760px; font-size: 12px; line-height: 1.5; color: var(--face-quiet); }
.hf-rt-body dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 8px 0 0; }
.hf-rt-body dt { color: var(--text2); }
.hf-rt-body dd { margin: 0; font-family: var(--mono); color: var(--text2); }

@media (max-width: 699px) {
  .fh-sw { height: 44px; }
  .fp-harmony .fh-right { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .fh-sw i::after, .hf-swc::after, .fp-harmony .face-pic { transition: none; } }