/* Compose · Duration · the instrument face: the page's own rules (FACE §2, §2a). The kit is face.css; every colour is a token.
   The metre (beats, places, the click) is the PLACE and wears --land; the notes and what moves them in time wear --walk. */

/* an unlit column or plot ground (the mock's own token: a mix of --text, no literal) */
.fp-duration { --face-cell: color-mix(in srgb, var(--text) 2.5%, transparent); }

/* the head's unit switch: each option keeps its width when it turns bold (lesson 9) */
.fp-duration .fh-seg button { min-width: 0; padding: 0 14px; display: inline-grid; place-items: center; }
.fp-duration .fh-seg button::after { content: attr(data-t); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; grid-area: 1 / 1; }
.fp-duration .fh-seg button { grid-template-areas: "x"; }
.fp-duration .fh-seg button { font-size: 13px; }
.fp-duration .fh-right { flex-wrap: wrap; row-gap: 6px; min-width: 0; }   /* the switch is wide (three named units): the scale line wraps under it before it runs off the head */
@media (max-width: 699px) {
  .fp-duration .fh-seg button { white-space: normal; min-width: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.12; }
  .fp-duration .fh-seg { min-width: 0; }
}
/* the headline names all three units; only the one on show is in its lights, and each clause switches to its unit */
.fp-duration .fh-h1 .c { cursor: pointer; text-decoration: underline dotted transparent; text-underline-offset: 6px; text-decoration-thickness: 1.5px; transition: color 120ms ease; }
.fp-duration .fh-h1 .c:not(.on):hover, .fp-duration .fh-h1 .c:focus-visible { text-decoration-color: var(--face-quiet); outline: none; }
.fp-duration .fh-h1 .c:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; border-radius: 4px; text-decoration-color: transparent; }
.fp-duration .fh-h1 .c:not(.on) > span[class^="c-"] { color: inherit; font-weight: 400; }

/* the picture */
.fp-duration .face-pic { position: relative; }
.fp-duration .dur-svg svg { display: block; overflow: visible; }
.fp-duration .face svg .hit { fill: transparent; cursor: pointer; }
.fp-duration .face svg .hit:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.fp-duration .face svg .hit[role="button"] { fill: transparent; }
.fp-duration .face svg [data-place]:focus-visible { outline: 2px solid var(--face-sel); outline-offset: -1px; }

/* the legend: every unit has one, at every width, listing only the marks drawn */
.fp-duration .face-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 24px 10px; font-size: 11.5px; color: var(--face-quiet); }
.fp-duration .face-legend.above { padding-top: 16px; padding-bottom: 0; }
.fp-duration .face.compact .face-legend { gap: 6px 16px; padding: 2px 14px 14px; font-size: 12.5px; }
.fp-duration .face-legend > span { display: inline; }
.fp-duration .face-legend > span > svg { margin-right: 4px; }
.fp-duration .face-legend b.lgh { font-family: var(--font); font-weight: 600; color: var(--text2); margin-left: 0; }
.fp-duration .face-legend svg { display: inline-block; vertical-align: -1px; flex: none; }
.fp-duration .face-legend .mono, .fp-duration .face-legend tspan.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text2); }
.fp-duration .face-legend .goto, .fp-duration .dur-svg .goto { color: var(--ae-walk); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fp-duration .face-legend .goto { display: inline-block; padding: 12px 0; margin: -12px 0; }
.fp-duration .face-legend .goto:focus-visible, .fp-duration .dur-svg .goto:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; border-radius: 3px; }

/* named swings: chips in the Swing group; the pressed one wears the group's light, never amber */
.fp-duration .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.fp-duration .chips button { font: inherit; font-size: 12px; color: var(--text2); background: none; border: 1px solid var(--border2); border-radius: 999px; height: 26px; padding: 0 6px; cursor: pointer; white-space: nowrap; }
.fp-duration .chips button[aria-pressed="true"] { color: var(--knob-ring); background: var(--g); border-color: var(--g); font-weight: 600; }
.fp-duration .chips button:disabled { cursor: default; color: var(--face-quiet); background: none; border-color: var(--border); font-weight: 400; }
.fp-duration .chips button:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 699px) { .fp-duration .chips button { height: 44px; } }

