/* Beta-only visual layer, based on all-screens.html. */
body.av-ux {
  padding: 1rem .875rem calc(1rem + env(safe-area-inset-bottom, 0px));
}
body.av-ux #module-container { max-width: 24rem; }
/* Debug details must never cover the recording/start controls. */
body.av-ux .trace-box { display: none; }
body.av-ux #av-trace-copy { top: .25rem; bottom: auto; padding: .35rem .5rem; }
body.av-ux [data-screen] {
  gap: .875rem;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  background: rgba(var(--ink-rgb), .03);
  border: 1px solid rgba(var(--ink-rgb), .08);
  box-shadow: none;
}
body.av-ux .stack, body.av-ux .center-stack { gap: .875rem; }

/* Compact reference button; its 44px hit area stays accessible. */
body.av-ux .btn, body.av-ux .intro-cta {
  width: auto; max-width: 100%; min-width: 6rem; min-height: 2.75rem;
  align-self: center; padding: .5rem 1.125rem;
  border: none; border-radius: .5rem;
  background: linear-gradient(145deg, var(--btn-mid-0), var(--mid) 46%, var(--btn-mid-2)); color: var(--btn-mid-ink);
  font: 600 1.00625rem/1.5 var(--sans); letter-spacing: 0;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(var(--ink-rgb), .35), inset 0 -1px 0 rgba(var(--shadow-rgb), .22);
}
body.av-ux .btn:hover, body.av-ux .intro-cta:hover { box-shadow: 0 14px 36px -8px rgba(var(--mid-rgb), .7), inset 0 1px 0 rgba(var(--ink-rgb), .35); }
body.av-ux .btn:focus-visible, body.av-ux .intro-cta:focus-visible { outline: 2px solid var(--high); outline-offset: 3px; }
body.av-ux .btn:disabled { opacity: .45; }
body.av-ux .btn-ghost { border: 1px solid rgba(var(--ink-rgb), .16); background: rgba(var(--ink-rgb), .03); box-shadow: none; }
body.av-ux .intro-cta { display: block; margin: 1rem auto 0; }
body.av-ux .c2-actions { min-height: 2.75rem; row-gap: .625rem; }
body.av-ux .choice-row { justify-content: center; gap: .75rem; }
body.av-ux .choice { flex: 0 1 7rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: .5rem; font-size: 1.00625rem; font-weight: 500; }

/* Body copy remains white; commands and note labels are amber landmarks. */
body.av-ux .title, body.av-ux .headline {
  font-size: 1.29375rem; font-weight: 600; line-height: 1.5; color: var(--ux-copy);
  background: none; -webkit-text-fill-color: currentColor;
}
body.av-ux .subtitle, body.av-ux .instruction, body.av-ux .body-text,
body.av-ux .caption, body.av-ux .intro-label, body.av-ux .intro-step-body,
body.av-ux .muted-text, body.av-ux .big-state, body.av-ux .aaa-label,
body.av-ux .voice-hint, body.av-ux .voice-covers,
body.av-ux .c2-tagline, body.av-ux .c2-verdict, body.av-ux .c2-score-word,
body.av-ux .pm-card .pm-coach-body {
  font-size: 1.00625rem; line-height: 1.7; font-weight: 400; color: var(--ux-copy);
}
body.av-ux .eyebrow, body.av-ux .aaa-sub, body.av-ux .oct,
body.av-ux .vb-title, body.av-ux .vb-duration, body.av-ux .c2-cta-note,
body.av-ux .intro-counter,
body.av-ux .more summary, body.av-ux .link-btn, body.av-ux .c2-later {
  color: var(--ux-copy); font-size: 0.93437rem; line-height: 1.6; letter-spacing: 0;
}
body.av-ux .aaa-label.singing, body.av-ux .walk-say {
  font-size: 1.29375rem; color: var(--ux-copy); font-weight: 600;
}
body.av-ux .walk-say.sing { color: var(--ux-go); }
body.av-ux .note-target, body.av-ux .giant-note, body.av-ux .note-ring-wrap .giant-note {
  font-size: 2.0125rem; font-weight: 600; line-height: 1.2; color: var(--ux-note); text-shadow: none;
}
body.av-ux .note-heard, body.av-ux .live-note { font-size: 1.15rem; color: var(--ux-note); text-shadow: none; }
body.av-ux .range-txt, body.av-ux .range-line { font-size: 1.29375rem; color: var(--ux-copy); }
body.av-ux .range-txt .n { color: var(--low); }
body.av-ux .range-txt .m { color: var(--high); }
body.av-ux [data-screen].pm-card .voice-name, body.av-ux .c2-appname { font-size: 1.725rem; }
/* 50% up from the compact beta size this used to share with .pm-card and
   .c2-appname (1.725rem) — those two keep the old size; only the voice-type
   label itself grows. */
