/* ============================================================
   the_platform.css — "the platform." v2 (docs/platform/)
   The interactive life-of-a-record page. Layout + the .pfd-* demo
   components (curated static snapshots of real app surfaces, see
   docs/platform/README.md §6). Token-only; behavior in
   js/the_platform.js; every animation gated on reduced-motion.
   ============================================================ */

/* ---------------- CHAPTERS (shared section scaffolding) ---------------- */
.pf-chapter {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.pf-chapter__head {
  max-width: 52rem;
  margin-bottom: var(--space-9);
}
.pf-chapter__head .dd-kicker { margin-bottom: var(--space-4); }
.pf-chapter__head .section-title { margin-bottom: var(--space-4); }
.pf-chapter__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Copy | demo two-column chapters. */
.pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-10);
  align-items: start;
}
.pf-grid--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.pf-copy .dd-kicker { margin-bottom: var(--space-4); }
.pf-copy .section-title { margin-bottom: var(--space-4); }

.pf-points {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.pf-points li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.pf-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.pf-try {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--coral-800);
}

/* Honesty captions — the snapshot / released-audio disclosures. */
.pf-honesty {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* ---------------- THE THREAD — two record cards ---------------- */
.pf-thread-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
.pf-thread-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
}
.pf-thread-card__cover {
  width: var(--space-14);
  height: var(--space-14);
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.pf-thread-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: var(--space-4) 0 var(--space-2);
}
.pf-thread-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-soft);
  margin-bottom: var(--space-3);
}
.pf-thread-card p:last-child {
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* ---------------- DEMO CARD SHELL ---------------- */
/* Demos toggle state via the `hidden` attribute; several demo elements set
   their own display, which would otherwise defeat it. */
.pfd-card [hidden] { display: none !important; }

/* The demo controls are the kit's buttons, the same ones the dashboard they
   are demonstrating now uses (#243) — there is nothing left to restyle here. */

.pfd-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
}
.pfd-tape {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: var(--space-6);
  padding: var(--space-1) var(--space-3);
  background: var(--grad-coral);
  color: var(--text-on-coral);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  box-shadow: var(--shadow-sm);
}
.pfd-mini-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--coral-800);
  margin-bottom: var(--space-2);
}
.pfd-block-title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-soft);
  margin: var(--space-5) 0 var(--space-3);
}
.pfd-hint {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

/* Status badges — mirror the app's status-badge tones via the shared
   functional status tokens. */
.pfd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  white-space: nowrap;
}
.pfd-badge[data-tone="in-progress"] { color: var(--status-in-progress); background: color-mix(in srgb, var(--status-in-progress) 12%, var(--paper)); }
.pfd-badge[data-tone="completed"]   { color: var(--status-completed);   background: color-mix(in srgb, var(--status-completed) 12%, var(--paper)); }
.pfd-badge[data-tone="booked"]      { color: var(--status-booked);      background: color-mix(in srgb, var(--status-booked) 12%, var(--paper)); }
.pfd-badge[data-tone="backlog"]     { color: var(--status-backlog);     background: color-mix(in srgb, var(--status-backlog) 14%, var(--paper)); }

/* ---------------- CH 01 · start it. — the feature deck ----------------
   Four features, four slides, each drawn as the surface it really is. The
   panels borrow the hub's own geometry (a section header, a row per thing, a
   badge on the right) rather than a prettier abstraction of it, because the
   whole point of the chapter is that this *is* the thing you get. */
.pfd-hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.pfd-hub-title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: normal;
  line-height: var(--lh-tight);
  margin: 0;
}
.pfd-hub-artist { color: var(--text-muted); }

.pfd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.pfd-chip:hover { border-color: var(--coral-200); box-shadow: var(--shadow-sm); }

/* The deck: tabs, one visible slide, a caption that says what just happened. */
.pfd-deck { position: relative; }
.pfd-deck-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.pfd-deck-tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-small);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.pfd-deck-tab:hover { border-color: var(--coral-200); }
.pfd-deck-tab.is-active {
  background: var(--grad-coral);
  border-color: var(--accent-strong);
  color: var(--text-on-coral);
}
.pfd-deck-tab-n {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  opacity: 0.7;
}


.pfd-slide-caption {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-soft);
}
.pfd-deck-foot { margin-top: var(--space-4); }

/* A panel is one section of the hub, quoted. */
.pfd-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-5);
}
.pfd-panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pfd-panel-head .pfd-block-title { margin: 0; }
/* Every panel says which surface it is before it says anything else — the
   chapter shows a project hub and two different song hubs, and without this
   they are three white cards (owner, 2026-09-07). */
