/* Tuner layout: one place where the note name, the gauge and the spectrum sit
   together. Everything else uses the shared tool components. */
.tuner-display {
 display: grid;
 grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
 gap: clamp(1rem, 3vw, 2rem);
 align-items: center;
 margin-bottom: 0.5rem;
}
@media (max-width: 780px) {
 .tuner-display {
  grid-template-columns: minmax(0, 1fr);
 }
}

.tuner-note {
 text-align: center;
}
@media (max-width: 780px) {
 .tuner-note {
  text-align: left;
 }
}

.tuner-note-name {
 font-family: var(--serif);
 font-size: clamp(3.4rem, 2.2rem + 5vw, 5.6rem);
 line-height: 0.9;
 font-weight: 500;
 letter-spacing: -0.03em;
 margin: 0;
 font-variant-numeric: tabular-nums;
}
.tuner-note-name.is-tuned {
 color: var(--ok);
}
.tuner-note-detail {
 margin: 0.4rem 0 0;
 font-family: var(--sans);
 font-size: var(--fs-sm);
 color: var(--ink-3);
}

.tuner-meters {
 min-width: 0;
}
.cents-labels {
 display: flex;
 justify-content: space-between;
 margin: 0.35rem 0 0.8rem;
 font-family: var(--sans);
 font-size: var(--fs-label);
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: var(--ink-3);
}
.tuner-readouts {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
 gap: 0.3rem 1rem;
 margin: 0 0 0.8rem;
 font-variant-numeric: tabular-nums;
}
.tuner-readouts p {
 margin: 0;
}
.spectrum {
 width: 100%;
 height: auto;
 margin-top: 0.8rem;
 border: 1px solid var(--rule);
 border-radius: var(--r-1);
 background: var(--paper-2);
}

.note-buttons {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
}
.note-buttons button {
 min-width: 3.1rem;
 min-height: 40px;
 padding: 0.3rem 0.5rem;
 border: 1px solid var(--rule-2);
 border-radius: var(--r-1);
 background: var(--paper-3);
 color: var(--ink);
 font-family: var(--sans);
 font-size: var(--fs-sm);
 cursor: pointer;
}
.note-buttons button:hover {
 border-color: var(--accent);
 color: var(--accent);
}
.note-buttons button.is-playing {
 background: var(--accent);
 border-color: var(--accent);
 color: #fff;
}

/* Strobe view: a ring of marks that stands still when the note is in tune. */
.strobe {
 display: flex;
 gap: 0.6rem;
 justify-content: center;
 align-items: center;
 min-height: 86px;
 border: 1px solid var(--rule);
 border-radius: var(--r-1);
 background: var(--paper-2);
 overflow: hidden;
}
.strobe-band {
 display: flex;
 gap: 6px;
}
.strobe-band i {
 display: block;
 width: 3px;
 height: 52px;
 background: var(--rule-2);
 border-radius: 2px;
}
.strobe-band.is-flat i {
 background: var(--warn);
}
.strobe-band.is-sharp i {
 background: var(--accent);
}
.strobe-band.is-tuned i {
 background: var(--ok);
}