/* compose/face · face.css — the instrument face kit (spec: docs/ui-overhaul-2/compose/FACE.md; API:
   docs/ui-overhaul-2/build/FACE-KIT.md). The tokens (--ae-*, --face-*) live in styles.css :root, under the names
   FACE §7 gives them; every colour here is one of them or a house token. No raw colour, no new shadow: the one
   elevation is var(--elev-1), on the face. Amber (--face-sel) means SELECTED inside the face, and nothing else. */

/* ── the page frame: the head, then the one face (the page scrolls; nothing inside it does) ── */
.fp { min-width: 0; overflow-anchor: none; }   /* lesson 9: a tap that re-draws never moves the page under the finger */
.fp *, .fp *::before, .fp *::after { box-sizing: border-box; }

/* ── the head (FACE §1, §6, §8; D-30): an eyebrow row, then the settings as a running standfirst over a hairline ── */
.fh { margin: 2px 2px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--face-line); }
.fh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 12px; }
.fh-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; min-width: 0; }
.fh-unit { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--face-quiet); }
.fh-sep { color: var(--face-quiet); font-size: 11px; }
.fh-end { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.fh-h1 { margin: 0; font-size: 19px; line-height: 1.42; font-weight: 400; letter-spacing: -0.006em; color: var(--text2); text-wrap: pretty; }
.fh-h1 .nb { white-space: nowrap; }
.fh-h1 > span[class^="c-"] { font-weight: 500; }
.c-walk { color: var(--ae-walk); } .c-land { color: var(--ae-land); } .c-home { color: var(--ae-home); } .c-surp { color: var(--surp); } .c-quiet { color: var(--text); }
.fh-stand { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--face-quiet); text-wrap: pretty; }
.fh-stand .num { font-weight: 500; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text2); }
.fh-stand .fh-act { font: inherit; color: var(--text2); background: none; border: 0; border-bottom: 1px solid var(--border2); padding: 0 0 1px; margin-left: 4px; cursor: pointer; position: relative; }
.fh-stand .fh-act:hover { color: var(--text); border-bottom-color: var(--text2); }
.fh-right { display: flex; align-items: center; gap: 18px; }
.fh-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--face-seg); border: 1px solid var(--border); }
.fh-seg button { font: inherit; font-size: 13px; color: var(--face-quiet); background: none; border: 0; border-radius: 999px; padding: 0 12px; min-width: 66px; height: 30px; cursor: pointer; white-space: nowrap; }   /* a fixed width: the bold option never resizes the switch (lesson 9) */
.fh-seg button[aria-checked="true"] { color: var(--ae-walk); background: var(--surface2); font-weight: 600; }
.fh-seg button:hover:not([aria-checked="true"]) { color: var(--text2); }
.fh-link { font: inherit; font-size: 13px; color: var(--face-quiet); background: none; border: 0; padding: 4px 0; cursor: pointer; white-space: nowrap; text-decoration: underline dotted var(--border2); text-underline-offset: 4px; position: relative; }
.fh-link:hover { color: var(--text2); text-decoration-color: var(--face-quiet); }
.fh-link b { font-weight: 500; color: var(--text2); }
.fh-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--face-quiet); background: none; border: 0; cursor: pointer; position: relative; }
.fh-icon:hover { color: var(--text); background: var(--surface2); }
.fh-icon svg { width: 16px; height: 16px; }
.fh button:focus-visible, .fh [role="button"]:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; border-radius: 4px; }
/* the app's own panel preset control, worn as the eyebrow's combo (its wiring is unchanged) */
.fh .panel-presets { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; min-width: 0; }
.fh .panel-preset-picker { min-width: 0; }
.fh .panel-preset-display { font: inherit; font-size: 15px; font-weight: 600; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--border2); border-radius: 0;
  padding: 2px 0; min-height: 28px; height: auto; display: inline-flex; align-items: center; gap: 6px; max-width: min(46vw, 420px); box-shadow: none; }
.fh .panel-preset-display .smart-combo-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh .panel-preset-display .smart-combo-caret { color: var(--face-quiet); font-size: 11px; }
.fh .panel-preset-save { font-size: 12.5px; }