.pfd-panel-what {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--coral-600);
  padding: 0 var(--space-2);
  border: 1px solid var(--coral-200);
  border-radius: var(--radius-pill);
}
.pfd-panel[data-panel="project"] { border-left: 3px solid var(--coral-200); }
.pfd-panel[data-panel="song"] { border-left: 3px solid var(--border); }
.pfd-panel-song {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-panel-pill {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-soft);
}
.pfd-panel-empty {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* 01 · the tracklist, and the hub's own progress hint on each row.
   Three shapes, from `.song-progress` in projects.css: a pulsing coral dot for
   what is happening now (present tense), a green ✓ for what is done (past
   tense), a muted square for what is booked. A hintless song keeps its row
   height rather than closing the gap (#66). */
.pfd-tracklist { list-style: none; margin: 0; padding: 0; }
.pfd-track {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.pfd-track:last-child { border-bottom: 0; }
.pfd-track-n {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  min-width: 1.2em;
}
.pfd-track-body { display: grid; gap: var(--space-1); }
.pfd-track-title { font-size: var(--fs-small); font-weight: 600; }

.pfd-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  cursor: pointer;
}
/* The row's `data-state` is the single source for all three of these — the
   colour of the type, which shape is drawn, and (through the JS that reads the
   same attribute) the word itself. Nothing here can disagree with the label
   beside it, which is what the three-spans-and-a-guess version managed to do. */
.pfd-progress[data-state="booked"]      { color: var(--text-muted); }
.pfd-progress[data-state="in_progress"] { color: var(--coral-700); }
.pfd-progress[data-state="completed"]   { color: var(--success); }

.pfd-progress-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
}
.pfd-progress-mark > * { display: none; }
.pfd-progress[data-state="booked"] .pfd-progress-square,
.pfd-progress[data-state="in_progress"] .pfd-progress-dot,
.pfd-progress[data-state="completed"] .pfd-progress-check { display: block; }

.pfd-progress-square {
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.12em;
  background: currentColor;
}
.pfd-progress-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
}
.pfd-progress-check { width: 1em; height: 1em; }
.pfd-progress--placeholder { visibility: hidden; }
/* The words that drive the chip, and never a surface of their own. */
.pfd-ladder { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* the hub's own breath — alive, not an alert */
  .pfd-progress-dot { animation: pfd-breathe 3.2s ease-in-out infinite; }
  /* a step down the pipeline is a change of state, so it lands rather than
     cross-fades — the same pop every other new thing on this page gets. */
  .pfd-progress.is-new { animation: pfd-pop var(--dur-base) var(--ease-dreamy); }
}
@keyframes pfd-breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.94); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* 02/03/04 · a task row, the way the hub draws one. */
.pfd-task-rows { display: grid; gap: var(--space-1); }
.pfd-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-sm);
}
/* `display: flex` beats the [hidden] attribute's UA rule, so the guard has to
   sit beside it or a hidden row keeps painting (conventions.md §3). */
.pfd-row[hidden] { display: none; }
.pfd-row.is-leaving {
  opacity: 0;
  transform: translateX(var(--space-5));
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}
.pfd-done-drawer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.pfd-done-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-done-summary::-webkit-details-marker { display: none; }
.pfd-done-count {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
}
.pfd-done-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
/* Same rule as .pfd-row above: a `display` of its own beats [hidden]. */
.pfd-done-row[hidden] { display: none; }
.pfd-done-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.pfd-done-row span:first-child { text-decoration: line-through; }
.pfd-done-row .pfd-row-chip { margin-left: auto; }
.pfd-row-title { font-size: var(--fs-small); }
.pfd-row.is-done .pfd-row-title { text-decoration: line-through; color: var(--text-muted); }
.pfd-row-chip {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.pfd-row-check,
.pfd-row-star,
.pfd-resolve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.pfd-row-star svg, .pfd-resolve svg { width: 60%; height: 60%; }
.pfd-row-check::after {
  content: "";
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(0.05em, -0.05em);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.pfd-row-check.is-checked,
.pfd-resolve[aria-pressed="true"] {
  color: var(--text-on-coral);
  background: var(--status-completed);
  border-color: var(--status-completed);
}
.pfd-row-check.is-checked::after { opacity: 1; }
.pfd-row-star { margin-left: var(--space-2); }
.pfd-row-star.is-starred {
  color: var(--coral-600);
  border-color: var(--coral-200);
  background: var(--coral-50);
}
.pfd-row-star.is-starred svg { fill: currentColor; }
/* A locked row is a report, not a wall: it stays pressable and answers. */
.pfd-row.is-locked { opacity: 0.65; }
.pfd-row.is-locked .pfd-row-check { cursor: not-allowed; }

/* The add form, same three fields the panel has. */
.pfd-add-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pfd-add-input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text);
}
.pfd-add-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-soft);
}
/* The demo focuses the input itself, and Chromium counts that as focus-visible
   — so without this the brand's own ring is a browser-blue one. */
.pfd-add-input:focus,
.pfd-add-select:focus { outline: none; border-color: var(--coral-200); }
.pfd-add-input:focus-visible,
.pfd-add-select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* 03 · starred — the song's list beside the project's roll-up. */
.pfd-starred-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.pfd-panel--starred { background: var(--surface-tint); }
/* One group per song, and the space between two of them is what says so —
   without it the second song's name reads as a line tacked onto the first
   group rather than as another song (owner, 2026-09-08). */
.pfd-starred-groups { display: grid; gap: var(--space-6); }
.pfd-starred-group { display: grid; gap: var(--space-2); }
.pfd-starred-song {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--coral-600);
}
.pfd-starred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pfd-starred-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
}
.pfd-starred-item .pfd-row-chip { margin-left: auto; }

