/* Compose · Sequence & Surprise · the instrument face: the page's own pieces (FACE §2a). The kit is face.css. */

/* (the key is the kit's .face-key row under the picture, D-64) */
.fp-sequence .face-legend .s { color: var(--surp); }

/* the deck's foot names the pages where a surprise kind is switched on: quiet links, as the head's */
.fp-sequence .deck-note .deck-go { font: inherit; color: var(--text2); background: none; border: 0; border-bottom: 1px solid var(--border2); padding: 0; cursor: pointer; position: relative; }
.fp-sequence .deck-note .deck-go:hover { color: var(--text); border-bottom-color: var(--text2); }
.fp-sequence .deck-note .deck-go:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; border-radius: 2px; }
@media (pointer: coarse), (max-width: 699px) {
  .fp-sequence .deck-note .deck-go::after { content: ""; position: absolute; inset: -14px 0; }   /* 44 px hit, no layout change */
}

/* the lanes (owner sketch, 2026-10-08, D-58): a version of a motif is a colour and a thread. The original keeps the mover's
   cool white; later versions take house data hues in turn, none of them blue (a surprise) or amber (selected). */
.fp-sequence {
  --seq-v0: var(--ae-walk);
  --seq-v1: var(--spc);
  --seq-v2: var(--eff);
  --seq-v3: var(--bodyc);
  --seq-v4: var(--acc);
  --seq-v5: var(--smp);
  --seq-lane: color-mix(in srgb, var(--text) 2.5%, transparent);
}

/* the block card (owner, 2026-10-08): a click on a block says what it is and how much of it varies */
.fp-sequence .seq-card { position: absolute; z-index: 3; width: max-content; max-width: min(300px, calc(100% - 16px)); padding: 10px 12px 11px;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text2); font-size: 12.5px; line-height: 1.45; }
.fp-sequence .seq-card p { margin: 6px 0 0; }
.fp-sequence .seq-card b { color: var(--text); font-weight: 600; }
.fp-sequence .seq-card-h { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 13px; }
.fp-sequence .seq-card-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fp-sequence .seq-card-x { margin-left: auto; font: inherit; font-size: 16px; line-height: 1; color: var(--text2); background: none; border: 0; padding: 0 2px; cursor: pointer; }
.fp-sequence .seq-card-x:hover { color: var(--text); }
.fp-sequence .seq-card-x:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; border-radius: 2px; }
.fp-sequence .seq-card-m { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.fp-sequence .seq-card-m b { font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.fp-sequence .seq-card-bar { flex: 1; min-width: 90px; height: 5px; border-radius: 3px; background: var(--ae-hair2); overflow: hidden; }
.fp-sequence .seq-card-bar i { display: block; height: 100%; border-radius: 3px; }
.fp-sequence .seq-card-q { margin-top: 2px !important; font-size: 11.5px; color: var(--face-quiet); }
.fp-sequence .seq-card-s .s { color: var(--surp); }
.fp-sequence .face-pic svg { cursor: default; }