/* Voicemaxx voice depth test widget. Scoped under .vt (plus .vt-img for the
   article photos on the same page).
   Look (candidate A "Clean grotesk", 2026-09-26): a white product card on the
   white page, set apart by a hairline (#E5E5E7) and a soft shadow; inner
   plates are neutral #F4F4F5 with a hairline, so no card is a faint wash of
   its ground. Ink #111113 / #3F3F46 / #5E5E66, all Inter (the site heading +
   body fonts). Gold is for action only: the primary button and the chart's
   "You" pill (#C9A876, ink text 9.6:1), dark-gold #7A5418 links. The chart
   runs light grey to mid grey, then warm tan to gold on the deep side, so
   "deeper" reads as gold. The one exception to the palette is the green mic
   monitor (see recording). Owner rules: no light text on dark boxes, nothing
   at 12px or below (body >= 16px, labels >= 15px), no underlines. */

.vt {
  --vt-bg: #FFFFFF;            /* white card, hairline + soft shadow */
  --vt-plate: #F4F4F5;         /* neutral plate (always with a hairline) */
  --vt-paper: #FFFFFF;
  --vt-warn-bg: #FBE7E1;       /* soft terracotta for retry notices + recording badge */
  --vt-warn-line: #F0CFC4;
  --vt-ink: #111113;
  --vt-ink-72: #3F3F46;
  --vt-ink-55: #5E5E66;
  --vt-gold: #7A5418;          /* dark gold for text/links, 7.3:1 on white */
  --vt-gold-fill: #C9A876;     /* brand gold fill, ink text */
  --vt-gold-fill-hi: #D3B587;
  --vt-line: #E5E5E7;
  --vt-line-hi: #D4D4D8;
  --vt-rec: #B3261E;
  --vt-warn: #8A3B1E;
  --vt-live: #1F8A4C;          /* mic monitor: signal green */
  --vt-live-hi: #3DB56E;
  --vt-head: var(--font-heading, inherit);
  /* Chart bands, left (Higher) to right (Bass-deep), plus the "You" pill;
     js/voice-test-chart.js reads these at draw time. */
  --vt-band-1: #DADADF;
  --vt-band-2: #C4C4CB;
  --vt-band-3: #A6A6AF;
  --vt-band-4: #D8B77C;
  --vt-band-5: #B08A45;
  --vt-pill: #C9A876;

  position: relative;
  max-width: 640px;
  margin: 4px auto 24px;
  padding: 20px 16px;
  background: var(--vt-bg);
  border: 1px solid var(--vt-line);
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 1px 2px rgba(17, 17, 19, 0.04), 0 12px 32px -12px rgba(17, 17, 19, 0.12));
  color: var(--vt-ink);
  font-family: var(--font-body, inherit);
  font-size: 17px;
  line-height: 1.5;
}

@media (min-width: 560px) {
  .vt { padding: 28px 32px 26px; }
}

.vt *, .vt *::before, .vt *::after { box-sizing: border-box; }

.vt.vt .vt-screen > * + * { margin-top: 14px; }
.vt-screen.vt-enter { animation: vt-in 0.3s ease-out both; }
@keyframes vt-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.vt .vt-title,
.vt .vt-tier {
  margin: 0;
  font-family: var(--vt-head);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.1;
  color: var(--vt-ink);
  outline: none;
}
.vt .vt-title { font-size: clamp(24px, 1.2rem + 1.2vw, 28px); line-height: 1.15; }
.vt .vt-title--sm { font-size: clamp(21px, 1.1rem + 0.8vw, 24px); }
.vt .vt-tier { font-size: clamp(44px, 2rem + 3vw, 56px); line-height: 1; letter-spacing: -0.035em; }

.vt .vt-lead { margin: 0; color: var(--vt-ink-72); }
.vt .vt-screen > .vt-title + .vt-lead { margin-top: 6px; }

.vt .vt-kicker {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--vt-ink-55);
}

/* ---------- intro questions (native radios, styled) ---------- */

.vt .vt-q {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.vt .vt-q legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--vt-ink);
}
.vt .vt-q__row { display: flex; gap: 8px; }
.vt .vt-q__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.vt .vt-follow { margin-top: 10px; }
.vt .vt-follow[hidden] { display: none; }
.vt .vt-follow__label { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--vt-ink-72); }

/* Space between the widget header and its first question, and between questions. */
.vt .vt-screen > .vt-lead + .vt-q { margin-top: 22px; }
.vt.vt .vt-q + .vt-q { margin-top: 18px; }