/* 04 · passes — a stage, and the one below it waiting its turn. */
.pfd-stage {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  transition: opacity var(--dur-base) var(--ease-soft);
}
.pfd-stage.is-blocked { opacity: 0.75; }
.pfd-stage.is-leaving { opacity: 0; }
.pfd-stage-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.pfd-stage-name { font-size: var(--fs-small); font-weight: 600; }
.pfd-stage-count { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-muted); }
.pfd-stage-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-stage-lock svg { width: 0.9em; height: 0.9em; }
.pfd-stage-head .pfd-badge { margin-left: auto; }
.pfd-stage-head .dd-btn { margin-left: var(--space-2); }

/* The hand. Decoration only — every control it presses is pressable by a
   person, and the demo never says anything the caption does not. */
.pfd-pointer {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-strong) 22%, transparent);
  pointer-events: none;
  z-index: 2;
  transition: left var(--dur-slow) var(--ease-dreamy), top var(--dur-slow) var(--ease-dreamy), transform var(--dur-fast) var(--ease-soft);
}
.pfd-pointer.is-pressing { transform: scale(0.6); }

@media (prefers-reduced-motion: no-preference) {
  .pfd-row.is-new,
  .pfd-done-row.is-new,
  .pfd-starred-item.is-new { animation: pfd-pop var(--dur-slow) var(--ease-dreamy); }
  .pfd-panel-pill b.is-new { animation: pfd-pop var(--dur-slow) var(--ease-dreamy); }
  .pfd-stage-lock.is-new { animation: pfd-pop var(--dur-slow) var(--ease-dreamy); }
  .pfd-row.is-refused { animation: pfd-refuse var(--dur-slow) var(--ease-soft); }
}
@keyframes pfd-refuse {
  0%, 100% { transform: none; }
  20% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}
@keyframes pfd-pop {
  from { opacity: 0; transform: translateY(var(--space-2)) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- CH 02 · write it. ---------------- */
.pf-write-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

.pfd-lyrics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.pfd-lyrics-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}
.pfd-save-status {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-save-status.is-saving { color: var(--attention); }
.pfd-version {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--coral-800);
  background: var(--coral-50);
  border: 1px solid var(--coral-100);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
}
@media (prefers-reduced-motion: no-preference) {
  .pfd-version.is-bumped,
  .pfd-badge.is-bumped { animation: pfd-pop var(--dur-slow) var(--ease-dreamy); }
}

.pfd-textarea {
  width: 100%;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text);
  resize: vertical;
}
.pfd-textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pfd-textarea--dump {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}
/* The studio's quiet pill (`dd-btn--quiet`, #301); only its place is ours. */
.pfd-bardump-toggle { margin-top: var(--space-3); }

/* A demo card's meta line — the version chip, the round's mix, the splits
   example figure. Was .pfd-attune-meta until attune. came off the page. */
.pfd-card-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  flex: none;
}
.pfd-card-meta b { color: var(--text); font-weight: 600; }
/* An inline box cannot be scaled, and the version chip's whole job when it
   moves is to be seen moving. */
.pfd-card-meta [data-lyrics-version] { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .pfd-card-meta b.is-new,
  .pfd-mailbox-count b.is-new,
  .pfd-spec [data-spec].is-new { animation: pfd-pop var(--dur-slow) var(--ease-dreamy); }
  /* A kept version is the one thing on that panel you press for, so the number
     answers rather than quietly incrementing: it lifts and flashes coral, then
     settles back into the meta line. */
  [data-lyrics-version].is-saved { animation: pfd-kept var(--dur-page) var(--ease-dreamy); }
}
@keyframes pfd-kept {
  0%   { transform: scale(1);    color: var(--text-muted); }
  35%  { transform: scale(1.35); color: var(--coral-700); }
  100% { transform: scale(1);    color: var(--text-muted); }
}

.pfd-approve-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-note-toggle {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--link);
  cursor: pointer;
}
.pfd-note-toggle:hover { color: var(--link-hover); }
.pfd-note-body {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--surface-tint);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-soft);
}
.pfd-note-body[hidden] { display: none; }

/* ---------------- CH 02 · write it. — synced lyrics ----------------
   The follow-along, in miniature. One element per line and .is-playing on the
   current one, exactly as songs/lyrics_follow.js drives the real surfaces
   (docs/lyrics/README.md §6). The block is its own scroller: the words scroll,
   and only the words. */
.pf-sync-intro {
  max-width: 46rem;
  margin: var(--space-9) 0 var(--space-6);
}
.pf-subheading {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
}
.pf-sync-intro p { color: var(--text-soft); line-height: var(--lh-body); margin: 0 0 var(--space-3); }

.pfd-sync-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.pfd-sync-clock {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--coral-800);
  background: var(--coral-50);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
}
.pfd-sync-lines {
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  scrollbar-width: thin;
}
.pfd-sync-line {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.pfd-sync-line:last-child { margin-bottom: 0; }
.pfd-sync-line:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* The lit line is state, not decoration — it stays under reduced motion. */
.pfd-sync-line.is-playing {
  color: var(--text);
  font-weight: 600;
  background: var(--coral-50);
}

/* ---------------- CH 03 · record it. — command center ---------------- */
.pfd-session-block { display: grid; gap: var(--space-4); justify-items: start; }
.pfd-timer {
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pfd-session-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pfd-chip--action { background: var(--surface); }
.pfd-chip--action:hover { background: var(--surface-tint); }
.pfd-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  width: 100%;
}
.pfd-timeline li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-soft);
  border-left: 2px solid var(--coral-200);
  padding-left: var(--space-3);
}
.pfd-timeline time {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .pfd-timeline li.is-new { animation: pfd-pop var(--dur-base) var(--ease-dreamy); }
}
.pfd-actuals {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
}
.pfd-actuals-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.pfd-actuals-value { font-size: var(--fs-small); color: var(--text); }

