/* Vivid Survey: three quick questions, no typing.
   ---------------------------------------------------------------------------
   Mark, 2026-10-24: "a nice vivid User survey control? no text input just 3
   quick questions, its a form", then "we can put it on all the pages, not too
   much in a users face but easy to see".

   SHAPE. One quiet line that opens in place. Inside, one question at a time,
   each answered with one tap on a pill; the third tap sends it. Without script
   the same form shows all three questions and a Send button, so it always works.

   TOKENS, NEVER VALUES (charter rule 1): NO HEX IN THIS FILE. --vv-ink,
   --vv-ink-soft, --vv-ink-strong, --vv-line, --vv-surface, --vv-surface-alt,
   --vv-accent and --vv-radius come from the consumer (website/css/vivid-theme.css
   on senserva.com). The accent is a rule and a ring here, never a fill wash. */

.vv-survey{max-width:760px;margin:0 auto 40px;font-size:.9rem;color:var(--vv-ink)}
.vv-survey-box{border:1px solid var(--vv-line);border-left:3px solid var(--vv-accent);
  border-radius:var(--vv-radius,12px);background:var(--vv-surface)}
.vv-survey-box>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;padding:12px 16px;color:var(--vv-ink-soft)}
.vv-survey-box>summary::-webkit-details-marker{display:none}
.vv-survey-box>summary b{color:var(--vv-ink-strong,var(--vv-ink));font-weight:700}
.vv-survey-box>summary .vv-survey-go{margin-left:auto;color:var(--vv-accent);font-weight:700}
.vv-survey-box[open]>summary .vv-survey-go{visibility:hidden}
.vv-survey-box>summary:hover b,.vv-survey-box>summary:focus-visible b{text-decoration:underline;
  text-decoration-color:var(--vv-accent);text-underline-offset:3px}
.vv-survey-body{padding:2px 16px 16px}
.vv-survey-q{border:0;margin:0 0 12px;padding:0;min-width:0}
.vv-survey-q legend{padding:0;margin:0 0 8px;font-weight:700;color:var(--vv-ink-strong,var(--vv-ink))}
.vv-survey-q legend .vv-survey-n{color:var(--vv-ink-soft);font-weight:500;margin-right:6px}
.vv-survey-opts{display:flex;flex-wrap:wrap;gap:8px}
.vv-survey-opt{position:relative}
.vv-survey-opt input{position:absolute;opacity:0;width:1px;height:1px}
.vv-survey-opt span{display:inline-block;padding:7px 14px;border:1px solid var(--vv-line);
  border-radius:999px;background:var(--vv-surface-alt,var(--vv-surface));color:var(--vv-ink);
  cursor:pointer;transition:border-color .12s,color .12s}
.vv-survey-opt span:hover{border-color:var(--vv-accent)}
.vv-survey-opt input:focus-visible+span{outline:2px solid var(--vv-accent);outline-offset:2px}
.vv-survey-opt input:checked+span{border-color:var(--vv-accent);color:var(--vv-ink-strong,var(--vv-ink));
  font-weight:700;box-shadow:inset 0 0 0 1px var(--vv-accent)}
.vv-survey-send{padding:7px 18px;border-radius:999px;border:1px solid var(--vv-accent);
  background:transparent;color:var(--vv-ink-strong,var(--vv-ink));font:inherit;font-weight:700;cursor:pointer}
.vv-survey-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--vv-ink-soft);font-size:.8rem}
.vv-survey-done{margin:0;padding:12px 16px;color:var(--vv-ink)}
.vv-survey-done b{color:var(--vv-ink-strong,var(--vv-ink))}
/* With script: one question at a time, and the third tap sends, so no Send button. */
.vv-survey.is-live .vv-survey-q:not(.is-current){display:none}
.vv-survey.is-live .vv-survey-send{display:none}
.vv-survey [hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){.vv-survey-opt span{transition:none}}