/* One shape and one emphasis system for the whole page (rules: Layrs/docs/website/DESIGN.md › Shape).
   Loaded last, so it wins over the older per-section sheets.
   Shape: anything you press is a pill, or a circle when it holds only an icon. Anything that holds content
   is a card at --r-card. A surface inside a card is --r-inner. A field you type in or pick from is --r-field.
   Lines that only divide (border-top rules) stay straight. Nothing is square-cornered.
   Emphasis: one lime fill per view, the main call to action. A chosen row, tab or toggle is a soft lime tint
   with a thin lime ring, never a slab of lime or white. Play buttons are lime rings with a lime icon. */
:root {
  /* one spacing unit for the whole page: the gap between the LAYRS wordmark and the Mac (Vik, 1 Nov).
     A heading sits S above its content; a section has S above and below, so sections are 2S apart. */
  --space: clamp(56px, 6.5vw, 112px);
  --section: var(--space);
  --stack: var(--space);
  --r-card: 20px;
  --r-inner: 14px;
  --r-field: 12px;
  --r-pill: 999px;
  --line: #ffffff12;
  --line-strong: #ffffff24;
  --chosen: #c7df5f1a;
  --chosen-hover: #c7df5f24;
  --chosen-ring: inset 0 0 0 1px #c7df5f59;
  --quiet-fill: #ffffff0d;
  --quiet-fill-hover: #ffffff17;
  --well: #0d0d0d;
}

/* ---------- Pills: every pressable control ---------- */
.header-action, .button, .menu-toggle, .copy-button, .prompt-restore, .layer-retry,
.strip-filter button, .brief-rotation-control, .lane-mute, .lane-solo,
.cpg-secondary, .cpg-duration button, .shot-enlarge, .shot-dialog-close, .text-button {
  border-radius: var(--r-pill);
}
.header-action { padding-inline: 22px; }
.button { padding-inline: 30px; }