/* ── the face: one well (FACE §1) ── */
.face { position: relative; border-radius: var(--radius); background: var(--ae-well); overflow: hidden; box-shadow: var(--elev-1); }
.face-pic { position: relative; }
.face-pic svg { display: block; overflow: visible; }
.face svg text { font-family: var(--font); }
.face svg .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.face svg .hit { fill: transparent; cursor: pointer; }
.face svg .hit:focus-visible { outline: none; }
.face svg [data-mark] { cursor: pointer; }
.face svg .grab { cursor: ns-resize; }
.face-legend { display: none; }
/* compact heads (face < 640): the facts the fact lines drop ride here, under the picture */
.face.compact .face-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 2px 16px 14px; font-size: 12.5px; color: var(--face-quiet); }
.face-legend b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; color: var(--text); margin-left: 4px; }
.face-legend .why { flex: 1 0 100%; }
.face-legend .why b { margin-left: 0; }

/* the selection label: the page's one floating element (glyph · name · value) */
.sel-label { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; min-height: 26px; padding: 2px 4px 2px 10px; border-radius: 13px;
  background: var(--face-chip); border: 1px solid var(--face-sel-60); font-size: 12.5px; color: var(--text); white-space: nowrap; max-width: calc(100% - 16px); }
.sel-label .sl-info { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-right: 6px; }
.sel-label .sl-g { display: inline-flex; }
.sel-label .sl-g svg { width: 14px; height: 14px; }
.sel-label .sl-name { overflow: hidden; text-overflow: ellipsis; }
.sel-label .sl-v { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text2); }
.sel-label .sl-act { display: inline-flex; gap: 2px; padding: 2px; border-radius: 11px; background: var(--face-seg); }
.sel-label .sl-act button { font: inherit; font-size: 12px; color: var(--face-quiet); background: none; border: 0; border-radius: 9px; height: 20px; padding: 0 9px; cursor: pointer; white-space: nowrap; }
.sel-label.tight .sl-v { display: none; }
.sel-label .sl-act button[aria-pressed="true"] { color: var(--text); background: var(--surface2); font-weight: 600; }
.sel-label .sl-act button:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 1px; }

/* ── the deck: a glass band across the foot of the same face (FACE §4). One column width C for every group
   (planDeck in face-kit.js); groups never grow; spare width stays at the right. ── */
.deck { position: relative; background: var(--face-deck); border-top: 1px solid var(--face-deck-edge); padding: 14px 24px 10px;
  display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 28px; row-gap: 0; --col: 110px; }
.deck.compact { padding: 16px 16px 8px; }
.deck[hidden] { display: none; }   /* `.deck` is a flex row: without this a hidden deck (Duration's Fall-only feel deck on Feel) stays on screen */
.deck > .brk { flex: 0 0 100%; height: 22px; }   /* rows of groups: 22 px apart (FACE §4) */
.grp { --g: var(--ae-walk); flex: none; min-width: 0; }
.grp.g-neutral { --g-rule: var(--text3); }
.grp > header { display: flex; align-items: center; gap: 10px; padding-top: 9px; border-top: 2px solid var(--g-rule, var(--g)); margin-bottom: 12px; white-space: nowrap; height: 29px; }
.grp > header b { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g); }
.grp > header.wrap { flex-wrap: wrap; height: auto; row-gap: 2px; white-space: normal; }
.grp > header.wrap .gloss { order: 3; flex: 1 0 100%; }
.grp.off > header b { color: var(--face-quiet); }
.grp.off > header { border-top-color: var(--text3); }
/* §3b: every group keeps its Reset, quiet at the right of its head; its words never change (lesson 9) */
.g-reset { margin-left: auto; font: inherit; font-size: 12px; color: var(--text2); background: none; border: 0; padding: 0 2px; cursor: pointer; position: relative; white-space: nowrap; }
.g-reset::before { content: ""; position: absolute; inset: -13px 0; }   /* 44 px tall; widthwise inside the head */
.g-reset[aria-disabled="true"] { color: var(--face-quiet); cursor: default; }
.g-reset:not([aria-disabled="true"]):hover { color: var(--text); }
.g-reset:focus-visible, .gsw:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; border-radius: 4px; }
/* a group's on/off (a switch in its head) */
.gsw { position: relative; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; color: var(--face-quiet); background: none; border: 0; padding: 0; cursor: pointer; height: 18px; }
.gsw::before { content: ""; position: absolute; inset: -13px -4px; }
.gsw i { position: relative; width: 30px; height: 17px; border-radius: 999px; background: var(--face-seg); box-shadow: inset 0 0 0 1px var(--border2); }
.gsw i::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--text2); box-shadow: 0 0 0 1.5px var(--knob-ring); transition: left 120ms ease; }
.gsw[aria-checked="true"] { color: var(--text2); }
.gsw[aria-checked="true"] i { background: color-mix(in srgb, var(--g) 30%, var(--face-seg)); box-shadow: inset 0 0 0 1px var(--g); }
.gsw[aria-checked="true"] i::after { left: 15px; background: var(--g); }

