/*
 * The beep check's components (balance-ui.js; /hearing-check/full and
 * /hearing-check/beta only; platform spec §5.4 Ear balance, WP8). Linked from
 * those shells and nowhere else, so the OHC pages never load it.
 *
 * Every selector names one of WP8's classes (hc-adj, hc-adj-btn, hc-yn,
 * hc-ear-label, hc-trial-dots) or of the result's "Ear balance" section
 * (round 4: hc-ears, hc-pitch, hc-pitch-ear, hc-pitch-says), never an OHC
 * class alone:
 * tools/hearing-test/ohc-freeze.test.ts holds that. The rest of each screen is
 * built from styles.css's own parts (the topbar, the volume card and its orb,
 * the inset, the ink banner, the note, the sheets). No new colour: tokens only.
 *
 * Fit (spec §5.5): every bal-* screen fits 390×664. Vertical sizes follow
 * styles.css's rule, clamp(floor, var(--hc-v) × design/8.44, design); floors
 * 48 px for a tap target, 15 px for text. bal-adjust is the tallest (about
 * 580 px with the redo note and the can't-hear link): the ear tile 72-100 px,
 * the Quieter/Louder pair 64-88 px.
 */

/* ── bal-adjust: which ear (and bal-switch: the ear that's next) ──────── */

.hc-ear-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: clamp(72px, calc(var(--hc-v) * 11.85), 100px);
  padding: 6px 18px;
  border-radius: 22px;
  background: var(--hc-surface);
  color: var(--hc-ink);
  font-size: clamp(20px, calc(var(--hc-v) * 2.85), 24px);
  font-weight: 800;
}
.hc-ear-label svg {
  flex-shrink: 0;
  width: clamp(50px, calc(var(--hc-v) * 7.6), 64px);
  height: auto;
}
/* bal-adjust while its beeps play (round-5 review: nothing showed a beep was
   playing): the tile takes an accent ring and the ear gently pulses. No level
   is shown, so the two ears can't be matched by eye. */
.hc-ear-label[data-playing] {
  box-shadow: inset 0 0 0 3px var(--hc-accent);
}
.hc-ear-label[data-playing] svg {
  animation: hcEarBeat 1.8s ease-in-out infinite;
}
@keyframes hcEarBeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hc-ear-label[data-playing] svg {
    animation: none;
  }
}
/* bal-switch: the same tile, larger, alone in the middle of the screen. */
.hc-center .hc-ear-label {
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
  padding: clamp(14px, calc(var(--hc-v) * 2.4), 20px) 28px;
}
.hc-center .hc-ear-label svg {
  width: clamp(72px, calc(var(--hc-v) * 11.4), 96px);
}

/* ── Quieter / Louder, and the Yes / No tiles ──────────────────────────── */

.hc-adj,
.hc-yn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hc-adj-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: clamp(64px, calc(var(--hc-v) * 10.4), 88px);
  padding: 0 12px;
  border: 0;
  border-radius: 20px;
  background: var(--hc-surface);
  color: var(--hc-ink);
  font-size: clamp(19px, calc(var(--hc-v) * 2.6), 22px);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--hc-key-shadow);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.hc-adj-btn svg {
  flex-shrink: 0;
  color: var(--hc-accent);
}
.hc-adj-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--hc-key-shadow);
}
/* Quieter and Louder are pressed again and again: they sit at the bottom, in
   the thumb's reach, right above "That's the softest I can hear". */
.hc-adj {
  margin-top: auto;
}
.hc-adj + .hc-actions {
  margin-top: 0;
}
/* "I can't hear it, even at the loudest" keeps its place while it is hidden
   (round-5 review): un-hidden at the loudest, it used to push Quieter, Louder
   and "That's the softest I can hear" up under the thumb, so the next Louder tap
   landed on the confirm button. Still not seen, not focusable, not a target. */
.hc-adj + .hc-actions [data-not-heard][hidden] {
  display: inline-flex !important;
  visibility: hidden;
}
/* At an end (Quieter at the softest, Louder at the loudest), and the Yes / No
   tiles while a beep plays: faded, flat, not a target. The words stay. */