/* the main call to action keeps the one lime fill; every other button is quiet */
.button-neutral, .copy-button, .prompt-actions .copy-button, .cpg-secondary {
  background: var(--quiet-fill); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.button-neutral:hover, .copy-button:hover, .prompt-actions .copy-button:hover, .cpg-secondary:hover {
  background: var(--quiet-fill-hover); color: var(--ink);
}

/* ---------- Circles: icon-only and play buttons ---------- */
.play-toggle, .cpg-play {
  border-radius: 50%;
  background: var(--chosen);
  color: var(--accent);
  box-shadow: var(--chosen-ring);
}
.play-toggle { width: 60px; height: 60px; }
.play-toggle:hover, .cpg-play:hover { background: var(--chosen-hover); }
.play-toggle[data-playing=true], .is-playing .cpg-play { background: var(--chosen-hover); }

/* ---------- Cards: everything that holds content ---------- */
.player-main, .layer-desk[data-ui], .brief-panel, .feature-card, .maker-card, .price-field,
.install-steps li, .faq-list details, .listen-room-card, .privacy-facts > div,
.mac-specs > div, .maker-quote {
  border-radius: var(--r-card);
}
.player-main, .layer-desk[data-ui], .brief-panel { box-shadow: inset 0 0 0 1px var(--line); }
.brief-panel, .creator-playground { overflow: clip; }
/* the demo is the panel's top section: flush with its edges, a straight hairline where the brief begins */
.creator-playground { border-radius: 0; border-bottom: 1px solid var(--line); }

/* ---------- Inner surfaces ---------- */
.sample-button, .brief-tab, .prompt-details, .lane, .cpg-signal, .cpg-wave-shell, .feature-shot,
.feature-shot img, .shot-media, .shot-media img, .video-frame, .video-frame img {
  border-radius: var(--r-inner);
}
.feature-shot, .shot-media, .lane, .prompt-details { overflow: clip; }
[data-ui] .lane-clip { background: var(--well); border-radius: 10px; }
[data-ui] .lane-on { border-radius: 10px; }
[data-ui] .lane-on::before { border-radius: 4px; }

/* ---------- Fields ---------- */
select, textarea, .prompt-field textarea, .cpg-select-wrap select, .genre-select-wrap select,
.cpg-select-wrap, .genre-select-wrap { border-radius: var(--r-field); }

/* ---------- Chosen states: a tint and a ring, never a slab ---------- */
.sample-button[aria-pressed=true], .brief-tab[aria-selected=true] {
  background: var(--chosen); color: var(--ink); box-shadow: var(--chosen-ring);
}
.sample-button[aria-pressed=true]:hover, .brief-tab[aria-selected=true]:hover { background: var(--chosen-hover); }
.sample-button[aria-pressed=true] .sample-text > span,
.brief-tab[aria-selected=true] .brief-tab-text > span { color: var(--muted); }
.sample-button[aria-pressed=true] svg, .brief-tab[aria-selected=true]::after { color: var(--accent); }

/* the Instrumentals / Voice and sound switch: one segmented pill */
.strip-filter { gap: 4px; padding: 4px; background: var(--surface-raised); border-radius: var(--r-pill); width: fit-content; box-shadow: inset 0 0 0 1px var(--line); }
.strip-filter button { background: transparent; }
.strip-filter button:hover { background: var(--quiet-fill); }
.strip-filter button[aria-pressed=true] { background: var(--surface-active); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.strip-filter button[aria-pressed=true] span { color: var(--muted); }

/* mixer toggles */
[data-ui] .lane-mute, [data-ui] .lane-solo { background: var(--quiet-fill); min-height: 38px; }
[data-ui] .lane-mute[aria-pressed=true] { background: var(--surface-active); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-ui] .lane-solo[aria-pressed=true] { background: var(--chosen); color: var(--accent); box-shadow: var(--chosen-ring); }
[data-ui] .lane-on:hover { background: var(--quiet-fill); }
.lane-head { align-self: stretch; }

/* trim-length chips in the creator demo */
.cpg-duration button { background: var(--quiet-fill); border-color: var(--line-strong); color: var(--ink); }
.cpg-duration button[aria-pressed=true] { background: var(--chosen); border-color: #c7df5f59; color: var(--accent); }

/* ---------- Waveforms and display words: less glare ---------- */
.wave-bar { border-radius: 2px; }
.wave-bar.is-played { background: #c3e34f; }
.cpg-signal-word { color: var(--ink); }
.cpg-signal-meter i { opacity: .5; border-radius: 2px; }
.cpg-signal-meter i:nth-child(3n) { opacity: .28; }
.cpg-select-wrap select { background: var(--quiet-fill); border-color: var(--line-strong); color: var(--ink); }
.cpg-select-wrap select:hover { background: var(--quiet-fill-hover); border-color: #ffffff3a; }
/* the palette is lime, lavender and white: the sound-design demo was teal */
.cpg-sound .cpg-signal { background: #120f17; border-color: #2a2333; }
.cpg-sound .cpg-signal-meter i { background: var(--lavender); }

/* paired controls share a height: the hero's two pills, the header's speaker and plan button */
.hero-actions .button { min-height: 62px; }
.listen-toggle { border-radius: var(--r-pill); }
.wordmark-sound-toggle { width: 46px; height: 46px; }
.layer-master, .lane-meter, .layer-master i, .lane-meter i { border-radius: 3px; }

/* How it runs: four facts as cards */
.engine-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.engine-facts li { background: var(--surface-raised); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); padding: var(--pad); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.engine-figure { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 2.6vw, 42px); letter-spacing: -.04em; line-height: 1.05; color: var(--accent); margin-bottom: 18px; }
.engine-facts h3 { font-size: clamp(21px, 1.6vw, 26px); }
.engine-facts li > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.5; }
@media (max-width: 1100px) { .engine-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .engine-facts { grid-template-columns: 1fr; } }


/* lyrics as they are sung, under the player: a short window that follows the song */
.live-lyrics { grid-column: 1 / -1; position: relative; height: clamp(200px, 19vw, 300px); margin-top: var(--gap); overflow-y: auto; scrollbar-width: none; border-radius: var(--r-inner); background: var(--well); -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); }
.live-lyrics::-webkit-scrollbar { display: none; }
.live-lyrics ol { list-style: none; margin: 0; padding: 74px 22px; }
.live-lyrics li { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; color: var(--muted); transition: color 240ms ease, opacity 240ms ease; }
.live-lyrics.is-timed li { opacity: .45; }
.live-lyrics li.is-current { color: var(--ink); opacity: 1; }
.live-lyrics li.live-section { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .7; margin: 14px 0 4px; }
.live-lyrics li.live-section:first-child { margin-top: 0; }

/* feature-card headings in the brand's neon lime */
.feature-card h3 { color: var(--accent); }

/* the player: album art beside the title and a slimmer, seekable waveform */
.player-head { display: grid; grid-template-columns: clamp(160px, 17vw, 280px) minmax(0, 1fr); gap: clamp(16px, 1.6vw, 26px); align-items: center; margin-bottom: 20px; }
.track-cover { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-inner); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px #0009; }
.player-head-text { min-width: 0; }
.player-head-text h3 { min-height: 0; margin-bottom: 4px; }
.player-head .waveform { height: clamp(70px, 6.5vw, 110px); margin: 10px 0 0; }
@media (max-width: 520px) { .player-head { grid-template-columns: 1fr; } .track-cover { max-width: 240px; } }

/* the tab row carries the listening note on its right */
.strip-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: var(--row); }
.strip-row .strip-filter { margin: 0; }
.strip-row .sample-note { margin: 0; color: var(--muted); font-size: var(--small); }
.strip-row ~ .sample-block .sample-group { display: none; }
.player-main > .sample-note { margin: 18px 0 0; color: var(--muted); font-size: var(--small); }