.ctls { display: grid; grid-template-columns: repeat(var(--cols, 1), var(--col)); column-gap: 12px; row-gap: 10px; }
.ctl { position: relative; min-width: 0; }
.ctl .lab { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2); white-space: nowrap; height: 18px; }
.ctl .lab .lg { display: inline-flex; flex: none; }
.ctl .lab .lg svg { width: 15px; height: 15px; display: block; }
.ctl .lab .lt { overflow: hidden; }
/* the changed-from-loaded dot: its room is always kept (lesson 9); explained in the help and by "Reset changed" */
.ctl .chg { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text2); visibility: hidden; }
.ctl.changed .chg { visibility: visible; }
.ctl.sel .lab { color: var(--text); }
.ctl .vrow { display: flex; align-items: center; gap: 6px; min-height: 31px; }
.ctl .val { display: inline-block; font: 400 22px/1.15 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text);
  background: none; border: 0; padding: 0; margin: 3px 0 0; cursor: text; text-align: left; white-space: nowrap; min-height: 28px; max-width: 100%;
  text-decoration: underline dotted transparent; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ctl .val small { font-family: var(--font); font-size: 12px; color: var(--face-quiet); margin-left: 5px; letter-spacing: 0; }
.ctl .val small:empty { display: none; }
.ctl .val:hover { text-decoration-color: var(--face-quiet); }
.deck.narrow .ctl .val, .deck.narrow .ctl .val-in { font-size: 19px; }
.ctl.tight .val, .ctl.tight .val-in { font-size: 16px; }
.ctl.nounit .val small { display: none; }
.ctl .val-in { font: 400 22px/1.15 var(--mono); width: 100%; min-width: 0; color: var(--text); background: var(--face-seg); border: 1px solid var(--face-sel-60); border-radius: 4px; padding: 0 4px; margin: 3px 0 0; min-height: 28px; }
.ctl .val-in:focus { outline: 2px solid var(--face-sel); outline-offset: 1px; }
.ctl .val:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; border-radius: 4px; }
/* D-26: the ⓘ ends the value line, so it never widens a column; its target stays inside its own control */
.ctl .hlp { position: relative; z-index: 1; flex: none; width: 15px; height: 15px; margin: 3px 2px 0 auto; padding: 0; border-radius: 50%; border: 1px solid var(--face-quiet); background: none;
  font: italic 600 10px/13px var(--font); color: var(--face-quiet); text-align: center; cursor: pointer; }
.ctl .hlp::after { content: ""; position: absolute; inset: -6px -2px -6px -8px; }
.ctl .hlp:hover, .ctl .hlp[aria-expanded="true"] { color: var(--text); border-color: var(--text2); }
.ctl .hlp:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }

/* the ruler: a sideways scrubber. The track is inset half a thumb, so the thumb never leaves the column. */
.ruler { position: relative; height: 44px; margin-top: -3px; cursor: ew-resize; touch-action: pan-y; outline: none; -webkit-user-select: none; user-select: none; }
.ruler .trk { position: absolute; left: calc(var(--face-thumb-w) / 2); right: calc(var(--face-thumb-w) / 2); top: 0; bottom: 0; }
.ruler .ticks { position: absolute; left: 0; right: 0; bottom: 16px; height: 13px;
  background: linear-gradient(to right, var(--face-tick) 0 1px, transparent 1px) 0 100% / 10% 7px repeat-x,
              linear-gradient(to right, var(--face-tick-major) 0 1px, transparent 1px) 0 100% / 50% 13px repeat-x; }
.ruler .ticks::after { content: ""; position: absolute; right: -1px; bottom: 0; width: 1px; height: 13px; background: var(--face-tick-major); }
.ruler.enum .ticks { background: none; }
.ruler.enum .ticks::after { display: none; }
.ruler .det { position: absolute; bottom: 0; width: 1px; height: 11px; margin-left: -0.5px; background: var(--face-tick-major); }
.ruler .base { position: absolute; left: 0; right: 0; bottom: 16px; height: 1px; background: var(--face-base); }
.ruler .fill { position: absolute; left: 0; bottom: 15px; height: 3px; border-radius: 2px; width: calc(var(--f) * 100%); background: color-mix(in srgb, var(--g) 55%, transparent); }
.ruler.enum .fill { display: none; }
.ruler .thumb { position: absolute; left: calc(var(--f) * 100%); bottom: 9px; width: var(--face-thumb-w); height: 16px; margin-left: calc(var(--face-thumb-w) / -2); border-radius: 8px;
  background: var(--g); box-shadow: 0 0 0 2px var(--knob-ring); transition: transform 120ms ease, box-shadow 120ms ease; }
