/* The recorder in Quiet — Palette B-Purple. Same tokens as the form, so it
   reads as part of the page rather than a widget bolted onto it. */
.vmount{margin-top:10px}
.v-box{border:0;border-radius:20px;padding:18px 20px;background:var(--card)}
.v-center{text-align:center}
.v-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.v-center-row{justify-content:center}
.v-head{margin-top:0;gap:12px}

.vmount button{font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.3px;
  cursor:pointer;border:0;border-radius:999px;padding:12px 20px;min-height:48px;
  background:var(--surface);color:var(--ink)}
.vmount button:hover:not(:disabled){opacity:.85}
.vmount button:disabled{opacity:.38;cursor:not-allowed}
.vmount .v-start{min-height:56px;width:100%;justify-content:center;
  background:var(--accent-soft);color:var(--accent);font-size:16px}
.vmount .v-primary{background:var(--ink);color:#fff}
.vmount .v-quiet{background:transparent;color:var(--grey)}
.vmount .v-quiet:hover{background:var(--surface)}
.vmount .v-danger{background:var(--alert);color:#fff}

.v-dot{width:10px;height:10px;border-radius:999px;background:var(--divider);flex:none}
.v-dot.live{background:var(--alert);animation:vpulse 1.4s infinite}
@keyframes vpulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.v-dot.live{animation:none}}
.v-clock{font-size:22px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.v-cap{color:var(--faint);font-size:13px;letter-spacing:-.13px}
.v-meter{display:inline-block;width:72px;height:6px;border-radius:999px;background:var(--divider);overflow:hidden;vertical-align:middle}
.v-meter>span{display:block;height:100%;width:0;background:var(--good);transition:width .06s linear}
.v-meter.warn>span{background:var(--alert)}
.v-heard{font-size:13px;color:var(--faint);white-space:nowrap;letter-spacing:-.13px}
.v-heard.on{color:var(--good);font-weight:600}
.v-note{font-size:15px;color:var(--grey);line-height:1.4;letter-spacing:-.15px;margin-top:10px}
.v-tiny{font-size:12.5px;color:var(--faint);margin-top:4px;letter-spacing:-.12px}
.v-ok{color:var(--good);font-weight:600;font-size:15px}
.v-count{font-size:64px;font-weight:600;line-height:1;letter-spacing:-1.2px;color:var(--accent);margin:4px 0 2px}
.v-bar{height:4px;border-radius:999px;background:var(--divider);overflow:hidden;margin:12px 0 2px}
.v-bar>i{display:block;height:100%;width:35%;background:var(--accent);border-radius:999px;animation:vslide 1.1s ease-in-out infinite}
@keyframes vslide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.v-alert{font-size:14.5px;border-radius:14px;padding:12px 14px;margin-top:12px;line-height:1.4;letter-spacing:-.14px}
.v-alert.red{color:var(--alert);background:var(--error-soft)}
.v-alert.amber{color:#7a5212;background:#fbf3e2}
.vmount audio{width:100%;margin-top:12px;height:38px}

/* The TEST banner this styles was removed on 2026-10-25 when the form
   got its real domain (infointake.stoicphysique.com). The rule stays so a
   future staging copy can put the bar back with one line of HTML. */
.testbar{position:sticky;top:0;z-index:99;background:var(--ink);color:#fff;font-size:12px;
  font-weight:500;text-align:center;padding:9px 16px;letter-spacing:.06em}
@media(max-width:480px){.vmount button{padding:13px 18px}}
// repo-deploy probe 2026-10-21T10:01:08Z