.hc-adj-btn:disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: default;
}
.hc-yn .hc-adj-btn {
  flex-direction: column;
  gap: 6px;
  height: clamp(96px, calc(var(--hc-v) * 16.6), 140px);
  font-size: clamp(22px, calc(var(--hc-v) * 3.1), 26px);
}
.hc-yn .hc-adj-btn svg {
  width: clamp(24px, calc(var(--hc-v) * 3.3), 28px);
  height: clamp(24px, calc(var(--hc-v) * 3.3), 28px);
}
/* The Yes / No pair sits at the bottom, where the thumb is. */
.hc-yn {
  margin-top: auto;
}

/* ── bal-verify: five presentations, one dot each ──────────────────────── */

.hc-trial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.hc-trial-dots span {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: var(--hc-track);
}
.hc-trial-dots span.on {
  background: var(--hc-accent);
}
.hc-trial-dots span.now {
  box-shadow: inset 0 0 0 2px var(--hc-accent);
  background: var(--hc-surface);
}

/* The hub's card titles step down to 18 px below the design height so the
   beep check's longer earbud line still fits 390x664: that rule is in
   platform.css (one copy for every page). */

/* ── the result's "Ear balance" section (round 4; screens-full.js earBalanceSection) ──
   One line per pitch: the left ear's tile, the pitch and what the beeps
   showed, the right ear's tile. The tiles are bal-adjust's own ear drawings;
   the ear that needed more volume gets the accent ring the note uses. On the
   result page, which scrolls, so no fit clamps; it must only never be wider
   than a 390 px phone. */

.hc-ears ul {
  display: flex;
  flex-direction: column;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.hc-pitch {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.hc-pitch + .hc-pitch {
  border-top: 1px solid var(--hc-line);
}
.hc-pitch-ear {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 5px;
  border-radius: 14px;
  background: var(--hc-surface-2);
  color: var(--hc-ink-3);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.hc-pitch-ear svg {
  width: 40px;
  height: 36px;
}
.hc-pitch-ear[data-more] {
  background: var(--hc-accent-tint);
  box-shadow: inset 0 0 0 2px var(--hc-accent);
  color: var(--hc-ink);
}
.hc-pitch-says {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--hc-ink-3);
  text-align: center;
  /* "Right ear needed / more volume", not a lone "volume" on the second line. */
  text-wrap: balance;
}
.hc-pitch-says .hc-row-title {
  font-size: 16px;
  color: var(--hc-ink);
}
.hc-pitch:not([data-more='none']) .hc-pitch-says {
  font-weight: 700;
  color: var(--hc-ink);
}
.hc-ears .hc-btn2 {
  margin-top: 6px;
}

/* ── the balance graph (Kiarash 2026-10-07): a picture, no numbers ─────── */

.hc-ears-graph {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.hc-ears-sides {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hc-muted);
}
.hc-ears-sides span:last-child {
  text-align: right;
}
.hc-ears-graph svg {
  display: block;
  width: 100%;
  height: auto;
}
.hc-ears-graph [data-g='zone'] {
  fill: var(--hc-accent-tint);
}
.hc-ears-graph [data-g='mid'] {
  stroke: var(--hc-accent);
  stroke-width: 2;
  stroke-dasharray: 4 5;
}
.hc-ears-graph [data-g='track'] {
  stroke: var(--hc-track);
  stroke-width: 2;
}
.hc-ears-graph [data-g='bar'] {
  stroke: var(--hc-accent);
  stroke-width: 8;
  stroke-linecap: round;
}
.hc-ears-graph [data-g='dot'] {
  fill: var(--hc-accent);
  stroke: var(--hc-surface);
  stroke-width: 3;
}
.hc-ears-graph [data-g='bar'][data-out] {
  stroke: var(--hc-ink);
}
.hc-ears-graph [data-g='dot'][data-out] {
  fill: var(--hc-ink);
}
.hc-ears-graph [data-g='label'] {
  font-family: var(--hc-font);
  font-size: 14px;
  font-weight: 700;
  fill: var(--hc-ink-2);
}
.hc-ears-graph [data-g='zone-label'] {
  font-family: var(--hc-font);
  font-size: 13px;
  font-weight: 700;
  fill: var(--hc-accent);
  text-anchor: middle;
}