.ruler .thumb::before, .ruler .thumb::after { content: ""; position: absolute; top: 5px; width: 1.5px; height: 6px; border-radius: 1px; background: var(--knob-ring); }
.ruler .thumb::before { left: 9px; } .ruler .thumb::after { left: 13.5px; }
.ctl:hover .ruler .thumb, .ctl.dragging .ruler .thumb { transform: scale(1.08); }
.ruler:focus-visible .thumb { outline: 2px solid var(--face-sel); outline-offset: 3px; }
.ctl.sel .ruler .thumb { box-shadow: 0 0 0 2px var(--knob-ring), 0 0 0 3.5px var(--face-sel); }
/* a group's collapsed disclosure of more rulers (Melody's "Up and down separately") */
.more { margin-top: 12px; }
.more-t { position: relative; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; color: var(--text2); background: none; border: 0; padding: 0; height: 20px; cursor: pointer; }
.more-t::before { content: ""; position: absolute; inset: -12px -6px; }   /* 44 px tall */
.more-t:hover { color: var(--text); }
.more-t:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; border-radius: 4px; }
.more-t .more-c { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin: 0 2px 0 1px; transition: transform 120ms ease; }
.more.open .more-t .more-c { transform: rotate(45deg); }
.more-t .chg { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text2); visibility: hidden; }
.more-t.changed .chg { visibility: visible; }
.more-body { margin-top: 10px; }
.more-body[hidden] { display: none; }
/* §3a end words */
.ctl .ends { display: flex; justify-content: space-between; gap: 8px; margin: -9px 0 0; padding: 0 2px; font-size: 11px; line-height: 14px; color: var(--face-quiet); white-space: nowrap; }
.ctl .ends.after { justify-content: flex-start; gap: 12px; }
.ctl .ends.after button { font: inherit; font-size: 11.5px; color: var(--text2); background: none; border: 0; border-bottom: 1px dotted var(--face-quiet); padding: 0; cursor: pointer; position: relative; }
.ctl .ends.after button:disabled { color: var(--face-quiet); border-bottom-color: transparent; cursor: default; }
.ctl .ends.after button:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
/* D-24: a disabled control is dimmed, the reason under it in words; its track and thumb keep their shapes */
.ctl.dis .ruler, .ctl.inert .ruler { opacity: 0.42; }
.ctl.dis .ruler { cursor: not-allowed; }
.ctl.dis .val { color: var(--text2); cursor: not-allowed; }
.ctl .why { margin-top: 2px; font-size: 11px; line-height: 14px; color: var(--text2); white-space: normal; min-height: 28px; }
.ctl .why-held { visibility: hidden; }
.grp.off .ctl .ruler { opacity: 0.42; }
.grp.off .ctl .val { color: var(--face-quiet); }

.deck-foot { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin: 12px 0 0; min-height: 17px; }
.deck-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--face-quiet); max-width: 60em; min-width: 0; flex: 1 1 22em; }
.deck-note b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; color: var(--text2); }
.deck-hint { margin: 0 0 0 auto; }
.deck-keys { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--face-deck-edge);
  background: none; font: 600 11px/1 var(--font); color: var(--face-quiet); cursor: pointer; }
.deck-keys::after { content: ""; position: absolute; inset: -12px; }
.deck-keys:hover { color: var(--text); border-color: var(--text3); }
.deck-keys:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.deck.compact .deck-foot { margin-top: 14px; }
.deck.compact .deck-hint { margin: 0; text-align: left; white-space: normal; }

/* the help note: opaque, below its control, inside the face (D-25) */
.face-help { position: absolute; z-index: 5; margin: 0; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface2); border: 1px solid var(--border2);
  font-size: 12px; line-height: 1.45; color: var(--text2); white-space: normal; }
.face-help b { color: var(--text); font-weight: 600; }
.face-help .fh-why { display: block; margin-top: 6px; color: var(--text); }
.face-help .fh-chg { display: block; margin-top: 6px; color: var(--face-quiet); font-size: 11.5px; }