/* ---------------- CH 04 · shape it. — revision viewer ---------------- */
.pfd-rev-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.pfd-rev-nav { display: flex; align-items: center; gap: var(--space-3); }
.pfd-rev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.pfd-rev-btn:hover:not(:disabled) { border-color: var(--coral-200); box-shadow: var(--shadow-sm); }
.pfd-rev-btn:disabled { opacity: 0.35; cursor: default; }
.pfd-rev-btn svg { width: 55%; height: 55%; }
.pfd-rev-counter {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-soft);
}
.pfd-rev-song {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.pfd-rev-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pfd-rev-head .pfd-mini-kicker { margin-bottom: 0; }
.pfd-rev-version {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.pfd-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pfd-item-body { display: grid; gap: var(--space-1); min-width: 0; }
.pfd-item-track { font-size: var(--fs-small); font-weight: 600; }
.pfd-item-ts {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: normal;
  color: var(--coral-800);
  background: var(--coral-50);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
}
.pfd-item-notes { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-snug); }
/* A spoken note carries no words, so it says its length instead — the same
   shape the studio's own email uses, `voice note · 1:07` (#226). */
.pfd-item-voice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--coral-200);
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-soft);
}
.pfd-item .pfd-badge { margin-left: auto; flex: none; }
.pfd-items--past .pfd-item { opacity: 0.75; background: var(--surface); }
/* The one note still open: it is what the chapter asks you to press, so it
   reads as available rather than as another settled row. */
.pfd-item--open {
  background: var(--surface);
  border-color: var(--accent-strong);
  /* The row grows when the draft opens; the badge and the ✓ belong beside the
     note, not floating at the midpoint of a three-line field. */
  align-items: flex-start;
}
.pfd-item-draft {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}
.pfd-item-draft .pfd-textarea { font-family: var(--font-body); font-size: var(--fs-small); }

.pfd-item-resolution {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--border);
}
.pfd-item-resolution-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-soft);
}
.pfd-item-resolution p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.pfd-more {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
}
/* The revision viewer's player is the browser's, because the surface it quotes
   is too (`_job_feedback_section.html` renders a plain `<audio controls>`).
   `.revision-player`'s own box: full width, with a gap either side. It lost both
   when the lyrics-studio transport landed beside it (2026-09-08). */
.pfd-audio {
  width: 100%;
  margin: var(--space-5) 0;
}

/* ---- the studio's transport, in miniature ----
   `.song-player-inner` from projects.css, rebuilt on tokens: a round coral play
   button, then elapsed · seek · length. The element itself never shows — the
   browser's own controls are the one thing on this page that looks like
   somebody else's product (owner, 2026-09-08). */
.pfd-player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* The real transport lives in a hub panel, not across a marketing page —
     at full width the seek bar stops reading as a player's. */
  max-width: 34rem;
  margin: var(--space-5) 0 var(--space-2);
}
.pfd-player-audio { display: none; }
.pfd-player-play {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid var(--coral-200);
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft);
}
.pfd-player-play:hover { background: var(--coral-100); }
.pfd-player-glyph { width: 14px; height: 14px; }
.pfd-player-glyph--pause { display: none; }
.pfd-player[data-playing] .pfd-player-glyph--play { display: none; }
.pfd-player[data-playing] .pfd-player-glyph--pause { display: block; }
.pfd-player-transport {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.pfd-player-time,
.pfd-player-window {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pfd-player-window {
  padding: 0 var(--space-2);
  border: 1px solid var(--coral-200);
  border-radius: var(--radius-pill);
  color: var(--coral-800);
}
.pfd-player-seek {
  flex: 1;
  min-width: 0;
  height: 4px;
  cursor: pointer;
  accent-color: var(--accent-strong);
}
.pfd-player-seek:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
@media (max-width: 520px) {
  .pfd-player { flex-wrap: wrap; }
  .pfd-player-transport { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .pfd-player-play { transition: none; }
}

/* ---------------- CH 05 · share it. — split panel ---------------- */
.pfd-share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.pfd-share-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.pfd-share-hub-head .pfd-block-title { margin: 0; }
.pfd-share-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.pfd-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}
.pfd-share-row strong { display: block; font-size: var(--fs-small); }
.pfd-share-row span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-share-actions { display: flex; gap: var(--space-2); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .pfd-share-row.is-new { animation: pfd-pop var(--dur-slow) var(--ease-dreamy); }
  .pfd-share-row.is-leaving { opacity: 0; transform: translateX(var(--space-3)); }
}
.pfd-share-empty {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Visitor frame — a tiny browser holding the release page. */
.pfd-visitor {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: var(--shadow-sm);
}
.pfd-visitor-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-tint);
  border-bottom: 1px solid var(--border);
}
.pfd-visitor-chrome i {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--coral-200);
}
.pfd-visitor-url {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pfd-visitor-page { padding: 0 0 var(--space-5); }
.pfd-preview-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--attention) 10%, var(--paper));
  color: var(--attention);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}