.vt .vt-pill { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.vt .vt-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.vt .vt-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--vt-line-hi);
  border-radius: 10px;
  background: var(--vt-paper);
  font-size: 16px;
  font-weight: 500;
  color: var(--vt-ink);
  text-align: center;
  line-height: 1.2;
  transition: background-color 0.15s, border-color 0.15s;
}
.vt .vt-pill--small span { min-height: 44px; font-size: 15px; }
.vt .vt-pill:hover span { border-color: #A1A1AA; background: #FAFAFA; }
/* Selected: neutral fill + ink ring, not a gold chip (gold is for actions). */
.vt .vt-pill input:checked + span {
  background: var(--vt-plate);
  border-color: var(--vt-ink);
  box-shadow: inset 0 0 0 1px var(--vt-ink);
  font-weight: 650;
  color: var(--vt-ink);
}
.vt .vt-pill input:focus-visible + span { outline: 2px solid var(--vt-gold); outline-offset: 2px; }

.vt .vt-err { margin: 0; color: var(--vt-warn); font-size: 16px; font-weight: 600; }
.vt .vt-err[hidden] { display: none; }

/* ---------- buttons ---------- */

.vt .vt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vt .vt-actions .vt-btn { flex: 1 1 160px; }

.vt .vt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.vt .vt-btn:focus-visible { outline: 2px solid var(--vt-gold); outline-offset: 3px; }
.vt .vt-btn:active { transform: scale(0.985); }
.vt .vt-btn:disabled { cursor: default; opacity: 0.55; }
.vt .vt-btn[hidden] { display: none; }

.vt .vt-btn--primary {
  border-color: #BE9B66;
  background: var(--vt-gold-fill);
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: var(--vt-ink);
}
.vt .vt-btn--primary:hover:not(:disabled) { background: var(--vt-gold-fill-hi); }
.vt .vt-btn--secondary {
  border-color: var(--vt-line-hi);
  background: var(--vt-paper);
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.05);
  color: var(--vt-ink);
}
.vt .vt-btn--secondary:hover:not(:disabled) { border-color: #A1A1AA; background: #FAFAFA; }
.vt .vt-btn--ghost { background: transparent; color: var(--vt-ink-72); border-color: var(--vt-line); }
.vt .vt-btn--ghost:hover:not(:disabled) { border-color: var(--vt-line-hi); color: var(--vt-ink); }
.vt .vt-actions--pair .vt-btn { min-height: 46px; padding: 10px 12px; font-size: 16px; flex-basis: 130px; }

/* ---------- notes + callouts ---------- */

.vt .vt-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--vt-ink-55);
}
.vt .vt-note__icon { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--vt-ink-55); }
.vt .vt-note--fine { padding-top: 14px; border-top: 1px solid var(--vt-line); color: var(--vt-ink-55); }

.vt .vt-callout {
  padding: 12px 14px;
  border: 1px solid var(--vt-line);
  border-radius: 10px;
  background: var(--vt-plate);
  font-size: 16px;
  color: var(--vt-ink);
}
.vt .vt-callout--warn { border-color: var(--vt-warn-line); background: var(--vt-warn-bg); }

/* ---------- recording ---------- */

.vt .vt-rec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
.vt .vt-rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--vt-warn-line);
  border-radius: 8px;
  background: var(--vt-warn-bg);
  font-size: 15px;
  font-weight: 600;
  color: var(--vt-ink);
  font-variant-numeric: tabular-nums;
}
.vt .vt-rec__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vt-rec);
  animation: vt-pulse 1.1s ease-in-out infinite;
}
.vt:not(.vt-is-recording) .vt-rec { border-color: var(--vt-line); background: var(--vt-plate); }
.vt:not(.vt-is-recording) .vt-rec__dot { background: var(--vt-ink-55); animation: none; }
@keyframes vt-pulse { 50% { opacity: 0.3; } }