body.av-ux .voice-name { font-size: 2.5875rem; }

body.av-ux .mic-big { width: 4.125rem; height: 4.125rem; font-size: 1.6675rem; }
body.av-ux .waves { width: 100%; max-width: 12rem; height: 3.75rem; }
body.av-ux .aaa-svg-wrap { width: 100%; max-width: 14rem; height: 3.625rem; }
body.av-ux .aaa-note-badge, body.av-ux .aaa-note-badge.lit {
  font-size: 2.0125rem; color: var(--high); text-shadow: 0 0 20px rgba(var(--high-rgb), .45);
}
body.av-ux .intro-slot { height: 8rem; }
body.av-ux .intro-panel { gap: .75rem; }
/* The direction cards are read as one centred animation. Explicit widths and
   auto margins prevent RTL flex layout from parking the miniature piano on a
   side of the card. */
body.av-ux .brief { width: 100%; align-items: center; text-align: center; }
body.av-ux .brief .kb {
  width: fit-content; max-width: 100%; gap: .125rem;
  align-self: center; margin-inline: auto;
}
body.av-ux .kb i { width: .75rem; height: 2.75rem; }
body.av-ux .kb-wide { max-width: 100%; justify-content: center; gap: .09375rem; }
body.av-ux .kb-wide i { width: .5rem; height: 2.75rem; }
body.av-ux .brief .arrowline {
  width: min(100%, 13rem); max-width: 13rem; height: 1rem;
  align-self: center; margin-inline: auto;
}
body.av-ux .brief .caption { width: 100%; align-self: center; text-align: center; }
body.av-ux .voice-box { padding: .4375rem .625rem; gap: .625rem; border-radius: .5rem; min-height: 2.75rem; }
body.av-ux .vb-outer { max-width: 16rem; margin-left: auto; margin-right: auto; }
body.av-ux .vb-btn { width: 1.75rem; height: 1.75rem; font-size: 0.8625rem; }
/* A compact red cue makes the optional spoken guide discoverable without
   competing with the blue primary action. */
body.av-ux .vb-arrow {
  font-size: 2rem; color: var(--vb-arrow);
  text-shadow: 0 0 6px rgba(var(--vb-arrow-rgb), .95), 0 0 16px rgba(var(--vb-arrow-rgb), .55);
}

/* The old count was 5.2rem / about 83px. The compact count keeps its cue role. */
body.av-ux [data-screen].c2-card .c2-instruction {
  font-size: 1.07813rem; color: var(--ux-copy); line-height: 1.6; font-weight: 500; min-height: 2.5em;
}
body.av-ux [data-screen].c2-card[data-phase="count"] .c2-instruction { font-size: 1.07813rem; color: var(--ux-copy); }
/* The scale's listen prompt keeps its original muted colour; only the
   magnifier's listen prompt is deliberately white. */
body.av-ux .c2-five-card[data-phase="listen"] .c2-instruction { color: var(--ink-2); }
body.av-ux [data-screen].c2-card[data-phase="sing"] .c2-instruction { color: var(--ux-go); }
body.av-ux .c2-count, body.av-ux .c2-stage-five .c2-count {
  font-size: 2.5875rem; font-weight: 600; color: var(--ux-copy); text-shadow: 0 2px 8px rgba(var(--bg-body-rgb), .8);
}
body.av-ux .c2-note-name { font-size: 2.0125rem; font-weight: 600; letter-spacing: 0; }
/* In the magnifier's listen state, the played note is the one warm landmark. */
body.av-ux .c2-card[data-phase="listen"] .c2-target { color: var(--ux-note); }
body.av-ux .c2-status-text { font-size: 1.00625rem; }
body.av-ux .c2-meter { gap: .75rem; }
body.av-ux .c2-score { font-size: 2.0125rem; }
body.av-ux .c2-five-note { font-size: 0.93437rem; }
body.av-ux .c2-five-note.now { color: var(--ux-note); }
body.av-ux .c2-stage { min-height: 11rem; }
@media (max-height: 680px) {
  body.av-ux [data-screen] { padding: 1rem .875rem; gap: .75rem; }
  body.av-ux .stack, body.av-ux .center-stack { gap: .75rem; }
}