/* ══════════════════════════════════════════════════════════════════════════
   STARKOS. THE MICROPHONE. DICTATE ROW 2. One control, one stylesheet.
   ══════════════════════════════════════════════════════════════════════════

   MASTER-PLAN-2 section 10 ROW 2 asks for ONE shared control on three screens.
   Two of those screens style themselves in two different places (the chat bar
   is inline in dashboard.html, the conversation is css/onboard-talk.css), so a
   button copied into both is a button that drifts apart. This file is linked
   by both pages and is the only place the microphone has a size, a border or
   a ring.

   ── THE LEVEL METER IS TRANSFORM AND OPACITY, NOTHING ELSE ────────────────

   HOUSE-RULES: animate only `transform` and `opacity`, never width, height,
   top, left or margin. js/mic.js writes ONE number onto the button,
   `--mic-level`, from 0 to 1, once a frame off an AnalyserNode. Everything
   below is that number turned into a scale and an alpha. No hex at a call
   site: the ring wears `--accent`, which is the member's own picked colour,
   and the accent is allowed here because a recording button is a control in
   its pressed and active state, which is exactly what CLAUDE.md's colour law
   reserves the accent for.

   ── AND UNDER prefers-reduced-motion IT HOLDS STILL ───────────────────────

   js/mic.js does not even start the meter loop there, so `--mic-level` stays
   at its declared 0 and the ring is one steady state. The rule at the foot is
   the belt to that braces: a future edit that starts the loop anyway still
   cannot make anything move.
   ══════════════════════════════════════════════════════════════════════════ */

.mic {
  /* 44px, the standing floor for anything tappable. */
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  /* The resting level, so the ring has a number before a frame has run. */
  --mic-level: 0;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.mic svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: block;
}

.mic:active { transform: scale(0.96); }
.mic[disabled] { opacity: 0.35; cursor: default; }
.mic[disabled]:active { transform: none; }

.mic:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── RECORDING ───────────────────────────────────────────────────────────
   The button fills with the accent and the glyph becomes a hole in it, which
   is what css/onboard-talk.css already did for the recogniser button this
   replaces. Same look, one owner. */
.mic.is-recording {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* ── THE STEEL LIGHT ─────────────────────────────────────────────────────
   One ring outside the button, its size and its alpha both read off
   `--mic-level`. At rest it is invisible and exactly the button's size, so
   nothing shows through a layout that has not started recording. */
.mic-ring {
  position: absolute;
  inset: -4px;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  /* Short, because the ear hears a consonant land before the eye sees it and
     a slow ring reads as a lag in the microphone rather than a smoothing. */
  transition: transform 80ms linear, opacity 80ms linear;
}

.mic.is-recording .mic-ring {
  /* 0.94 at silence to 1.26 at the top of the meter, and 0.25 to 0.85 alpha.
     Both floors are non zero on purpose: while he is recording the ring is
     always visible, so a quiet room reads as "listening and hearing little"
     rather than as "off". */
  transform: scale(calc(0.94 + (var(--mic-level) * 0.32)));
  opacity: calc(0.25 + (var(--mic-level) * 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .mic { transition: none; }
  .mic:active { transform: none; }
  .mic-ring { transition: none; }
  .mic.is-recording .mic-ring { transform: scale(1.06); opacity: 0.7; }
}