/* ─────────────────────────────────────────────────────────────────────────────
   pp-page.css: fits the preset player (pp.css, exactly as Claude Design handed
   it off, untouched) to the product pages. pp.css sizes its root for the design
   canvas (1280 / 390 wide, padded); here the page or the cinema scene owns the
   width, so the root only lays out what is inside it. pp.js picks the desktop or
   mobile layout from the player's OWN width, not the viewport's, because in the
   cinema the player lives in a scene column.
   ───────────────────────────────────────────────────────────────────────────── */
.pp.pp--desktop, .pp.pp--mobile { width: auto; padding: 0; }
.pp { background: transparent; }
.pp-app[hidden], .pp-minibar[hidden], .pp [hidden] { display: none !important; }

/* The section's own spacing comes from where the template puts it. */
.pp .pp-head { margin: 0 0 28px; }
.pp--mobile .pp-head { margin: 0 0 20px; }
/* .ln-scene-in h2 (lander.css) sizes every h2 and draws a rule under it. */
.pp .pp-title { font-size: 44px; line-height: 1.02; margin: 0; }
.pp--mobile .pp-title { font-size: 30px; }
.pp .pp-title::after { content: none; }

/* Just the player (the user, 2026-10-23): no head above it, a tighter panel,
   and the presets as ONE ROW OF CARDS under the transport instead of a list
   beside it, so the whole thing is on screen at once. The cards are the same
   .pp-row / .pp-ref buttons pp.js drives, laid out as cards. */
.pp--ink .pp-panel { padding: 28px 28px 24px; }
.pp--mobile.pp--ink .pp-panel { padding: 18px 14px 18px; }
.pp .pp-stage { gap: 16px; }
.pp .pp-now { min-height: 0; }
.pp .pp-wave { height: 104px; }
.pp--mobile .pp-wave { height: 84px; }
.pp .pp-cards { display: flex; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.pp .pp-cards > li { flex: 1 1 0; min-width: 0; }
.pp .pp-cards .pp-card {
  height: 100%; min-height: 78px; margin: 0; padding: 10px 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;
  border: 1px solid var(--pp-prule); border-radius: 2px; text-align: left;
}
.pp .pp-cards .pp-row-num { font-size: 11px; line-height: 12px; }
.pp .pp-cards .pp-row-name { font-size: 14px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.pp .pp-cards .pp-row-tags { font-size: 10px; line-height: 1.35; white-space: normal; }
.pp .pp-cards .pp-row.is-active { border-color: var(--pp-fill); }
.pp .pp-cards .pp-ref { border: 1px dashed var(--pp-pline); }
.pp .pp-cards .pp-ref.is-active { border-style: solid; border-color: var(--pp-accent); }
/* A phone: the row scrolls sideways, a card at a time. */
.pp--mobile .pp-cards { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.pp--mobile .pp-cards > li { flex: 0 0 132px; scroll-snap-align: start; }

/* The patch, in the mini dials: a patched knob's ring is dashed (a cable, not
   a setting) and it names its source under its label. */
.pp-mini-src { font-size: 9px; line-height: 11px; min-height: 11px; margin-top: -4px; color: var(--pp-pmuted); }
.pp-mini.is-cv .pp-mini-dial { border-style: dashed; }
.pp-patch em { font-style: normal; color: var(--pp-pfg); }

/* The faceplate tie-in: pp.js draws one ring per knob into the hero SVG and
   lights the ones the selected preset moved (in 200 ms, held 1.4 s, out 200 ms). */
.pp-hring { fill: none; stroke-width: 2; opacity: 0; transition: opacity 200ms linear; pointer-events: none; }
.pp-hring.on { opacity: 1; }

/* Mobile mini bar: pinned to the bottom of the viewport while audio plays and
   the player is out of view; slides 160 ms. */
.pp-minibar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; transform: translateY(100%); transition: transform 160ms linear; }
.pp-minibar.is-on { transform: none; }
.pp-minibar-link { color: inherit; text-decoration: none; min-width: 0; }

/* ── in the scroll cinema ────────────────────────────────────────────────────
   The presets scene: the plugin window steps back to the left, still in view,
   so its knobs can turn with the presets; the player takes a wider column. */
.ln-cine.sc-presets .ln-stage-in { --x: -25vw; --s: .62; }
.ln-scene[data-scene="presets"] .ln-scene-in { width: min(720px, 52vw); }
@media (max-width: 1280px) {
  .ln-scene[data-scene="presets"] .ln-scene-in { width: auto; }
}

/* ── the rack player (tangle.html) ───────────────────────────────────────────
   Whole racks for presets (preset-player.js rackPlayer): the rack that is
   playing is drawn beside its name, where a module's mini dials sit (pp.js,
   from its patch), and the cards wrap into two rows, since eight to ten don't
   fit in one. Still all on one screen. A phone stacks the drawing under the
   name and keeps the sideways row. */
.pp--rack .pp-now { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.pp--rack .pp-rack { height: 150px; display: flex; align-items: center; justify-content: flex-end; }
.pp--rack .pp-rack svg { display: block; width: 100%; height: 100%; }
.pp--mobile.pp--rack .pp-now { grid-template-columns: minmax(0, 1fr); }
.pp--mobile.pp--rack .pp-rack { height: 110px; justify-content: center; }
.pp--rack .pp-wave { height: 84px; }
.pp--rack .pp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.pp--mobile.pp--rack .pp-cards { display: flex; }
/* the chain on a card: two lines at most (the drawing and the now-playing line
   carry all of it), so ten cards stay two rows of a sensible height */
.pp--rack .pp-cards .pp-row-tags {
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* Its scene in tangle.html's cinema: the live rack steps back to the left and
   the player takes a wide column on the right. */
.tg-cine.sc-presets .tg-stage-in { --x: -24vw; --s: .5; }
.tg-scene[data-scene="presets"] .tg-scene-in { width: min(780px, 56vw); }
.tgm-sec#presets .pp { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pp-hring, .pp-minibar { transition: none; }
}