/* The production pieces. Colours, sizes and shapes come from /style.css; only their own layout lives here. */

/* strings: the mixer */
.p-strings { display: flex; flex-direction: column; }
.p-row { display: grid; grid-template-columns: 188px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--line); transition: opacity .3s var(--ease); }
.p-row:first-child { border-top: 1px solid var(--line); }
.p-label { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 4px; height: 64px; border-radius: 12px; outline: none; }
.p-label:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.p-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s, opacity .2s; }
.p-icon:hover { background: var(--hover); border-color: var(--ink-3); }
.p-icon .glyph { width: 18px; height: 10px; }
.p-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-name { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sub { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.p-pct { font: 500 11.5px/1 var(--f-small); font-variant-numeric: tabular-nums; color: var(--ink-3); flex: none; }
.p-about { font-size: 12px; line-height: 1.1; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row { animation: rise .6s var(--ease) backwards; animation-delay: calc(.2s + var(--i, 0) * 45ms); }
.p-row.child .p-label { height: 52px; padding-left: 26px; }
.p-row.child .p-string { height: 52px; }
.p-row.child .p-icon { width: 28px; height: 28px; }
.p-row.child .p-name { font-size: 13.5px; }
.p-row.lit { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.p-string { display: block; width: 100%; height: 64px; cursor: ns-resize; touch-action: none; }
.p-row.off .p-icon { opacity: .55; }
.p-row.off .p-icon .glyph { background: var(--ink-3); }
.p-row.off .p-name { color: var(--ink-3); }
.p-row.dim { opacity: .45; }
.p-row.solo .p-name::after { content: "alone"; margin-left: 8px; font: 500 10.5px/1 var(--f-small); letter-spacing: .06em; color: var(--ink-2); padding: 3px 7px; border: 1px solid var(--line-2); border-radius: var(--r-pill); vertical-align: 2px; }


/* streams, fingerprint: pictures over time with a tip that follows the pointer */
.p-streams, .p-fingerprint { position: relative; }
.p-streams canvas, .p-fingerprint canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: none; border-radius: 14px; }
.p-streams canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.p-tip { position: absolute; top: -30px; transform: translateX(-50%); padding: 5px 9px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font: 500 11.5px/1 var(--f-small); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; z-index: 2; }
.p-fingerprint { background: color-mix(in srgb, var(--paper) 55%, var(--sheet)); border-radius: 14px; }
.p-axis span { position: absolute; left: 10px; transform: translateY(50%); font: 500 10px/1 var(--f-small); color: var(--ink-3); pointer-events: none; }
.p-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 13px; }

/* the record */
.p-record { position: relative; display: flex; justify-content: center; }
.p-record canvas { display: block; aspect-ratio: 1.16; max-width: 100%; filter: drop-shadow(0 22px 26px var(--shade)); }
.p-record .p-tip { top: 0; }

/* splitting */
.p-splitting canvas { display: block; width: 100%; }
.p-split-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.p-step { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-small); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.p-splitting.done .pulse { animation: none; }

/* now: the overview, live */
.p-live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.p-now-stage, .p-pitch-stage { position: relative; }
.p-now canvas { display: block; width: 100%; cursor: grab; touch-action: pan-y; }
.p-now canvas:active { cursor: grabbing; }
.p-now canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.p-now .p-tip { top: 8px; }
.p-now:not(.live) .pulse { animation: none; opacity: .4; }

/* pitch: every pitch, live */
.p-pitch canvas { display: block; width: 100%; }
.p-pitch-axis { position: relative; height: 12px; margin-top: 12px; }
.p-pitch-axis span { position: absolute; top: 0; transform: translateX(-50%); font: 500 10px/1 var(--f-small); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 620px) {
  .p-row { grid-template-columns: 150px minmax(0, 1fr); }
  .p-label { gap: 8px; height: 58px; }
  .p-string { height: 58px; }
  .p-icon { width: 30px; height: 30px; }
  .p-about { display: none; }
  .p-row.child .p-label { height: 50px; padding-left: 14px; }
  .p-row.child .p-string { height: 50px; }
}