/* VX-VOICE. The mute control. One treatment, on six exercises.
 *
 * One stylesheet for all of them, and for all three pages that carry one, for
 * the same reason appts-shell.css exists: a control written per page is a
 * control that disagrees with itself by the third revision.
 *
 * Every rule sets background AND color. A button that sets only one inherits
 * the user agent default for the other, which looks fine in light mode and
 * breaks in dark.
 *
 * THERE WERE FOUR. They were compared on /voice-control against four real
 * running pacers, B was chosen, and the study page and the three losing rules
 * (.vx-foot, .vx-line, .vx-chip) were deleted at sign-off rather than left to
 * rot. If you are reading this looking for one of them, that is why it is not
 * here, and VX.button() no longer takes a variant to ask for it with.
 */

.vx-mute {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px;
  font: 500 12.5px/1 var(--body, 'Inter'), system-ui, sans-serif;
  letter-spacing: .01em;
  background: var(--raise, rgba(255,255,255,.055));
  color: var(--ink-2, rgba(243,245,249,.7));
  border: 1px solid var(--hair, rgba(255,255,255,.11));
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease, cubic-bezier(.2,0,0,1)),
              color .2s var(--ease, cubic-bezier(.2,0,0,1)),
              border-color .2s var(--ease, cubic-bezier(.2,0,0,1));
}
.vx-mute:hover {
  background: var(--raise-2, rgba(255,255,255,.085));
  color: var(--ink, #F3F5F9);
  border-color: var(--hair-2, rgba(255,255,255,.19));
}
.vx-mute:active { transform: scale(.97) }
.vx-mute:focus-visible {
  outline: 2px solid var(--secondary-soft, #E0568A);
  outline-offset: 2px;
}
.vx-mute .vx-i { display: grid; place-items: center; width: 18px; height: 18px; flex: none }

/* Speaking. Teal, not magenta: this is live system state, not the primary
   action. Magenta stays the thing you came to press. */
.vx-mute[aria-pressed="true"] {
  background: color-mix(in srgb, var(--teal, #00A499) 16%, transparent);
  color: var(--teal-soft, #4FD1C7);
  border-color: color-mix(in srgb, var(--teal, #00A499) 38%, transparent);
}
.vx-mute[aria-pressed="true"]:hover {
  background: color-mix(in srgb, var(--teal, #00A499) 24%, transparent);
  color: var(--teal-soft, #4FD1C7);
  border-color: color-mix(in srgb, var(--teal, #00A499) 52%, transparent);
}

/* THE TREATMENT. Icon-only, absolute, sitting on the exercise itself.
 *
 * IT IS CALLED "ORB" BECAUSE THAT IS WHERE IT WAS BORN, and two of the six
 * exercises it now ships on genuinely are circles: /help-now's breathing
 * circle and the coach's paced breathing. The other four have no circular
 * mover at all -- the coach's urge wave is a chart, its ten minutes is a
 * countdown card, /help-now's ride-it-out is a progress card and /naloxone's
 * rescue rail is a step card. What was actually chosen was the ARGUMENT, not
 * the geometry: no added chrome, icon-only, on the exercise rather than in a
 * foot row of text buttons where it read as a third action and took width off
 * the two real ones. So the same treatment goes on all six, and the four that
 * are not circles say where in their own stylesheets.
 *
 * WHAT THIS RULE DOES NOT DO IS REACH INTO A HOST. Every host sets
 * position:relative on ITSELF, next to its own layout, because a `.parent > *`
 * rule in another stylesheet deciding position for a component that owns its
 * own is precisely how this codebase produced a stray panel mid-screen.
 *
 * THE DEFAULT OFFSETS ARE PERCENTAGES OF THE CIRCLE, not pixels, because the
 * orb is 190px on a full pacer (/help-now) and 148px on a compact one (the
 * companion) and a pixel inset that sits on the arc at one size sits off it at
 * the other. 7% puts the 36px control's centre on the 45 degree line and
 * INSIDE the edge at both: measured on the deployed page, 9px inside the arc
 * at 148 and 5px inside at 190. 5% was tried first and measured 5px inside at
 * 148 but half a pixel OUTSIDE at 190, which is the size the crisis page
 * actually renders. The upper right is the part of a circle a right thumb
 * reaches without covering the count in the middle.
 *
 * A percentage is meaningless on a box that is not square, so the four
 * non-circular hosts each override top/right (or bottom/right) in px against
 * `.their-class .vx-orb`, which names the component rather than being a bare
 * descendant selector. See hn.css, cx.css and nx.css. */
.vx-orb {
  position: absolute; top: 7%; right: 7%; z-index: 2;
  padding: 8px; gap: 0;
  background: var(--glass, rgba(24,31,48,.62));
  color: var(--ink-2, rgba(243,245,249,.7));
  -webkit-backdrop-filter: var(--blur, saturate(180%) blur(26px));
  backdrop-filter: var(--blur, saturate(180%) blur(26px));
}
.vx-orb .vx-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }

@media (prefers-reduced-motion: reduce) {
  .vx-mute { transition: none }
  .vx-mute:active { transform: none }
}