/* Tokens, the page column and the header come from ../shared/theme.css;
   this file holds only what is the drill's own. */

:root {
  /* Green, the theme's --success, for a note that has arrived, amber for
     one still on its way. The needle is the only thing on the page that
     changes color, so the two have to be told apart at a glance and from
     across a music stand. The soft green is --success at 15%. */
  --tuned-soft: #147d4a26;
  --off: #b8730b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tuned-soft: #6ede9f26;
    --off: #f0b95c;
  }
}

.board {
  gap: 14px;
}

/* --- the note ------------------------------------------------------------- */

/* A start button only while waiting; its shell is the theme's .start-card. */
.note-card {
  gap: 4px;
  min-height: 200px;
  padding: 20px 24px;
}

.note {
  display: flex;
  align-items: baseline;
  margin: 0;
  color: var(--muted);
  line-height: 1;
}

/* Tabular figures and a fixed minimum width, so the letter does not shuffle
   sideways as the reading moves between C and F♯. */
.note-name {
  font-size: 92px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.note-octave {
  font-size: 40px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 0.7em;
}

/* The idle card shows only the dash — the reserved octave width beside it
   would push the dash off center. */
.note-octave:empty {
  min-width: 0;
}

.note-card.is-in-tune .note {
  color: var(--success);
}

.note-card.is-off .note {
  color: var(--off);
}

.state-line {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  min-height: 22px;
}

.note-card.is-in-tune .state-line {
  color: var(--success);
}

@keyframes listening-pulse {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0.8;
  }
}

.note-card.is-listening .note {
  animation: listening-pulse 1.2s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .note-card.is-listening .note {
    animation: none;
  }
}

/* --- the cents meter ------------------------------------------------------ */

.meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meter-track {
  position: relative;
  height: 46px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The in-tune band, ±5 of the ±50 the track spans: a tenth of its width,
   centered. Marked rather than described, so there is something to aim at. */
.meter-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 45%;
  width: 10%;
  background: var(--tuned-soft);
  border-left: 1px solid var(--success);
  border-right: 1px solid var(--success);
}

.meter-center {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--muted);
  opacity: 0.55;
}

.meter-needle {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0.4;
  transition:
    left 0.09s linear,
    background-color 0.2s ease;
}

/* Live: a reading is on screen. Parked and pale otherwise, so a still needle
   in the middle is never mistaken for a note that is dead in tune. */
.meter.is-live .meter-needle {
  opacity: 1;
  background: var(--off);
}

.note-card.is-in-tune ~ .meter .meter-needle {
  background: var(--success);
}

@media (prefers-reduced-motion: reduce) {
  .meter-needle {
    transition: none;
  }
}

.meter-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
}

/* --- the readouts --------------------------------------------------------- */

.readouts {
  display: flex;
  gap: 10px;
}

.readout {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 10px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.readout-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.readout-label {
  font-size: 12px;
  color: var(--muted);
}

/* --- controls ------------------------------------------------------------- */

/* The microphone messages: a refusal is the one thing on this page the user
   has to act on, so it is bordered rather than left as gray small print. */
.mic-note {
  margin: 0;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

/* --- the reference pitch -------------------------------------------------- */

.reference {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 12px;
}

.reference-label {
  font-size: 14px;
  color: var(--muted);
}

.stepper {
  display: inline-flex;
  align-items: stretch;
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.step {
  padding: 8px 14px;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.step:hover:enabled {
  background: var(--accent);
  color: var(--accent-ink);
}

.step:disabled {
  color: var(--muted);
  opacity: 0.4;
  cursor: default;
}

.step-value:disabled {
  cursor: default;
}

/* A button in a value's clothing: tapping it resets the reference. */
.step-value {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}