/* Harmonic vs Fundamental Quiz — tool-specific overrides only.
   Ear-training game (pure sine tones, no mic). Shared tokens/components live in design-system.css. */

/* honest caveat note in the hero */
.hvf-warn-note {
  max-width: 820px; margin: var(--space-md) auto 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm); background: rgba(0, 229, 255, 0.04);
  color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.55; text-align: left;
}
.hvf-warn-note strong { color: var(--color-text-bright); }
.hvf-warn-note em { color: var(--color-text); font-style: italic; }

/* two-column layout */
.hvf-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 820px) { .hvf-grid { grid-template-columns: 1fr; } }

/* panels get a visible card treatment (the global .tool-panel is only a flex container) */
.hvf-panel {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.panel-title {
  font-family: var(--font-display); font-size: 0.95rem; color: var(--color-secondary);
  text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 var(--space-sm);
}

/* setup */
.hvf-field { margin-bottom: var(--space-md); }
.input-label {
  display: block; font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--color-text-muted); margin-bottom: var(--space-xs);
}
.hvf-select {
  width: 100%; padding: 10px 12px; background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.92rem;
}
.hvf-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 255, 65, 0.18); }
.input-hint { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; margin: var(--space-sm) 0; }

/* progress bar within the game */
.hvf-progress {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: var(--space-sm);
}
.hvf-progress__q { color: var(--color-text-muted); }
.hvf-progress__score { color: var(--color-primary); }

.hvf-prompt {
  padding: var(--space-md); margin-bottom: var(--space-md); text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: rgba(0, 255, 65, 0.03); color: var(--color-text-bright);
  font-size: 0.98rem; line-height: 1.45;
}

/* tone players */
.hvf-players { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.hvf-play { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-md) 6px; }
.hvf-play__label { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.06em; }
.hvf-play__sub { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-secondary); }

.hvf-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.hvf-toolbar .btn { flex: 1 1 auto; }

/* answers */
.hvf-answers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
.hvf-answers--grid { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.hvf-answers[hidden] { display: none; }
.hvf-ans {
  padding: 12px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-mono); font-size: 0.9rem; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.hvf-ans:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.hvf-ans:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hvf-ans:disabled { cursor: default; opacity: 0.92; }
.hvf-ans--correct { border-color: var(--color-primary); color: var(--color-bg); background: var(--color-primary); }
.hvf-ans--wrong { border-color: var(--color-error); color: var(--color-error); background: rgba(255, 23, 68, 0.08); }

/* feedback live region */
.hvf-feedback {
  margin-top: var(--space-md); min-height: 1.2em; font-size: 0.9rem; line-height: 1.5;
  color: var(--color-text-muted);
}
.hvf-feedback--ok { color: var(--color-primary); }
.hvf-feedback--no { color: #ffb43c; }

/* reveal */
.hvf-reveal[hidden] { display: none; }
.hvf-canvas {
  display: block; width: 100%; height: auto; margin-top: var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #060a08;
}
.hvf-reveal__text { font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.5; margin: var(--space-sm) 0 var(--space-md); }

/* round summary */
.hvf-summary[hidden] { display: none; }
.hvf-summary { text-align: center; }
.hvf-summary__title { font-family: var(--font-display); color: var(--color-secondary); margin: 0 0 var(--space-sm); }
.hvf-summary__score {
  font-family: var(--font-mono); font-size: clamp(2.4rem, 9vw, 3.4rem);
  color: var(--color-primary); line-height: 1; text-shadow: var(--glow-sm);
}
.hvf-summary__line { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; margin: var(--space-md) 0; }
.hvf-summary__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

/* stats panel */
.hvf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-md); }
.hvf-stat {
  padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: rgba(0, 255, 65, 0.02);
}
.hvf-stat__label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.hvf-stat__val { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 1.3rem; color: var(--color-primary); font-variant-numeric: tabular-nums; }

.hvf-legend { margin: var(--space-md) 0; }
.hvf-legend__title { font-size: 0.95rem; color: var(--color-text-bright); margin: 0 0 var(--space-sm); }
.hvf-legend__list { margin: 0; padding-left: 1.1em; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; }
.hvf-legend__list strong { color: var(--color-text); }

.btn--small { padding: 4px 10px; font-size: 0.78rem; }

/* ghost button + faq + related cards (not in the global sheet — defined here for full styling) */
.btn--ghost {
  background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { color: var(--color-primary); border-color: var(--color-primary); }

.faq-question {
  cursor: pointer; padding: var(--space-md); font-family: var(--font-body);
  font-weight: 600; color: var(--color-text-bright); list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-answer { padding: 0 var(--space-md) var(--space-md); color: var(--color-text); line-height: 1.6; }
.faq-answer strong { color: var(--color-text-bright); }

.related-tools-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
  text-align: left; margin-top: var(--space-md);
}
@media (max-width: 760px) { .related-tools-grid { grid-template-columns: 1fr; } }
.related-tool-card {
  display: block; padding: var(--space-md); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface);
  text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.related-tool-card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--glow-sm); }
.related-tool-card__title { font-family: var(--font-display); font-size: 0.95rem; color: var(--color-primary); margin-bottom: 4px; }
.related-tool-card__desc { font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.45; }

.hvf-steps { margin: var(--space-md) 0; padding-left: 1.2em; line-height: 1.7; }
.hvf-steps li { margin-bottom: var(--space-sm); }

@media (max-width: 480px) {
  .hvf-stats { grid-template-columns: 1fr; }
  .hvf-players { grid-template-columns: 1fr; }
}