/* ── zones drive the deck (FACE-KIT "Zones"): a zone bar names the region of the picture and gives the deck back ── */
.deck.zoned .grp > header { display: none; }
.deck.zoned .grp { border-top: 2px solid var(--g-rule, var(--g)); padding-top: 12px; }
.zone-bar { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; margin: 0 0 14px; min-height: 44px; }
.zone-chip { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; color: var(--text); }
.zone-chip b { font-weight: 600; letter-spacing: 0.01em; }
.zone-chip .gloss { font-size: 12.5px; color: var(--face-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--g); }   /* flat: no glow (D-faces-flat) */
.zone-acts { display: inline-flex; align-items: center; gap: 4px; }
.zone-acts button { position: relative; font: inherit; font-size: 12.5px; color: var(--text2); background: none; border: 1px solid var(--face-deck-edge); border-radius: 999px; height: 30px; padding: 0 13px; cursor: pointer; white-space: nowrap; }
.zone-acts button::before { content: ""; position: absolute; inset: -7px 0; }
.zone-acts .zone-reset { border-color: transparent; }
.zone-acts .zone-reset[aria-disabled="true"] { color: var(--face-quiet); cursor: default; }
.zone-acts button:not([aria-disabled="true"]):hover { color: var(--text); border-color: var(--text3); }
.zone-acts button:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.zone-extra { flex: 0 0 100%; }
.zone-extra:empty { display: none; }
@media (pointer: coarse), (max-width: 699px) {
  .zone-bar { min-height: 46px; margin-bottom: 8px; }
  .zone-acts button { height: 44px; padding: 0 14px; }
  .zone-acts button::before { inset: 0; }
}

/* ── mid width (700–1199): the head stacks so the headline keeps its measure ── */
@media (min-width: 700px) and (max-width: 1199px) {
  .fh-top { flex-direction: column; align-items: flex-start; }
  .fh-h1 { font-size: 18px; }
}
/* ── phone ── */
@media (max-width: 699px) {
  .fh { margin: 0 0 14px; padding-bottom: 12px; }
  .fh-top { flex-direction: column; align-items: stretch; gap: 8px; }
  .fh-h1 { font-size: 16px; line-height: 1.45; }
  .fh-stand { font-size: 13.5px; }
  .fh-right { flex-direction: column; align-items: stretch; gap: 8px; }
  .fh-seg { display: grid; grid-template-columns: repeat(var(--segs, 4), 1fr); }
  .fh-seg button { height: 38px; padding: 0; }
  .fh-right .fh-scale { display: none; }
  .fh .panel-preset-display { max-width: calc(100vw - 150px); }
}

/* lesson 7 / D-25: every small tap target is 44 px under a finger (phones count as touch even where an emulator
   reports a fine pointer). The ⓘ's 44 × 44 target: right edge = the column's edge, bottom = the value line's
   bottom (the ruler starts below it), so it never takes a neighbour's value or its own ruler. */