@media (prefers-reduced-motion: no-preference) {
  .pfd-preview-strip {
    transition: transform var(--dur-page) var(--ease-dreamy), opacity var(--dur-page) var(--ease-dreamy);
  }
}
.pfd-preview-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .pfd-preview-dot { animation: pfd-pulse 1.6s var(--ease-soft) infinite; }
}
.pfd-visitor-cover {
  margin: var(--space-5) var(--space-5) var(--space-4);
  aspect-ratio: 1;
  max-width: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--grad-dreamy);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.pfd-visitor-title {
  margin: 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-small);
}
.pfd-visitor-title span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.pfd-visitor-tracks {
  list-style: none;
  margin: var(--space-4) var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
/* What a song-scoped link opens: one song, its transport, and where it sits on
   the record. Static — the record is unreleased, so nothing here plays. */
.pfd-visitor-player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) var(--space-5) 0;
}
.pfd-visitor-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--coral-200);
  background: var(--surface-tint);
  color: var(--text-soft);
}
.pfd-visitor-play .dd-icon { width: 11px; height: 11px; }
.pfd-visitor-bar {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--coral-100);
}
.pfd-visitor-bar i {
  display: block;
  width: 28%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
}
.pfd-visitor-len,
.pfd-visitor-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-visitor-meta { margin: var(--space-4) var(--space-5) 0; }
.pfd-visitor-404 {
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--text-muted);
}
.pfd-404-code {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--coral-200);
  margin-bottom: var(--space-2);
}

/* ---------------- CH 06 · release it. ---------------- */
.pfd-release .pfd-visitor-page { padding-bottom: var(--space-5); }
.pfd-publish-btn {
  margin-left: auto;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--grad-coral);
  color: var(--text-on-coral);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--space-5);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.pfd-preview-strip.is-away {
  transform: translateY(-100%);
  opacity: 0;
}
.pfd-release-cover {
  display: block;
  width: 55%;
  height: auto;
  margin: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.pfd-streaming {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) var(--space-5) 0;
}
.pfd-streaming a {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--coral-200);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--link);
  text-decoration: none;
}
.pfd-streaming a:hover { color: var(--link-hover); border-color: var(--coral-300); }
@media (prefers-reduced-motion: no-preference) {
  /* Long enough to be watched rather than caught, and the three land one after
     another rather than together (owner, 2026-09-08). */
  .pfd-streaming a { opacity: 0; transform: translateY(var(--space-2)); }
  .pfd-streaming.is-in a {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-page) var(--ease-dreamy), transform var(--dur-page) var(--ease-dreamy);
  }
  .pfd-streaming.is-in a:nth-child(2) { transition-delay: 220ms; }
  .pfd-streaming.is-in a:nth-child(3) { transition-delay: 440ms; }
}
.pfd-release-credits { margin: var(--space-4) var(--space-5) 0; }
.pfd-release-credits .pfd-block-title { margin-top: 0; }
.pfd-release-credits ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
@media (prefers-reduced-motion: no-preference) {
  .pfd-release-credits.is-in { animation: pfd-pop var(--dur-page) var(--ease-dreamy); }
  /* The songs' credits stepping back so the album's can arrive over them —
     the beat the flourish used to hide. */
  .pfd-song-credits { transition: opacity var(--dur-page) var(--ease-soft); }
}
.pfd-release-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.pfd-release-live {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--link);
}
.pfd-release-live:hover { color: var(--link-hover); }

/* ---------------- aura. — full-bleed stage ---------------- */

/* ---------------- busywork — mini inbox ----------------
   The chapter is about email, and the demo has to say so before it is read
   (owner, 2026-09-08). So this is a mail client's furniture and nothing else
   on the page has any of it: a mailbox frame with a name and an unread count
   on a tinted bar, rows divided by hairlines rather than floating as cards,
   an unread dot down the left, and the fields an email carries — from, to,
   subject, first line — laid out the way a client lays them out. */
.pfd-mailbox {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.pfd-mailbox-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-tint);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-soft);
}
.pfd-mailbox-icon { width: 14px; height: 14px; color: var(--coral-700); }
.pfd-mailbox-count { margin-left: auto; color: var(--text-muted); }
.pfd-mailbox-count b { color: var(--coral-800); font-weight: normal; }

