/* ==========================================================================
   Paddy Prompt Studio — Vocal range test
   Layers on /blog/style.css (same dark indigo/cyan palette and type scale).
   Only the interactive widget lives here; prose styling is inherited.
   ========================================================================== */

:root {
  --good: #34d399;
  --near: #fcd34d;
  --off:  #fb7185;
  --cyan: #22d3ee;
}

/* ------------------------------------------------------------ Shell */
.vr {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border); border-radius: 22px;
  padding: 1.25rem; margin: 0.5rem 0 1rem;
  box-shadow: 0 30px 70px -40px rgba(99, 102, 241, 0.6);
}

.tuner-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border-soft);
}

.seg { display: inline-flex; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 0.22rem; gap: 0.15rem; }
.seg button {
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 9px; padding: 0.55rem 0.8rem; min-height: 40px;
  background: transparent; color: var(--text-muted);
}
.seg button[aria-pressed="true"] { background: rgba(99, 102, 241, 0.22); color: #fff; }

.toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.5rem 0.75rem; min-height: 44px;
  font-size: 0.86rem; font-weight: 600; color: var(--text-muted);
}
.toggle input { width: 1.1rem; height: 1.1rem; accent-color: #818cf8; margin: 0; }
.toggle[hidden] { display: none; }

.mic-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer;
  margin-left: auto; padding: 0.7rem 1.3rem; min-height: 48px; border: 0; border-radius: 12px;
  font: inherit; font-size: 1rem; font-weight: 700;
  background: linear-gradient(135deg, #818cf8, #22d3ee); color: #0b0620;
}
.mic-btn:hover { filter: brightness(1.08); }
.mic-btn[data-state="listening"] { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, 0.45); }
.mic-btn .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.mic-btn[data-state="listening"] .dot { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.tuner-status { margin: 0.85rem 0 0; font-size: 0.9rem; color: var(--text-muted); min-height: 1.3em; }
.tuner-status.err { color: #fca5a5; font-weight: 600; }

.tuner-hint { margin: 0.9rem 0 0; text-align: center; font-size: 0.85rem; color: var(--text-dim); }
.tuner-hint kbd, .article-body kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem;
  background: rgba(129, 140, 248, 0.14); border: 1px solid var(--border-soft);
  border-radius: 5px; padding: 0.05em 0.35em; color: #c7d2fe;
}

/* ------------------------------------------------------------ Body grid */
.vr-body {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem;
  padding-top: 1.1rem; align-items: start;
}

/* Ladder: one row per semitone, high notes at the top. */
.vr-ladder-wrap { position: relative; }
.vr-ladder { display: block; width: 100%; height: auto; }
.vr-ladder .key { cursor: pointer; transition: fill 0.15s ease; }
.vr-ladder .key.white { fill: rgba(232, 236, 244, 0.13); }
.vr-ladder .key.black { fill: #05060a; stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.5; }
.vr-ladder .key:hover { fill: rgba(129, 140, 248, 0.45); }
.vr-ladder .key.in-range.white { fill: rgba(34, 211, 238, 0.32); }
.vr-ladder .key.in-range.black { fill: rgba(14, 116, 144, 0.75); }
.vr-ladder .key.cur { fill: #a5b4fc; }
.vr-ladder .key.held { animation: held-flash 0.9s ease-out; }
@keyframes held-flash { 0% { fill: #34d399; } 100% { } }
.vr-ladder .c-label { font: 700 6px "JetBrains Mono", ui-monospace, monospace; fill: #7f8a9e; pointer-events: none; }
.vr-ladder .oct-line { stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.6; pointer-events: none; }
.vr-ladder #vr-band { transition: y 0.25s ease, height 0.25s ease; }
.vr-ladder .marker { pointer-events: none; transition: transform 70ms linear, opacity 0.2s ease; }
.vr-band-label { margin: 0.4rem 0 0; font: 700 0.66rem/1.3 "JetBrains Mono", ui-monospace, monospace; color: var(--text-dim); text-align: center; }

/* Readout */
.vr-read { text-align: center; padding: 0.25rem 0 0.6rem; }
.vr-read .note {
  font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 800;
  font-size: clamp(3.2rem, 14vw, 4.8rem); line-height: 1; color: #fff;
  letter-spacing: -0.03em; display: inline-flex; align-items: flex-start;
}
.vr-read .note .oct { font-size: 0.36em; font-weight: 700; color: var(--indigo); margin-left: 0.12em; padding-top: 0.32em; }
.vr-read .hz { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82rem; color: var(--text-dim); margin: 0.2rem 0 0; }

.hold { margin: 0.7rem auto 0; max-width: 18rem; }
.hold-track { display: block; height: 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.hold-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #818cf8, #22d3ee); transition: width 60ms linear; }
.hold[data-full="true"] .hold-fill { background: var(--good); }
.hold-label { display: block; margin-top: 0.3rem; font: 700 0.64rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.hold[data-full="true"] .hold-label { color: #6ee7b7; }

/* Steps */
.vr-steps { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; counter-reset: s; }
.vr-steps[hidden] { display: none; }
.vr-steps li {
  counter-increment: s; text-align: center; padding: 0.45rem 0.2rem; border-radius: 10px;
  font-size: 0.74rem; font-weight: 700; color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-soft);
}
.vr-steps li::before { content: counter(s) " · "; font-family: "JetBrains Mono", ui-monospace, monospace; }
.vr-steps li[aria-current="step"] { color: #fff; border-color: rgba(129, 140, 248, 0.7); background: rgba(99, 102, 241, 0.18); }
.vr-steps li[data-done="true"] { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); }

.vr-panel {
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 0.9rem 1rem;
}
.vr-panel h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.vr-panel p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }
.vr-panel .capture { margin-top: 0.55rem; font: 700 0.85rem "JetBrains Mono", ui-monospace, monospace; color: #a5f3fc; }
.vr-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

.btn {
  font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer;
  min-height: 44px; padding: 0.55rem 1rem; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; text-decoration: none;
}
.btn[hidden] { display: none; }
.btn-primary { border: 0; background: linear-gradient(135deg, #818cf8, #22d3ee); color: #0b0620; }
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn-ghost { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: rgba(129, 140, 248, 0.16); text-decoration: none; }

/* Reference note */
.vr-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.vr-ref .lbl { font: 700 0.62rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.vr-ref .stepper { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 12px; padding: 0.2rem; }
.vr-ref .step {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 9px; line-height: 1;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
  color: var(--text); font-size: 1.1rem; font-weight: 700;
}
.vr-ref .step:hover { background: rgba(129, 140, 248, 0.22); }
.vr-ref .ref-note { font: 700 1rem "JetBrains Mono", ui-monospace, monospace; min-width: 3.2rem; text-align: center; color: #c7d2fe; }

/* ------------------------------------------------------------ Result card */
.vr-result {
  position: relative; overflow: hidden; margin-top: 1.2rem; padding: 1.2rem;
  border-radius: 18px; border: 1px solid rgba(129, 140, 248, 0.45);
  background: radial-gradient(120% 90% at 0% 0%, rgba(99, 102, 241, 0.20), transparent 60%),
              radial-gradient(90% 90% at 100% 100%, rgba(8, 145, 178, 0.18), transparent 60%), #0a0c14;
}
.vr-result[hidden] { display: none; }
.vr-result .kicker { font: 700 0.68rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #a5b4fc; margin: 0; }
.vr-result .range { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 800; font-size: clamp(2.3rem, 10vw, 3.4rem); line-height: 1.05; margin: 0.3rem 0 0.2rem; color: #fff; letter-spacing: -0.02em; }
.vr-result .meta { margin: 0; font: 700 0.82rem "JetBrains Mono", ui-monospace, monospace; color: #a5f3fc; }
.vr-result .fals { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--text-muted); }
.vr-result .level {
  display: inline-block; margin: 0.8rem 0 0.25rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35); color: #fde68a;
  font-weight: 700; font-size: 0.88rem;
}
.vr-result .msg { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--text-muted); }
.vr-result h3 { font-size: 1.15rem; margin: 1.1rem 0 0.5rem; }
.vr-result .caveat { font-size: 0.84rem; color: var(--text-dim); margin: 0.6rem 0 0; }
.vr-result .tips p { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--text-muted); }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.bars li { display: grid; grid-template-columns: 8.5rem 4.6rem minmax(0, 1fr) 2.8rem; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.bars .bar-name { font-weight: 700; }
.bars .bar-range, .bars .bar-score { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.76rem; color: var(--text-dim); }
.bars .bar-score { text-align: right; }
.bars .bar-track { height: 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bars .bar-fill { display: block; height: 100%; border-radius: inherit; background: rgba(129, 140, 248, 0.6); }
.bars li.best .bar-fill { background: linear-gradient(90deg, #818cf8, #22d3ee); }
.bars li.best .bar-name { color: #a5f3fc; }

.share-box, .suno-box {
  margin-top: 0.9rem; padding: 0.85rem 0.95rem; border-radius: 12px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border-soft);
}
.share-box p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.suno-box textarea {
  width: 100%; box-sizing: border-box; min-height: 4.2rem; resize: vertical;
  font: 0.86rem/1.45 "JetBrains Mono", ui-monospace, monospace; color: #e0e7ff;
  background: #07080d; border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem;
}
.suno-box .lbl { display: block; font: 700 0.62rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 0.45rem; }
.vchips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.vchip {
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; min-height: 44px;
  padding: 0.4rem 0.75rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--text-muted);
}
.vchip[aria-pressed="true"] { background: rgba(34, 211, 238, 0.14); border-color: rgba(34, 211, 238, 0.55); color: #a5f3fc; }

/* Celebration for ranges over two octaves */
.vr-result.party { animation: party-glow 1.6s ease-out 2; }
@keyframes party-glow {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
  30% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.45), 0 0 60px 6px rgba(129, 140, 248, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
}
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute; bottom: -2rem; color: #fde68a; opacity: 0;
  animation: float-up 2.4s ease-out forwards;
}
.confetti span:nth-child(3n) { color: #a5f3fc; }
.confetti span:nth-child(3n+1) { color: #c7d2fe; }
@keyframes float-up {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-22rem) rotate(25deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mic-btn[data-state="listening"] .dot { animation: none; }
  .vr-ladder .marker, .vr-ladder #vr-band, .hold-fill, .vr-ladder .key { transition: none; }
  .vr-ladder .key.held { animation: none; fill: #34d399; }
  .vr-result.party { animation: none; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5); }
  .confetti { display: none; }
}

/* ------------------------------------------------------------ Prose tables */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
table.data caption { text-align: left; padding: 0.85rem 1rem 0.2rem; color: var(--text-dim); font-size: 0.82rem; }
table.data th, table.data td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid var(--border-soft); }
table.data thead th {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.mono, table.data th.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85rem; color: #a5f3fc; }
table.data tbody tr:hover { background: rgba(129, 140, 248, 0.05); }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 640px) {
  .vr { padding: 0.9rem; border-radius: 18px; }
  .mic-btn { margin-left: 0; width: 100%; }
  .vr-body { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.75rem; }
  .vr-steps li { font-size: 0.66rem; }
  .vr-steps li::before { content: counter(s); display: block; }
  .bars li { grid-template-columns: minmax(0, 1fr) 2.8rem; }
  .bars .bar-range { display: none; }
  .bars .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .vr-result { padding: 1rem; }
}
@media (max-width: 380px) {
  .vr-body { grid-template-columns: 4.8rem minmax(0, 1fr); }
  .vr-panel { padding: 0.75rem; }
}