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

:root {
  --stop: #b3261e;
  --stop-ink: #ffffff;
  /* Green for a note that has arrived, amber for one still on its way. The
     needle is the only thing on the page that changes colour, so the two have
     to be told apart at a glance and from across a music stand. */
  --tuned: #147d4a;
  --tuned-soft: #147d4a26;
  --off: #b8730b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stop: #ff9c92;
    --stop-ink: #0f1115;
    --tuned: #6ede9f;
    --tuned-soft: #6ede9f26;
    --off: #f0b95c;
  }
}

.board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.note-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 200px;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Only while it is a start button — the shell grants and revokes the role. */
.note-card[role='button'] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.note-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The waiting card's invitation, over the blank the note leaves. */
.card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.card-play .icon {
  width: 44px;
  height: 44px;
  /* Optically centred: a triangle's weight sits left of its box. */
  margin-left: 6px;
}

.card-play .icon-fill {
  fill: currentColor;
}

.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 centre. */
.note-octave:empty {
  min-width: 0;
}

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

.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(--tuned);
}

@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,
   centred. 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(--tuned);
  border-right: 1px solid var(--tuned);
}

.meter-centre {
  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(--tuned);
}

@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 grey small print. */
.mic-note {
  margin: 0;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--stop);
  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;
}