@media (pointer: coarse), (max-width: 699px) {
  .ctl .vrow { min-height: 44px; }
  .ctl .ruler { margin-top: 0; }
  .ctl .val { min-height: 44px; }
  .ctl .hlp { margin-right: 11px; }
  .ctl .hlp::after { inset: -14.5px -11px -14.5px -18px; }
  .ctl .ends.after button::after { content: ""; position: absolute; inset: -3px -4px -27px -4px; }
  .fh-link::after, .fh-stand .fh-act::after { content: ""; position: absolute; inset: -14px -4px; }
  .fh-icon { width: 44px; height: 44px; }
  .sel-label { min-height: 30px; }
  .sel-label:has(.sl-act) { min-height: 50px; padding: 3px 3px 3px 10px; border-radius: 14px; }
  .sel-label .sl-act button { height: 44px; min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ruler .thumb, .gsw i::after, .more-t .more-c { transition: none; }
  .ctl:hover .ruler .thumb, .ctl.dragging .ruler .thumb { transform: none; }
}

/* ── one look for the pictures' own type and buttons (D-63, owner 2026-10-10: "use the same css properties for
   equivalent design elements"). Every Compose page draws its titles, facts and buttons through these, so a title on
   Melody and a title on Percussion are the same object. Titles are chrome, so they are neutral: a part's colour stays
   in its marks and its deck group (FabFilter cue 2, standard §1.2). SVG presentation attributes yield to these rules. ── */
.fp { --face-title-fs: 18px; --face-fact-fs: 12.5px; --face-btn-h: 30px; }
@media (max-width: 699px) { .fp { --face-title-fs: 15px; --face-fact-fs: 11.5px; } }
.fp svg text.fh-title { font-size: var(--face-title-fs); font-weight: 600; fill: var(--text); letter-spacing: -0.005em; }
.fp svg text.fh-fact { font-size: var(--face-fact-fs); fill: var(--face-quiet); }
.fp-percseq .pp-col h2, .fp-percseq .pp-side h2 { font-size: var(--face-title-fs); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; color: var(--text); }
.fp .fbtn, .fp .dur-follow, .fp .dur-reset, .fp .zone-acts button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--face-btn-h); padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--face-deck-edge); background: var(--face-chip); font: 400 12.5px/1 var(--font); color: var(--text2); cursor: pointer; white-space: nowrap; }
.fp .fbtn:hover:not([aria-disabled="true"]), .fp .dur-follow:hover, .fp .dur-reset:hover, .fp .zone-acts button:not([aria-disabled="true"]):hover { color: var(--text); border-color: var(--text3); }
.fp .zone-acts .zone-reset { border-color: transparent; background: none; }
@media (pointer: coarse), (max-width: 699px) { .fp { --face-btn-h: 44px; } }
/* D-63: the headline's emphasis is one treatment on every page: the brighter text at medium weight. Its hue went with
   the titles' (Melody's sentence was violet, Sequence's blue, Phrasing's and Dynamics' plain): colour is the picture's. */
.fh-h1 .c-walk, .fh-h1 .c-land, .fh-h1 .c-home, .fh-h1 .c-surp, .fh-h1 .c-quiet { color: var(--text); font-weight: 500; }

/* ── the key (D-64): one row at the foot of the picture, left on the face's inset, on every page. Glyphs (face-kit KEY)
   are 16 × 12 in the mark's own colour; the words are 12 px in the quiet colour. ── */
.face-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 4px 28px 16px; font-size: 12px; line-height: 16px; color: var(--face-quiet); }
.face-key:empty { display: none; }
.face-key .k { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.face-key .k svg { flex: none; width: 16px; height: 12px; overflow: visible; }
.face-key .k b { font: 400 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--text2); }
@media (max-width: 699px) { .face-key { padding: 2px 16px 12px; gap: 6px 14px; } .face-key .k { white-space: normal; } }

/* ── the register (D-65): Melody's pitch and Dynamics' loudness draw their range with these same parts. The values are
   Melody's (the first of the two), so Dynamics takes Melody's look. ── */
.fp svg .reg-cell { fill: rgb(var(--land-light)); }
.fp svg .reg-edge { stroke: var(--ae-land-60); stroke-width: 1.2; stroke-dasharray: 5 4; fill: none; }
.fp svg .reg-lab { fill: var(--ae-land-60); }
.fp svg .reg-handle rect { fill: var(--surface2); stroke: var(--ae-walk-60); stroke-width: 1.2; }
.fp svg .reg-handle line { stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
.fp svg .reg-handle.sel rect { stroke: var(--face-sel); stroke-width: 2; }
.fp svg .reg-track { fill: rgba(var(--land-light), 0.06); stroke: rgba(var(--land-light), 0.3); stroke-width: 1; }
.fp svg .reg-oct { fill: rgba(var(--land-light), 0.1); }
.fp svg .reg-tick { stroke: rgba(var(--land-light), 0.5); stroke-width: 1; }
.fp svg .reg-strip-lab { fill: var(--face-quiet); font-family: var(--mono); pointer-events: none; }
.fp svg .reg-thumb { fill: var(--ae-land); fill-opacity: 0.32; stroke: var(--ae-land); stroke-width: 1.2; }
.fp svg .reg-thumb.sel { stroke: var(--face-sel); stroke-width: 1.6; }
.fp svg :hover > .reg-thumb, .fp svg .hot > .reg-thumb { fill-opacity: 0.55; }
.fp svg .reg-view { fill: none; stroke: rgba(var(--walk-light), 0.75); stroke-width: 1.2; stroke-dasharray: 3 2; }
.fp svg .reg-name { fill: var(--face-quiet); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fp svg .reg-name.st { fill: var(--text2); font-weight: 600; }
.fp svg .reg-name.home { fill: var(--ae-home); }
.fp svg .reg-name.cur { fill: var(--ae-walk); }