/* Compose · Scale & Root · the instrument face: the page's own pieces (rebuilt 2026-10-16). The kit is face.css; every
   colour here is a house or face token. Amber (--face-sel) is the one selected thing; violet (--ae-home) is home. */

/* the head's Scala files: two picture buttons at the eyebrow row's right end */
.fp-scale .sf-files { display: inline-flex; gap: 8px; }
.fp-scale .fbtn:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; }
@media (max-width: 699px) { .fp-scale .sf-files { display: grid; grid-template-columns: 1fr 1fr; } }

/* ── two columns in one well: The scale (the wheel, the hero) | the scale library (stacked under 940 px of face, the
   wheel first). The library is the preset library in its scale mode (styles.css .m2-lib); beside the wheel it fills
   the wheel's height exactly, so its list scrolls inside it and never makes the row taller. ── */
.sf-cols { display: grid; grid-template-columns: minmax(0, 1fr); }
.face.sf-two .sf-cols { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
.sf-find, .sf-scale { min-width: 0; padding: 22px 28px 20px; display: flex; flex-direction: column; }
.face.sf-two .sf-find { position: relative; padding: 0; border-left: 1px solid var(--face-line); }
.face.sf-two .sf-find > .m2-lib { position: absolute; inset: 22px 24px 20px; }
.face:not(.sf-two) .sf-find { border-top: 1px solid var(--face-line); }
.face:not(.sf-two) .sf-find > .m2-lib { flex: none; }
.face:not(.sf-two) .sf-find .m2-lib-list { flex: none; max-height: 60vh; }
.sf-hrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-height: 36px; }
.fp-scale .sf-t { margin: 0; font-size: var(--face-title-fs); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; color: var(--text); }
.sf-f { margin: 6px 0 0; font-size: var(--face-fact-fs); line-height: 1.45; color: var(--face-quiet); text-wrap: pretty; }
.sf-f b { font-weight: 500; color: var(--text2); }
.fp-scale .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sf-l { font-size: 12.5px; color: var(--face-quiet); white-space: nowrap; }

/* the library's Factory views (List | Map | Timeline) and the picture under them */
.sf-views { gap: 8px; }
.sf-views .fh-seg button { min-width: 0; padding: 0 13px; height: 26px; font-size: 12px; }
.sf-views .m2-lib-fav { margin-left: auto; }
.sf-views .fh-seg button:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.sf-find .sf-pic { margin-top: 2px; flex: none; }

/* ── the pictures: map tiles and timeline rows; a dot per entry (a scale filled, a tuning a ring) ── */
.sf-pic { position: relative; }
.sf-pic svg { display: block; overflow: visible; }
.sf-pic svg.sf-map { overflow: hidden; border-radius: var(--radius-sm); }
.sf-reg, .sf-row-lab { cursor: pointer; outline: none; }
/* the world: flat land, a region's land a step lighter on hover, amber-edged when it filters the list */
.sf-land { fill: var(--face-chip); stroke: var(--face-chip); stroke-width: 6; stroke-linejoin: round; transition: fill 120ms ease; }
.sf-map > .sf-land { fill: color-mix(in srgb, var(--face-chip) 50%, transparent); stroke: color-mix(in srgb, var(--face-chip) 50%, transparent); }
.sf-reg:hover .sf-land { fill: color-mix(in srgb, var(--text3) 32%, var(--face-chip)); stroke: color-mix(in srgb, var(--text3) 32%, var(--face-chip)); }
.sf-reg.on .sf-land { fill: color-mix(in srgb, var(--face-sel) 22%, var(--face-chip)); stroke: color-mix(in srgb, var(--face-sel) 22%, var(--face-chip)); }
.sf-reg.off .sf-land { opacity: 0.6; }
.sf-reg .hit { fill: transparent; }
.sf-reg-n:focus-visible { fill: var(--text); text-decoration: underline; text-decoration-color: var(--face-sel); }
.sf-reg-n { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; fill: var(--text2); paint-order: stroke; stroke: var(--ae-well); stroke-width: 3px; stroke-linejoin: round; }
.sf-reg-n.on { fill: var(--text); }
.sf-reg-c { font-weight: 400; fill: var(--face-quiet); }
.sf-row-lab .hit { fill: transparent; }
.sf-tl-n { font-size: 11.5px; fill: var(--text2); }
.sf-row-lab:hover .sf-tl-n { fill: var(--text); }
.sf-row-lab.on .sf-tl-n { fill: var(--face-sel); font-weight: 600; }
.sf-row-lab:focus-visible .sf-tl-n { text-decoration: underline; fill: var(--text); }
.sf-tl-t { font-size: 10.5px; fill: var(--face-quiet); }
.sf-pt { cursor: pointer; }
.sf-pt .hit { fill: transparent; }
.sf-pt .dot { fill: var(--text2); transition: fill 120ms ease; }
.sf-pt .dot.ring { fill: var(--ae-well); stroke: var(--text2); stroke-width: 1.4; }
.sf-pt:hover .dot { fill: var(--text); }
.sf-pt:hover .dot.ring { fill: var(--ae-well); stroke: var(--text); }
.sf-pt.dim { opacity: 0.16; }
.sf-tip { position: absolute; z-index: 6; pointer-events: none; max-width: 280px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface2);
  border: 1px solid var(--border2); font-size: 12px; line-height: 1.4; color: var(--text2); }
.sf-tip b { display: block; color: var(--text); font-weight: 600; }

