/* ============================================================
   MODIFI — Components
   Signature parts of the visual language. Load after base.css.
   The metaball ("goo") group requires the SVG filter from
   goo-filter.svg to be present once in the document.
   ============================================================ */

/* ---- Running header (deck grid: BRAND / SECTION / SUB / nr) - */
.mod-runhead {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--mod-space-4);
  align-items: baseline;
  padding: var(--mod-space-5) var(--mod-gutter);
  font-family: var(--mod-font-mono);
  font-size: var(--mod-text-label);
  letter-spacing: var(--mod-track-label);
  text-transform: uppercase;
}
.mod-runhead__num { justify-self: end; }
@media (max-width: 640px) {
  .mod-runhead { grid-template-columns: 1fr auto; }
  .mod-runhead__mid { display: none; }
}

/* ---- Pill button ------------------------------------------- */
.mod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mod-space-2);
  padding: 0.7em 1.4em;
  border-radius: var(--mod-r-pill);
  font-family: var(--mod-font-rounded);
  font-weight: var(--mod-weight-medium);
  font-size: var(--mod-text-sm);
  line-height: 1;
  background: var(--mod-n-100);
  color: var(--mod-ink);
  transition: transform var(--mod-dur-fast) var(--mod-ease-gel),
              background var(--mod-dur-base) var(--mod-ease-crossfade),
              color var(--mod-dur-base) var(--mod-ease-crossfade);
}
.mod-btn:hover  { transform: translateY(-1px); }
.mod-btn:active { transform: translateY(0) scale(.97); }

.mod-btn--ink       { background: var(--mod-ink);   color: var(--mod-paper); }
.mod-btn--accent    { background: var(--mod-yellow); color: var(--mod-on-accent); }
.mod-btn--primary   { background: var(--mod-blue);  color: var(--mod-on-interactive); }
.mod-btn--record    { background: var(--mod-orange);color: var(--mod-paper); }
.mod-btn--ghost     { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.mod-btn[aria-pressed="true"] { background: var(--mod-blue); color: var(--mod-on-interactive); }

/* ---- Round icon button (transport) ------------------------- */
.mod-iconbtn {
  width: 3rem; height: 3rem;
  display: inline-grid; place-items: center;
  border-radius: var(--mod-r-pill);
  background: var(--mod-ink); color: var(--mod-paper);
  transition: transform var(--mod-dur-fast) var(--mod-ease-gel);
}
.mod-iconbtn:active { transform: scale(.92); }
.mod-iconbtn--record { background: var(--mod-orange); }

/* ---- Chip (section marker, with waveform slot) ------------- */
.mod-chip {
  display: inline-flex;
  flex-direction: column;
  gap: var(--mod-space-1);
  padding: var(--mod-space-3) var(--mod-space-4);
  min-width: 5.5rem;
  border-radius: var(--mod-r-lg);
  background: var(--mod-n-100);
  font-family: var(--mod-font-rounded);
  font-size: var(--mod-text-sm);
  color: var(--mod-ink);
}
.mod-chip__wave {
  height: 1.25rem;
  color: var(--mod-n-400);   /* waveform stroke inherits this */
}
.mod-chip[data-active="true"] { background: var(--mod-blue); color: var(--mod-paper); }
.mod-chip[data-active="true"] .mod-chip__wave { color: rgba(255,255,255,.7); }

/* ---- Squircle tile / card (app icon, artwork) -------------- */
.mod-tile {
  border-radius: var(--mod-r-squircle);
  overflow: hidden;
  background: var(--mod-n-100);
  aspect-ratio: 1;
}
.mod-tile--icon {
  background: var(--mod-yellow);
  box-shadow: var(--mod-shadow-sm);
}
.mod-card {
  border-radius: var(--mod-r-lg);
  background: var(--mod-paper);
  color: var(--mod-ink);
  padding: var(--mod-space-6);
  box-shadow: var(--mod-shadow-md);
}

/* ---- Metaball "goo" group ---------------------------------- *
 * The signature: rounded shapes that FUSE with concave bridges,
 * echoing Dynamic Playback crossfading between states.
 * Requires <svg> filter id="mod-goo" present once in the DOM.  */
.mod-goo {
  display: flex;
  align-items: center;
  filter: url(#mod-goo);
}
.mod-goo > * {
  margin-inline: -6px;   /* overlap so blobs bleed together */
}
.mod-blob {
  display: grid; place-items: center;
  min-width: 3.75rem; height: 3.75rem;
  padding-inline: var(--mod-space-4);
  border-radius: var(--mod-r-pill);
  background: var(--mod-n-200);
  font-family: var(--mod-font-rounded);
  font-weight: var(--mod-weight-medium);
  color: var(--mod-ink);
  position: relative;
}
.mod-blob[data-active="true"] { background: var(--mod-blue); color: var(--mod-paper); }
/* Note: transitions on filtered children can be costly — keep
   colour changes on the blob, not animated geometry. */

/* ---- Gel surface (optional translucent treatment) ---------- */
.mod-gel {
  background: linear-gradient(160deg,
     rgba(255,255,255,.35), rgba(255,255,255,.05) 40%, rgba(0,0,0,.06));
  box-shadow: var(--mod-gel-highlight), var(--mod-shadow-sm);
  border-radius: var(--mod-r-lg);
  backdrop-filter: blur(6px);
}

/* ---- Speed / Pitch style slider ---------------------------- */
.mod-slider {
  display: flex; align-items: center; gap: var(--mod-space-3);
}
.mod-slider__track {
  flex: 1; height: 2.25rem;
  border-radius: var(--mod-r-pill);
  background: var(--mod-n-100);
  position: relative;
}
.mod-slider__cap {
  padding: 0.5em 1em;
  border-radius: var(--mod-r-pill);
  background: var(--mod-ink); color: var(--mod-paper);
  font-family: var(--mod-font-rounded);
  font-size: var(--mod-text-label);
  letter-spacing: .06em;
}

/* ---- Divider / rule --------------------------------------- */
.mod-rule { height: 1px; background: currentColor; opacity: .15; border: 0; }