.pfd-inbox { list-style: none; margin: 0; padding: 0; }
.pfd-mail {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.pfd-mail:last-child { border-bottom: 0; }
/* Unread, the way every inbox says it. */
.pfd-mail-dot {
  grid-row: 1 / span 4;
  align-self: center;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
}
.pfd-mail-from,
.pfd-mail-to,
.pfd-mail-when {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-mail-from { grid-column: 2; color: var(--text-soft); }
.pfd-mail-when { grid-column: 3; font-variant-numeric: tabular-nums; }
.pfd-mail-to {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pfd-mail-subject {
  grid-column: 2 / -1;
  margin-top: var(--space-1);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--text);
}
.pfd-mail-preview {
  grid-column: 2 / -1;
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
@media (prefers-reduced-motion: no-preference) {
  [data-pf-demo="inbox"] .pfd-mail {
    opacity: 0;
    transform: translateY(var(--space-3));
    transition: opacity var(--dur-slow) var(--ease-dreamy), transform var(--dur-slow) var(--ease-dreamy);
  }
  [data-pf-demo="inbox"] .pfd-mail.is-in { opacity: 1; transform: none; }
}
.pfd-inbox-foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
/* ---------------- CH 07 · split it. — the two pies ----------------
   The hub's splits tool in miniature (#48 Phase 3). The tab pills are the
   people-tab component; only the rows below are new. */
.pfd-split-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.pfd-split-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.pfd-split-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pfd-split-who { display: grid; gap: var(--space-1); min-width: 0; }
.pfd-split-who strong { font-size: var(--fs-small); }
.pfd-split-who span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-split-stepper {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}
.pfd-split-stepper b {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  min-width: 3ch;
  text-align: right;
}
.pfd-step {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.pfd-step:hover { background: var(--surface-tint); color: var(--text); }
.pfd-step:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pfd-split-take {
  flex: none;
  min-width: 5ch;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--coral-800);
}
.pfd-split-total {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-soft);
}
/* A pie that does not add to 100 is the tool's whole teaching moment, so it
   is said out loud rather than silently corrected. */
.pfd-split-total[data-tone="off"] { color: var(--status-backlog); }
.pfd-split-note {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* ---------------- bring your people. — role tabs ---------------- */
.pfd-people-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.pfd-people-tab {
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.pfd-people-tab.is-active {
  background: var(--grad-coral);
  border-color: var(--accent-strong);
  color: var(--text-on-coral);
}
.pfd-people-panel .pf-points { margin-top: 0; }

/* ---------------- FAQ ---------------- */
.platform-faq__head {
  max-width: 46rem;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.platform-faq__head .section-title { margin-bottom: var(--space-4); }
.platform-faq__list {
  max-width: 48rem;
  margin: 0 auto;
}

/* ---------------- the short version — the landing, and the argument ----------
   The tour's landing, and the only section on the page that argues rather than
   demonstrates — so it is drawn as one: two columns, a row per pair, and an
   arrow that carries the direction without a label on every line. The arrow is
   also what keeps the pairs legible once the columns stack: it turns to point
   down, and the row is still one thought going one way.

   It was two sections until 2026-09-08 — a twelve-line list of what you get, and
   then this — which made the same argument twice at the point where somebody has
   already read eleven chapters. */
.pf-versus-head,
.pf-versus-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.pf-versus-head {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
/* The head's second label belongs over the right-hand column, and the arrow
   column between them has no label of its own. */
.pf-versus-head span:last-child { grid-column: 3; color: var(--coral-800); }
.pf-versus {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.pf-versus-row {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.pf-versus-was { color: var(--text-muted); }
.pf-versus-now { color: var(--text); }
.pf-versus-arrow {
  color: var(--accent-strong);
  font-family: var(--font-mono);
}
.pf-versus-close {
  max-width: 46rem;
  margin: var(--space-7) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-soft);
}
@media (max-width: 768px) {
  /* The columns stack, so the head stops being two headings over two columns
     and becomes the one line it was always saying. It stays rather than being
     hidden — the arrow tells you the direction, the labels tell you what the
     two sides are. */
  .pf-versus-head { display: flex; gap: var(--space-2); }
  .pf-versus-head span:first-child::after { content: " →"; color: var(--accent-strong); }
  .pf-versus-head span:last-child { grid-column: auto; }
  .pf-versus-row {
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
  }
  .pf-versus-was { grid-column: 1 / -1; }
  .pf-versus-arrow { transform: rotate(90deg); }
}

/* ---------------- CLOSING CTA ---------------- */
.platform-cta__inner {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.platform-cta__inner .section-title { margin-bottom: var(--space-4); }
.platform-cta__text {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.platform-cta__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1024px) {
  /* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` floors at its widest child's
     min-content, and the release card's address bar is one unbreakable line,
     so at 390 the whole chapter ran 129px past the screen — invisible, because
     `body` clips sideways overflow instead of scrolling it. */
  .pf-grid,
  .pf-write-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  /* Copy first, demo second, regardless of the desktop order. */
  .pf-grid--flip .pf-copy { order: -1; }
}

@media (max-width: 768px) {
  .pf-thread-cards,
  .pfd-share-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  /* A link row carries three actions — open, copy, revoke — and at phone width
     they no longer fit beside the label. Without the wrap the row's width
     pushed the whole panel past the screen, and "create link." in its head
     went with it (design check, controls reachable). */
  .pfd-share-row,
  .pfd-share-hub-head { flex-wrap: wrap; }
  .pfd-card { padding: var(--space-5); }
  .pfd-tape { right: var(--space-4); }
  .pfd-starred-split { grid-template-columns: 1fr; }
  .pfd-visitor-cover, .pfd-release-cover { max-width: 70%; width: 70%; }
}

@media (max-width: 480px) {
  .pfd-row { flex-wrap: wrap; }
  .pfd-row-chip { margin-left: calc(var(--space-6) + var(--space-3)); }
  .platform-cta__actions .dd-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------- the hero, and the cue under it ----------------
   The band is a shared component (`.dd-platform`) that four other pages also
   render, so the cue cannot live inside it. This wrapper is the containing
   block `.dd-scroll-cue--sticky` sticks within: while any of the hero is on
   screen the cue holds the bottom of the viewport, and it leaves with the
   hero rather than following the reader down nine chapters. */
/* The band is the first thing on the page, and it is built to sit mid-page —
   its own top padding is far less than the fixed navbar's. `--navbar-h` says
   60px where the bar renders ~97px (conventions §5, "Navbar height lies"), so
   the clearance is the one `/work/`'s preview banner uses for the same job. */
.pf-hero {
  position: relative;
  padding-top: calc(var(--navbar-h) + var(--space-8));
}

/* The add-song modal, in miniature — the shape `project_song_create` opens,
   inside the panel rather than over the page, because a real modal over a
   marketing page is a trap rather than a demo. */
.pfd-mini-modal {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--coral-200);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
}
.pfd-mini-modal[hidden] { display: none; }
.pfd-mini-modal .pfd-add-form {
  margin-top: var(--space-2);
  padding-top: 0;
  border-top: 0;
}
.pfd-panel-head .dd-btn--add { margin-left: auto; }

/* ---------------- ch 10 · your people. — the access panel ----------------
   `_project_people_section.html` in miniature: a row per person, the state the
   model gives it, and a revoke. An invited row is dimmer than one that is
   actually reading the project, which is the difference the panel exists to
   show. */
.pfd-people-list { display: grid; gap: var(--space-2); }
.pfd-person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}
.pfd-person[hidden] { display: none; }
.pfd-person:last-child { border-bottom: 0; }
.pfd-person.is-invited { opacity: 0.7; }
.pfd-person.is-leaving { opacity: 0; transform: translateX(var(--space-5)); }
.pfd-person-body { display: grid; gap: var(--space-1); }
.pfd-person-body strong { font-size: var(--fs-small); }
.pfd-person-body > span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-person [data-person-revoke] { margin-left: auto; }
.pfd-invite-note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.pfd-people-panel .pfd-panel { margin-top: var(--space-5); }

/* The lyric panel's stage bar: the percentage, and the two bulk controls that
   come and go with whether they still have anything to do. */
.pfd-stage-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pfd-stage-bar [hidden] { display: none; }

/* Credits inherit rather than get typed twice — the songs' own first, then the
   album's, so the arrow between them means something. */
.pfd-song-credits {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-1);
  transition: opacity var(--dur-base) var(--ease-soft);
}
.pfd-song-credits li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-label);
}
.pfd-song-credits b { font-weight: 600; }
.pfd-song-credits span { color: var(--text-muted); font-family: var(--font-mono); }
.pfd-song-credits.is-merged { opacity: 0.45; }
.pfd-credits-merge {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--coral-600);
}
.pfd-credits-merge[hidden] { display: none; }
/* The album's credits as `/work/` prints them since #288 (`portfolio.css`,
   `.portfolio-credit-families`): one tinted sleeve with hairlines between the
   families, a small-caps label per family, the room one step quieter than the
   name, and #312's pink pill for a credit on only some tracks. Stacked role over
   name at every width — the card is a phone's width even on a desktop, and the
   two-column grid is exactly what `/work/` gives up at 480px. */
.pfd-album-credits {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-tint);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  opacity: 0;
  transition: opacity var(--dur-page) var(--ease-soft);
}
.pfd-album-credits[hidden] { display: none; }
.pfd-album-credits.is-in { opacity: 1; }
.pfd-credit-family + .pfd-credit-family {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--glass-border);
}
.pfd-credit-family-title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pfd-credit-list { margin: 0; }
.pfd-credit-list dt { color: var(--text-muted); }
.pfd-credit-list dt + dd { margin: 0; color: var(--text); }
.pfd-credit-list dd + dt { margin-top: var(--space-2); }
.pfd-credit-room { color: var(--text-muted); }
.pfd-credit-tracks {
  display: inline-block;
  padding: 0 var(--space-1);
  font-size: 0.85em;
  white-space: nowrap;
  color: var(--text-soft);
  background: var(--tint-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
}
.pfd-credit-more {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
}

/* ---------------- ch 02 · the studio's approve panel ----------------
   Drawn from `lyrics_studio.css`'s approve mode rather than near it (owner,
   2026-09-08): the panel is a `--tint-faint` takeover under a hairline, the
   meta bar carries the percentage, the `?` that explains what approving means
   and the bulk pair pushed to the end, and the lines are the lyric — body
   type at the studio's own size and rhythm, not the display face, which read
   as the words having been shouted for no reason.

   The three things that say state are the studio's three: a light green fill
   on an approved line, a `--tint-soft` gradient on the one under the pointer
   (an image, so it lays *over* the green instead of replacing it), and a tick
   that is a mark rather than a checkbox — grey, out of the way until you are
   on the line, green once the line is final, amber while a press would take
   that back. */
.pfd-approve-panel {
  /* The studio's approve mode takes the editor over rather than sitting in it,
     so this bleeds to the card's edges and keeps its bottom corners. */
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-4) 0 var(--space-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--tint-faint);
}
.pfd-approve-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 0 var(--space-5) var(--space-2);
}
.pfd-approve-count,
.pfd-approve-notes {
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-approve-count b { color: var(--text); font-weight: 600; }
.pfd-approve-count[hidden] { display: none; }
.pfd-approve-help {
  --dd-hint-size: 1.25rem;
  --dd-hint-glyph: 0.95rem;
  margin-left: calc(-1 * var(--space-2));
}
.pfd-approve-bulk {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.pfd-approve-lines { list-style: none; margin: 0; padding: var(--space-1) 0 var(--space-4); }
/* Words first, marks after them. The right-hand slot is a group rather than
   one control, so nothing moves when a second mark arrives beside the tick. */
.pfd-approve-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.2em var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease-soft);
}
/* `.is-hovered` is the demo's hand standing in for a pointer — a script cannot
   hover, and the tick only exists once you are on the line. */
