/* =============================================================================
   as-mic.css — ONE round microphone for every speaking surface.

   WHY THIS FILE EXISTS
   The app grew a speaking control page by page, and the control drifted. By the
   time Matthew screenshotted it we had, all live at once:

     · pron-test.html    a full-width pink/purple BAR reading "Tap and read it
                         aloud" — not a mic at all. This is the one he objected
                         to, and it is the lead-capture test of a paid funnel.
     · catch-it / skill-lesson / describe-course   110px round, brand gradient
     · pronunciation / chinglish                   110px round via .recbtn
     · premium                                     92px, flat pink, no gradient
     · scenes-test                                 88px
     · words-in-context                            86px, dark disc + violet ring
     · examiner / interview-mock                   60px
     · business-clusters / week                    56px
     · interview-test                              52px
     · as-voice-ui.js (.asvu-mic)                  96px, amplitude-reactive

   Nine sizes and four different fills for the same action. This file is the
   single source of truth for the shape; pages keep their own layout.

   THE CANON is the 110px disc from catch-it.html, which is the only place that
   ever wrote the spec down ("DESIGN_STANDARD §1 — the signature circular mic").
   Everything here is that button, generalised.

   -----------------------------------------------------------------------------
   WHY THE CSS IS ALSO INLINED ON SOME PAGES (this duplication is deliberate)

   pronunciation.html and chinglish.html carry their own copy of the round-mic
   rules in a <style> block, with !important. That is not sloppiness — it is a
   fix. The mic there used to render as an 83x0 sliver of an emoji, because the
   only styling lived in a JS library and a `height:0` hide rule in the page
   beat it. A speaking app whose record button collapses to nothing when one
   script fails to load is a dead app.

   So: link this file for the shared truth, AND inline the ~6 declarations that
   decide "round, large, centred" on any page where a missing stylesheet would
   leave the student with nothing to tap. pron-test.html does both, on purpose.
   If you find yourself deleting one of those inline blocks because "it's in
   as-mic.css already" — that is exactly the reasoning that produced the 83x0
   bug. Leave it.

   -----------------------------------------------------------------------------
   USE

     <link rel="stylesheet" href="/as-mic.css">
     <div class="as-mic-wrap">
       <button class="as-mic" id="mic">🎙️</button>
       <div class="as-mic-label">Tap and read it aloud</div>
       <div class="as-mic-hint">Read the whole sentence, then tap Stop.</div>
     </div>

   STATES — idle -> recording -> processing, and nothing else.
     idle        (no class)                  brand gradient disc
     recording   .is-rec                     red disc, pulsing ring, ⏹ glyph
     processing  .is-busy or [disabled]      dimmed, no animation, not clickable

   The recording state also answers to .rec, .on, .live and .recording, because
   five pages already spell it five different ways in JS that also runs scoring
   and funnel routing. Renaming those variables to tidy the CSS would mean
   touching scoring code for a paint job. Accepting the aliases costs one line
   and touches nothing.

   SIZES
     .as-mic            110px  the default — a mic that is the point of the page
     .as-mic--md         92px  a mic sharing space with a result card
     .as-mic--sm         64px  a mic in a row beside a "or type instead" box
   Below 64px it stops reading as the signature control, so there is no --xs.

   Same-origin, no imports, no webfonts — safe behind the GFW like everything
   else here.
   ============================================================================= */

/* ---------------------------------------------------------------- the disc */
.as-mic{
  -webkit-appearance:none;appearance:none;
  position:relative;
  display:grid;place-items:center;
  width:110px;height:110px;
  flex:0 0 auto;                      /* never let a flex row squash it */
  padding:0;margin:0;
  border:none;border-radius:50%;
  font-size:42px;line-height:1;
  color:#fff;
  background:linear-gradient(120deg,#0ea5e9,#8b5cf6 52%,#ec4899);
  box-shadow:0 16px 40px -12px #8b5cf6;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.as-mic:active{transform:scale(.95)}
.as-mic:focus-visible{outline:3px solid #8b5cf6;outline-offset:4px}

/* --------------------------------------------------------------- recording */
/* Red is the stop affordance. The glyph is swapped by each page's JS (⏹), so
   the colour has to carry the meaning on its own for the split second before. */
.as-mic.is-rec,
.as-mic.rec,
.as-mic.on,
.as-mic.live,
.as-mic.recording{
  background:radial-gradient(circle at 50% 38%,#f87171,#b91c1c);
  animation:asMicPulse 1.25s infinite;
}
@keyframes asMicPulse{
  0%  {box-shadow:0 0 0 0    rgba(239,68,68,.34)}
  70% {box-shadow:0 0 0 24px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0    rgba(239,68,68,0)}
}

/* -------------------------------------------------------------- processing */
/* Scoring a recording takes a couple of seconds against Azure. The button has
   to look busy AND refuse a second tap, or students double-submit and the
   second blob overwrites the first. */
.as-mic.is-busy,
.as-mic[disabled]{
  opacity:.6;cursor:default;animation:none;
  box-shadow:0 16px 40px -12px rgba(139,92,246,.35);
}
.as-mic.is-busy{pointer-events:none}

/* ------------------------------------------------------------------ sizes */
.as-mic--md{width:92px;height:92px;font-size:36px}
.as-mic--sm{width:64px;height:64px;font-size:26px;box-shadow:0 10px 26px -10px #8b5cf6}

/* ---------------------------------------------------------- wrap + labels */
.as-mic-wrap{display:flex;flex-direction:column;align-items:center;margin-top:14px}
.as-mic-label{text-align:center;font-weight:800;font-size:15px;margin-top:10px;color:#f4f4fb}
.as-mic-hint{text-align:center;font-size:13px;line-height:1.5;margin-top:6px;max-width:300px;color:#8a8aa2}

/* A mic in a "record or type" row is laid out horizontally, so the labels sit
   beside it rather than under it. */
.as-mic-row{display:flex;align-items:center;gap:14px;margin:12px 0}
.as-mic-row .as-mic-label,
.as-mic-row .as-mic-hint{text-align:left;margin-top:0;max-width:none}

/* --------------------------------------------------------------- a11y/motion */
@media (prefers-reduced-motion:reduce){
  .as-mic{transition:none}
  .as-mic.is-rec,.as-mic.rec,.as-mic.on,.as-mic.live,.as-mic.recording{animation:none}
}

/* -----------------------------------------------------------------------------
   LEGACY ALIASES — pages that already had the right button under a local name.
   Listed so that linking this file HARDENS them (the 83x0 lesson) without
   requiring a rename in markup that scoring code also reads.

   Deliberately geometry-only: no colour, no size. Those pages set their own,
   and this must not fight them — it is the floor, not the paint. Anything that
   is still square or collapsed after this is a page that never had the mic.
   -------------------------------------------------------------------------- */
.micbtn,.recbtn,.pr-recbtn{
  border-radius:50%;
  display:grid;place-items:center;
  padding:0;line-height:1;
  border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}