/*
 * The earbud check's components (gate.js; /hearing-check/full only; platform
 * spec §5.4 Gate, WP7). Linked from that page's shell and nowhere else.
 *
 * Every selector names one of WP7's classes (hc-three, hc-intervals,
 * hc-interval, hc-lr-note), never an OHC class alone:
 * tools/hearing-test/ohc-freeze.test.ts holds that. The rest of the earbud
 * check is styles.css's own pieces (the ear tiles, the note, the ghost
 * button). No new colours: a lit tile is the accent, as everywhere else.
 *
 * Fit: vertical sizes follow styles.css's rule, clamp(floor, var(--hc-v) ×
 * design/8.44, design), scoped to .hc-screen:not(.hc-result); a tile is a
 * tap target of at least 64 px (spec §5.5: gate-hug ≈ 520 px at 390×664).
 */

/* ── the three hisses: shown on gate-hug-intro, tapped on gate-hug ──── */

.hc-intervals,
.hc-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hc-interval {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--hc-surface);
  color: var(--hc-ink);
  font-size: 36px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.hc-screen:not(.hc-result) .hc-interval {
  height: clamp(64px, calc(var(--hc-v) * 11.4), 96px);
}

/* The answer tiles: raised like the keypad's keys, quiet until all three hisses are heard. */
.hc-three .hc-interval {
  box-shadow: 0 3px 0 var(--hc-key-shadow);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.hc-three .hc-interval:disabled {
  color: var(--hc-muted);
  cursor: default;
}
.hc-three .hc-interval:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--hc-key-shadow);
}
.hc-three .hc-interval[aria-pressed='true'] {
  box-shadow: inset 0 0 0 3px var(--hc-accent);
  color: var(--hc-ink);
}

/* Lit while its hiss is heard (after the output's lag), on both screens. */
.hc-interval[data-on],
.hc-three .hc-interval[data-on]:disabled {
  background: var(--hc-accent);
  color: #FFFFFF;
}

/* gate-hug: the hint right under the tiles (styles.css sends .hc-hint to the
   foot, where it would share the free space with "Play it again"); and "Play
   it again" looks off while the hisses play and once it has been used. */
.hc-three + .hc-hint {
  margin-top: 0;
}
.hc-three ~ .hc-actions .hc-ghost:disabled {
  color: var(--hc-muted);
  cursor: default;
}

/* gate-hug-intro's buttons: the example's play mark at button size; the replay centred. */
.hc-intervals ~ .hc-actions .hc-btn svg {
  width: 26px;
  height: 26px;
}
.hc-intervals ~ .hc-actions .hc-ghost {
  align-self: center;
}

/* ── gate-lr after a missed first block: the note, then Try again ─────── */

.hc-lr-note {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: clamp(10px, calc(var(--hc-v) * 2.4), 20px);
}