.pfd-approve-line:not(.pfd-approve-line--section):hover,
.pfd-approve-line:not(.pfd-approve-line--section).is-hovered {
  background-image: linear-gradient(var(--tint-soft), var(--tint-soft));
}
/* Light, and the fill is all of it — no rule down the left edge. A whole
   song's worth of rows, and the tick already says which are final. */
.pfd-approve-line.is-final {
  background-color: color-mix(in srgb, var(--success) 7%, transparent);
}
/* Sections need air above them: they are where the eye rests on the way down
   a long sheet. Not on the first, which has the meta bar over it already. */
.pfd-approve-line--section {
  display: block;
  margin-top: 2em;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.pfd-approve-lines > .pfd-approve-line--section:first-child { margin-top: 0; }
.pfd-approve-text {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--text);
}
.pfd-approve-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.pfd-note-mark {
  width: 0.85rem;
  height: 0.85rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
}
.pfd-note-mark.is-on { background: var(--coral-200); border-color: var(--coral-200); }
/* A mark, not a checkbox. Four states, two of them a preview of what the
   press would do rather than a report of what is. */
.pfd-approve-check {
  padding: 0 0.2em;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.pfd-approve-line.is-hovered .pfd-approve-check { opacity: 1; }
@media (hover: hover) {
  .pfd-approve-line:hover .pfd-approve-check { opacity: 1; }
}
@media (hover: none) {
  .pfd-approve-check { opacity: 1; }
}
.pfd-approve-check:focus-visible {
  opacity: 1;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Approved is a standing state, so its mark does not hide with the others. */
.pfd-approve-line.is-final .pfd-approve-check { opacity: 1; color: var(--success); }
.pfd-approve-check:hover { color: color-mix(in srgb, var(--success) 55%, var(--paper)); }
/* `--attention` is the warm "this needs a second look" amber, and taking an
   approval back is exactly that. */
.pfd-approve-line.is-final .pfd-approve-check:hover {
  color: color-mix(in srgb, var(--attention) 60%, var(--paper));
}
/* A noted passage is marked on the lines it covers, not on the tick. */
.pfd-approve-line.is-noted { border-left: 2px solid var(--coral-200); padding-left: var(--space-3); }
@media (prefers-reduced-motion: reduce) {
  .pfd-approve-line,
  .pfd-approve-check { transition: none; }
}


/* ---------------- ch 02 · timing the words to the song ----------------
   The capture tool's own grammar: one tap per line while it plays, the stamp
   replacing the dot, and the line lighting when the audio reaches it — which
   is what songs/lyrics_follow.js does on the surfaces that read the lyric. */
.pfd-textarea--tall { min-height: 11rem; }
.pfd-time-hint {
  margin: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.pfd-time-lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.pfd-time-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.pfd-time-stamp {
  flex: none;
  min-width: 3.2rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  cursor: pointer;
}
.pfd-time-stamp:hover { border-color: var(--coral-200); }
.pfd-time-line.is-timed .pfd-time-stamp {
  color: var(--coral-700);
  border-color: var(--coral-200);
  background: var(--coral-50);
}
/* The lyric, in the type a lyric is read in — the display face here was the
   same mistake the marks list made (owner, 2026-09-08). */
.pfd-time-text {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--text-soft);
}
/* A header carries no time, so it has no stamp to sit beside — and it reads as
   the structure it is, the way the studio's own list draws one. */
.pfd-time-line--section {
  margin-top: 1.4em;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.pfd-time-lines > .pfd-time-line--section:first-child { margin-top: 0; }
/* `lyric-lines.css`'s own playing line: a fill and the link colour, because
   `--accent-strong` fails AA as body text at this size. */
.pfd-time-line.is-playing { background: var(--tint-20); }
.pfd-time-line.is-playing .pfd-time-text { color: var(--link); font-weight: 600; }

/* ---------------- ch 07 · sign-off and delivery ---------------- */
.pfd-signoff-lead {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-soft);
}
/* The one button the chapter is about, and it needs room under it: the notes
   it closes sit directly below, and pressed up against them it read as the
   heading of that list rather than as the thing you press (owner,
   2026-09-08). */
.pfd-signoff-approve { margin-bottom: var(--space-6); }
.pfd-signoff-locked {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4);
  border: 1px solid var(--status-completed);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
}
.pfd-signoff-locked[hidden] { display: none; }
.pfd-signoff-locked p { margin: 0; font-size: var(--fs-small); }
/* One spec for the whole job, above the list it qualifies. */
.pfd-spec {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--coral-800);
}
.pfd-deliverables { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pfd-deliverable {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
}
.pfd-deliverable[hidden] { display: none; }
.pfd-deliverable:last-child { border-bottom: 0; }
.pfd-deliverable [data-state] { margin-left: auto; }
.pfd-deliverable.is-delivered [data-state] {
  color: var(--success);
  border-color: var(--success);
}