.vt .vt-passage {
  font-family: inherit;
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--vt-plate);
  border: 1px solid var(--vt-line);
  font-size: clamp(1.25rem, 5.2vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--vt-ink);
}
.vt .vt-screen > .vt-rec-head + .vt-passage { margin-top: 12px; }
.vt.vt-is-recording .vt-passage { border-color: #71717A; background: #FFFFFF; box-shadow: 0 0 0 4px #EDEDEF; }

/* Mic monitor: icon + "Mic level" + a green bar. Green is a live-signal
   colour on purpose (it is not part of the page palette) so the bar reads as
   "the mic hears you", not as progress. The icon turns green while there is
   voice (js toggles .is-live). There is no timer bar. */
.vt .vt-mic { display: flex; align-items: center; gap: 10px; }
.vt .vt-mic__icon { flex: none; width: 22px; height: 22px; color: var(--vt-ink-55); transition: color 0.15s; }
.vt .vt-mic.is-live .vt-mic__icon { color: var(--vt-live); }
.vt .vt-mic__label { flex: none; font-size: 15px; font-weight: 600; color: var(--vt-ink-72); }
.vt .vt-meter {
  position: relative;
  flex: 1 1 auto;
  height: 12px;
  border-radius: 6px;
  background: #E4E4E7;
  overflow: hidden;
}
.vt .vt-meter__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vt-live-hi), var(--vt-live));
}
.vt .vt-screen > .vt-mic + .vt-hint { margin-top: 8px; }
.vt .vt-hint { margin: 0; font-size: 16px; color: var(--vt-ink-72); }

/* ---------- analyzing ---------- */

.vt .vt-analyzing { text-align: center; padding: 12px 0; }
.vt .vt-analyzing > * + * { margin-top: 10px; }
.vt .vt-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid #E4E4E7;
  border-top-color: var(--vt-ink);
  border-radius: 50%;
  animation: vt-spin 0.9s linear infinite;
}
@keyframes vt-spin { to { transform: rotate(360deg); } }

/* ---------- result ---------- */

.vt .vt-result-head > * { margin: 0; }
.vt .vt-result-head .vt-tier { margin-top: 2px; }
.vt .vt-pct {
  margin-top: 8px !important;
  font-family: var(--vt-head);
  font-size: clamp(18px, 1rem + 0.5vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--vt-ink-72);
}

.vt .vt-chart { width: 100%; min-height: 174px; margin-top: 22px; }
.vt .vt-chart__svg { display: block; overflow: visible; font-family: inherit; }
.vt .vt-chart__tier { font-size: 15px; font-weight: 500; fill: var(--vt-ink-55); }
.vt .vt-chart__tier.is-mine { font-weight: 650; fill: var(--vt-ink); }
.vt .vt-chart__end { font-size: 15px; font-weight: 500; fill: var(--vt-ink-55); }
.vt .vt-chart__end--deep { fill: var(--vt-gold); font-weight: 600; }
.vt .vt-chart__you-text { font-size: 15px; font-weight: 650; fill: var(--vt-ink); }
.vt .vt-chart__you.is-animated { animation: vt-you 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes vt-you {
  from { transform: translateX(var(--vt-dx, 0)); opacity: 0; }
  30% { opacity: 1; }
}

.vt .vt-steady { margin: 0; font-size: 16px; color: var(--vt-ink-72); }
.vt .vt-steady strong { color: var(--vt-ink); font-weight: 650; }

.vt .vt-tip {
  padding: 14px 16px;
  border: 1px solid var(--vt-line);
  border-radius: 12px;
  background: var(--vt-plate);
  font-size: 16px;
  color: var(--vt-ink);
}
.vt .vt-tip p { margin: 0; }
.vt .vt-tip__label { font-size: 15px; font-weight: 650; color: var(--vt-ink); margin-bottom: 4px !important; }
.vt .vt-tip a { color: var(--vt-gold); font-weight: 600; text-decoration: none; }
.vt .vt-tip a:hover { color: var(--vt-ink); }

/* The app plug: one quiet sentence, no box, no button. */
.vt .vt-more { margin: 0; font-size: 16px; color: var(--vt-ink-72); }
.vt .vt-more a { color: var(--vt-gold); font-weight: 600; text-decoration: none; }
.vt .vt-more a:hover { color: var(--vt-ink); }

/* ---------- article photos on the voice-test page ---------- */

.vt-img,
.prose .vt-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 24px 0;
  border-radius: 12px;
  background: var(--a-panel, #F4F4F5);
}

/* ---------- a11y + motion ---------- */

.vt .vt-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .vt-screen.vt-enter,
  .vt .vt-chart__you.is-animated,
  .vt .vt-rec__dot { animation: none; }
  .vt .vt-spinner { animation-duration: 2.4s; }
  .vt .vt-btn, .vt .vt-pill span { transition: none; }
  .vt .vt-btn:active { transform: none; }
}