/* The VocalFX page (page-vocalfx.js). Built on the site's tokens and section grid; nothing here
   reaches another product's page except the shared header nav rule at the end (four products). */

/* The product's colours come from the plugin's own editor (ui/hero.css in the 18 Oct release
   candidate): its night-green ground, its sage voice-1 green as the accent, its copper as --hot. */
body[data-product=vocalfx] {
  --bg: #0d100d; --ground: #0f130f; --well: #151a14;
  --accent: #bfd0a8; --hot: #e8a879;
  --glow: rgba(146, 176, 104, 0.2); --ring: rgba(191, 208, 168, 0.14);
}

/* Seven letters with the hero's wide tracking: a step smaller than SKIN / SINEW / UNHOLY so the
   name clears the interface image beside it. */
body[data-product=vocalfx] .hero h1 { font-size: clamp(52px, 5.6vw, 92px); letter-spacing: .07em; }

/* ---- Listen: three takes, one transport ---- */
.vfx-player { min-width: 0; display: grid; gap: 18px; align-content: start; }
.vfx-takes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vfx-take { display: grid; gap: 6px; align-content: start; text-align: left; padding: 14px 16px 16px; min-height: 44px; border: 1px solid var(--control-line); border-radius: 6px; color: var(--muted); transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.vfx-take:hover { color: var(--ink); border-color: var(--dim); }
.vfx-take[aria-pressed=true] { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vfx-take__name { font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.vfx-take[aria-pressed=true] .vfx-take__name { color: var(--accent); }
.vfx-take__text { font-size: 14px; line-height: 1.5; }
.vfx-wave { position: relative; height: 84px; }
.vfx-wave__canvas, .vfx-trace__canvas { display: block; width: 100%; height: 100%; }
.vfx-trace { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.vfx-trace__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
.vfx-trace__label { font: 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--dim); }
.vfx-readouts { display: flex; gap: 20px; font: 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.vfx-readouts output { color: var(--ink); display: inline-block; min-width: 3ch; }
.vfx-readouts span:first-child output { min-width: 14ch; }
.vfx-trace__canvas { height: 48px; transition: opacity 200ms ease; }
.vfx-trace.is-idle .vfx-trace__canvas { opacity: .35; }
.vfx-trace__note { font-size: 14px; color: var(--muted); min-height: 21px; }
.vfx-player .transport { margin-top: 0; }
.vfx-player .player-foot { margin-top: 0; }
.vfx-player .audio-status:empty { display: none; }

/* ---- Inside: the specification list and the README's first session ---- */
.vfx-features__body { min-width: 0; display: grid; gap: 44px; }
.vfx-specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.vfx-spec { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.vfx-spec dt { font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.vfx-spec dd { margin: 6px 0 0; color: var(--muted); line-height: 1.6; max-width: 46ch; }
.vfx-steps h3, .vfx-status__body h3 { margin: 0 0 14px; font-weight: 400; }
.vfx-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: vfx-step; display: grid; gap: 0; }
.vfx-steps li { counter-increment: vfx-step; display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); line-height: 1.6; max-width: 70ch; }
.vfx-steps li::before { content: counter(vfx-step, decimal-leading-zero); font: 12px/1.6 var(--mono); color: var(--hot); padding-top: 3px; }

/* ---- Status ---- */
.vfx-status__body { min-width: 0; max-width: 680px; }
.vfx-status__text { font-size: clamp(18px, 1.6vw, 21px); font-weight: 320; line-height: 1.55; margin-bottom: 32px; }
.vfx-open { margin: 0; padding: 0; list-style: none; }
.vfx-open li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.6; }
.vfx-open li::before { content: ''; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border: 1px solid var(--hot); border-radius: 50%; }

/* ---- Gallery provenance line (app.js renderGallery appends it from the item's `source`) ---- */
.gallery-source { display: block; margin-top: 8px; font: 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--dim); }

@media (max-width: 1050px) {
  .vfx-specs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .vfx-takes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vfx-take { grid-template-columns: 9ch minmax(0, 1fr); align-items: baseline; padding: 12px 14px; }
  .vfx-wave { height: 64px; }
  .vfx-features__body { gap: 32px; }
}

/* ---- Shared header: with four products the nav no longer fits a phone's bar. It scrolls
   sideways inside itself instead of widening the page. (For the merge: the other new pages
   need the same; keep one copy of this rule.) ---- */
@media (max-width: 760px) {
  .product-selector { min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
  .product-selector::-webkit-scrollbar { display: none; }
  .product-selector a { flex: 0 0 auto; }
}