/* bipolar rulers fill from the centre (FACE §3) */
.fp-duration .ctl[data-key="swingAmount"] .ruler .fill, .fp-duration .ctl[data-key="timingPushMs"] .ruler .fill,
.fp-duration .ctl[data-key="gapMin"] .ruler .fill, .fp-duration .ctl[data-key="gapMax"] .ruler .fill { left: calc(min(var(--f), 0.5) * 100%); width: calc(abs(var(--f) - 0.5) * 100%); }

/* the rule's four rulers, repeated under the rule between 700 and 1199 (D-27): a deck of one group, in the picture */
.fp-duration .deck.mini { position: absolute; left: 0; right: 0; top: 0; border-top: 0; background: none; padding: 0 24px; }
.fp-duration .deck.mini[hidden] { display: none; }
.fp-duration .deck.mini .deck-foot { display: none; }
.fp-duration .face-legend .lg-key { color: var(--text2); }

/* ── the boxes (the owner's hand sketch): a box per beat, pins in its places, a letter and an outline colour per distinct box ──
   Letters are lowercase and mean "the same beat" (never a note name). Each is a tint of tokens already in the palette. */
:root {
  /* one colour per distinct beat pattern (owner, 2026-10-02): violet, teal, blue, rose, lime, sand; amber stays 'selected' only */
  --dur-a: #9a84ff;
  --dur-b: #4fd1c5;
  --dur-c: #6aa8ff;
  --dur-d: #ff8fb0;
  --dur-e: #b4e06a;
  --dur-f: #d8c3a0;
}
.fp-duration .face svg .bx, .fp-duration .face svg .rl, .fp-duration .face svg .sb, .fp-duration .face svg .mk { cursor: pointer; }
.fp-duration .face svg .bx:focus-visible, .fp-duration .face svg .rl:focus-visible, .fp-duration .face svg .sb:focus-visible, .fp-duration .face svg [data-place]:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.fp-duration .face svg .bx.drop > rect:first-child { stroke: var(--face-sel); stroke-width: 2.4; stroke-dasharray: none; }
.fp-duration .dur-svg.dragging, .fp-duration .dur-svg.dragging .bx { cursor: grabbing; }
.fp-duration .face svg .sb:hover rect:nth-of-type(2) { stroke: var(--text2); }
.dur-ghost { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--c); background: var(--ae-well); color: var(--c); font: 700 13px/23px var(--font); text-align: center; }
.fp-duration .dur-extra .zone-chips-lab { flex: 1 1 100%; font-size: 12.5px; color: var(--face-quiet); line-height: 1.4; }
.fp-duration .dur-extra .zone-chips-lab b { color: var(--text); font-weight: 600; }
.fp-duration .dur-extra .dx { font: 500 12.5px/1 var(--font); }
.fp-duration .face svg .bx:focus:not(:focus-visible), .fp-duration .face svg [data-place]:focus:not(:focus-visible), .fp-duration .face svg .rl:focus:not(:focus-visible) { outline: none; }
.fp-duration .dur-svg { user-select: none; -webkit-user-select: none; }
.fp-duration .face svg .pin { cursor: ns-resize; }
.fp-duration .face svg .pin, .fp-duration .face svg .sbar { touch-action: none; } .fp-duration .face svg .sbar { cursor: ew-resize; }

/* the bar's ruler and Reset above the picture; the feel under the deck */
.fp-duration .dur-top { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 6px; }
.fp-duration .dur-top .deck { flex: 1 1 auto; margin: 0; }
.fp-duration .dur-reset { flex: none; margin-bottom: 14px; }   /* the face button: face.css (D-63) */
.fp-duration .dur-reset:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.fp-duration .face svg .edge { fill: transparent; cursor: ew-resize; touch-action: none; }
.fp-duration .face svg .grip { opacity: 0; transition: opacity 120ms ease; pointer-events: none; }
.fp-duration .face svg .bx:hover .grip { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .fp-duration .face svg .grip { transition: none; } }
.fp-duration .deck.feel { margin-top: 18px; }
.fp-duration .deck.top .deck-hint, .fp-duration .deck.feel .deck-hint { display: none; }
.fp-duration .dur-top { align-items: center; }
.fp-duration .dur-top .deck { flex: 0 1 560px; }
.fp-duration .dur-reset { margin: 0 0 0 auto; align-self: flex-start; margin-top: 18px; }
.fp-duration .dur-top .deck.top { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; }
.fp-duration .dur-top .deck.top .grp { padding-bottom: 0; }
.fp-duration .dur-top { padding: 14px 28px 0; }   /* the face's inset, as the picture's titles (D-63) */
.fp-duration .dur-top .deck-foot { display: none; }
.fp-duration .dur-reset { margin-top: 4px; }