/* ── the wheel ── */
.sf-tun { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.sf-combo { display: inline-flex; min-width: 0; }
.sf-tun .smart-combo { flex: none; min-width: 0; }
.sf-tun .smart-combo-btn { height: var(--face-btn-h); max-width: 260px; gap: 10px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--face-deck-edge);
  background: var(--face-chip); color: var(--text); font: 500 13px/1 var(--font); }
.sf-tun .smart-combo-btn:hover { border-color: var(--text3); }
.sf-tun .smart-combo-btn:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.sf-wheel { position: relative; margin-top: 10px; }
.sf-wsvg { display: block; margin: 0 auto; overflow: visible; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.sf-note { cursor: pointer; outline: none; touch-action: none; }
.sf-note .hit-ring { fill: transparent; }
.sf-note:hover .hit-ring { fill: var(--ae-land-08); }
.sf-note:focus-visible .hit-ring { fill: var(--ae-land-08); stroke: var(--face-sel); stroke-width: 2; }
.sf-lab { cursor: pointer; }
.sf-lab .hit { fill: transparent; }
.sf-ln { font-size: 12.5px; fill: var(--ae-land-60); }
.sf-lab.st .sf-ln { fill: var(--ae-land); font-weight: 600; }
.sf-lab.off .sf-ln { fill: var(--face-quiet); }
.sf-lab:hover .sf-ln { fill: var(--text); }
.sf-lc { font-size: 10px; fill: var(--face-quiet); }
.sf-a440 { font-size: 10.5px; fill: var(--face-quiet); }
.sf-ratio { font-size: 10px; fill: var(--face-quiet); font-style: italic; }
.sf-grip { cursor: grab; outline: none; touch-action: none; }
.sf-grip-r { fill: var(--face-chip); stroke: var(--face-deck-edge); }
.sf-ridge { stroke: var(--face-tick); stroke-width: 1; }
.sf-grip:hover .sf-grip-r { fill: var(--surface2); }
.sf-grip:hover .sf-ridge { stroke: var(--face-tick-major); }
.sf-grip:focus-visible .sf-grip-r { stroke: var(--face-sel); stroke-width: 2; }
.sf-wsvg.turning, .sf-wsvg.turning .sf-grip { cursor: grabbing; }
.sf-c1 { fill: var(--text); font-weight: 500; }
.sf-c2 { font-size: 12.5px; fill: var(--face-quiet); }
.sf-live rect { fill: var(--surface2); stroke: var(--face-sel-60); }
.sf-live text { font-size: 12px; fill: var(--text); }
.sf-tunfact, .sf-stepfact { text-align: center; }
.sf-tunfact { margin-top: 4px; }
.sf-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 14px; }
.sf-pair { display: inline-flex; align-items: center; gap: 8px; }
.fp-scale .sf-sq { width: var(--face-btn-h); padding: 0; font-size: 17px; }
.sf-acts .fbtn[role="switch"][aria-checked="true"] { color: var(--text); background: var(--surface2); }
/* the selected note's auditions, under its ruler in the deck */
.sf-grp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* the deck note's link to the Melody page */
.deck-note a { color: var(--text2); text-decoration: none; border-bottom: 1px solid var(--border2); position: relative; }
.deck-note a:hover { color: var(--text); border-bottom-color: var(--text2); }
.deck-note a:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; border-radius: 2px; }

/* ── the MIDI keyboard: the well's last section, a piano whose keys say what they play ── */
.sf-midi { padding: 22px 28px 6px; border-top: 1px solid var(--face-line); }
.sf-midi:empty { display: none; }
.sf-midi-head .sf-f { margin-top: 6px; }
.sf-midi-sws { display: flex; flex-wrap: wrap; gap: 16px 36px; margin: 16px 0 20px; }
.sf-midi-sw { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.sf-midi-l { font-size: var(--face-fact-fs); color: var(--face-quiet); white-space: nowrap; }
.sf-midi-x { margin: 0; max-width: 30ch; min-height: 2.9em; font-size: 12px; line-height: 1.45; color: var(--text2); }
.sf-midi .fh-seg button:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.sf-midi-keys { overflow: hidden; }
.sf-midi-keys svg { display: block; }
.sf-k { cursor: pointer; outline: none; }
.sf-k-e { stroke: var(--knob-ring); stroke-width: 1.2; }
.sf-k:hover .sf-k-e { stroke: var(--text2); stroke-width: 1.5; }
.sf-k:focus-visible .sf-k-e, .sf-k.down .sf-k-e { stroke: var(--face-sel); stroke-width: 2; }
/* a key held on a connected keyboard: amber edge and a lift, for as long as it is down */
.sf-k.held .sf-k-e { stroke: var(--face-sel); stroke-width: 2.4; }
.sf-k.held .sf-k-f { filter: brightness(1.25); }
.sf-k-out { font-size: 11px; fill: var(--face-sel); }
.sf-k-n { fill: var(--text); pointer-events: none; }
.sf-k-n.dk { fill: var(--knob-ring); }
.sf-k-c { font-size: 11px; fill: var(--text2); }
.sf-midi .face-key { padding: 12px 0 18px; }

/* ── phone and touch ── */
@media (max-width: 699px) {
  .sf-find, .sf-scale { padding: 18px 16px 16px; }
  .sf-tun { margin-left: 0; flex: 1 1 100%; }
  .sf-tun .smart-combo { flex: 1 1 auto; }
  .sf-tun .smart-combo-btn { max-width: none; }
  .sf-midi { padding: 18px 16px 4px; }
  .sf-midi-sws { flex-direction: column; gap: 14px; }
  .sf-midi-sw { align-items: stretch; }
  .sf-midi-x { max-width: none; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-land, .sf-pt .dot { transition: none; }
}