.fp-duration .dur-follow { flex: none; margin: 4px 8px 0 auto; align-self: flex-start; margin-top: 18px; }
.fp-duration .dur-follow.on { color: var(--text); border-color: var(--dy-handle-rim, #8f78ff); background: color-mix(in srgb, var(--dy-handle-rim, #8f78ff) 14%, transparent); }
.fp-duration .dur-follow:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; }
.fp-duration .dur-follow[hidden] { display: none; }
.fp-duration .dur-top .dur-reset { margin-left: 0; }
.fp-duration .dur-top .deck.top { flex: 0 1 620px; }

/* the bar is the fall unit's: [hidden] must win over its display:flex, or it showed on Feel and Join with the fall's Reset */
.fp-duration .dur-top[hidden] { display: none; }
/* a phone: the bar's rulers take the width, and Follow Producer tempo and Reset wrap under them instead of off the edge */
@media (max-width: 699px) {
  .fp-duration .dur-top { flex-wrap: wrap; padding: 12px 14px 0; gap: 8px 10px; }
  .fp-duration .dur-top .deck.top { flex: 1 1 100%; min-width: 0; }
  .fp-duration .dur-follow, .fp-duration .dur-top .dur-reset { margin: 0; align-self: auto; }
}

/* J2 (join-design-2): the close-ups are zones; a grip is the first note's end */
.fp-duration .face svg .jcard { cursor: pointer; outline: none; }
.fp-duration .face svg .jcard:hover .jframe { stroke: var(--ae-walk-60); }
.fp-duration .face svg .jcard.on:hover .jframe { stroke: var(--face-sel); }
.fp-duration .face svg .jcard:focus-visible .jframe { stroke: var(--face-sel); stroke-width: 2.2; }
.fp-duration .face svg .jgrip { cursor: ew-resize; outline: none; }
.fp-duration .face svg .jgrip:focus-visible rect:last-child { stroke: var(--face-sel); stroke-width: 2.6; }
@media (pointer: coarse) { .fp-duration .face svg .jgrip { cursor: pointer; } }
/* the slide picture (How a join sounds): its grips drag on any pointer, so a finger on one never scrolls the page */
.fp-duration .face svg .jsound > .hit { cursor: pointer; outline: none; }
.fp-duration .face svg .jsound > .hit:hover { stroke: var(--ae-walk-60); }
.fp-duration .face svg .jsound > .hit:focus-visible { stroke: var(--face-sel); stroke-width: 2.2; }
.fp-duration .face svg .sgrip { cursor: ns-resize; outline: none; touch-action: none; }
.fp-duration .face svg .sgrip[data-sgrip="peak"] { cursor: ew-resize; }
.fp-duration .face svg .sgrip:focus-visible :is(rect:not(.hit), circle, line) { stroke: var(--face-sel); }

/* Phrasing, its own page (owner 2026-10-07): where a preset picker would be, a quiet word on where its settings save */
.fp-phrasing .fh-aside { font-size: 12.5px; color: var(--face-quiet); white-space: nowrap; }

/* D-63: Follow and Reset are one row of face buttons, top-aligned with the bar's group head */
.fp-duration .dur-top .dur-follow, .fp-duration .dur-top .dur-reset { margin-top: 14px; align-self: flex-start; }

/* D-63/D-64: the picture's own face buttons sit over it as HTML (the pager on Phrase's title row, the feel's two switches on
   Timing's), the same .fbtn every page uses; the key row is face.css's .face-key */
.fp-duration .dur-svg { position: relative; }
.fp-duration .dur-svg .ov { position: absolute; }
.fp-duration .dur-svg .fbtn.round { width: var(--face-btn-h); padding: 0; font-size: 15px; }
.fp-duration .dur-sws { display: flex; gap: 8px; }
.fp-duration .dur-sws .fbtn[aria-checked="true"] { color: var(--text); background: var(--surface2); }
.fp-duration .dur-svg .ov:is(button):focus-visible, .fp-duration .dur-sws .fbtn:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 3px; }