/* Skill level quiz (views/skill-quiz.cjs). Two panels: the questions (sport picker, ten skills with four statements
 * each) and the result (band, what to work on, card). Desktop: questions on the left, result sticky on the right.
 * Phone: questions, then the result. A statement is a whole-row tap target (min 48 px) with a hairline border. */
#visu-tools.vt-skill-quiz .vt-sq { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
#visu-tools.vt-skill-quiz .vt-sq [hidden] { display: none !important; }
#visu-tools.vt-skill-quiz .vt-sq-form { display: grid; gap: 14px; align-content: start; }
#visu-tools.vt-skill-quiz .vt-sq-form .vt-seg-items { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
#visu-tools.vt-skill-quiz .vt-sq-pick { font-size: 15.5px; font-weight: 600; color: var(--vt-ink); line-height: 1.45; }
#visu-tools.vt-skill-quiz .vt-sq-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 18px; }
#visu-tools.vt-skill-quiz .vt-sq-list > li { margin: 0; }
#visu-tools.vt-skill-quiz .vt-sq-q { border: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0; display: grid; gap: 6px; }
#visu-tools.vt-skill-quiz .vt-sq-q > legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 8px; font-size: 16px; font-weight: 700; color: var(--vt-ink); }
#visu-tools.vt-skill-quiz .vt-sq-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vt-ink); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
#visu-tools.vt-skill-quiz .vt-sq-q.is-open .vt-sq-n { background: #b45309; }
#visu-tools.vt-skill-quiz .vt-sq-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--vt-line-2); border-radius: 12px; background: #fff; cursor: pointer; font-size: 15px; line-height: 1.4; color: var(--vt-text); }
#visu-tools.vt-skill-quiz .vt-sq-opt:hover { border-color: var(--vt-ink); }
#visu-tools.vt-skill-quiz .vt-sq-opt input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #0670a6; }
#visu-tools.vt-skill-quiz .vt-sq-opt:has(input:checked) { border-color: var(--vt-accent-text); background: #eefaff; color: var(--vt-ink); }
#visu-tools.vt-skill-quiz .vt-sq-opt:has(input:focus-visible) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vt-accent); }

/* Result */
#visu-tools.vt-skill-quiz .vt-sq-result { outline: none; }
#visu-tools.vt-skill-quiz .vt-sq-progress { display: grid; gap: 6px; }
#visu-tools.vt-skill-quiz .vt-sq-progress p { font-size: 13.5px; font-weight: 600; color: var(--vt-muted); font-variant-numeric: tabular-nums; }
#visu-tools.vt-skill-quiz .vt-sq-bar { height: 6px; border-radius: 999px; background: var(--vt-bg); border: 1px solid var(--vt-line); overflow: hidden; }
#visu-tools.vt-skill-quiz .vt-sq-bar span { display: block; height: 100%; width: 0; background: var(--vt-accent); transition: width .2s; }
#visu-tools.vt-skill-quiz .vt-sq-result .vt-big-num { overflow-wrap: anywhere; }
#visu-tools.vt-skill-quiz .vt-sq-text { font-size: 15.5px; line-height: 1.55; color: var(--vt-text); }
#visu-tools.vt-skill-quiz .vt-sq-focus ul { list-style: none; margin: 8px 0 0 !important; padding: 0 !important; display: grid; gap: 8px; }
#visu-tools.vt-skill-quiz .vt-sq-focus li { margin: 0; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--vt-bg); }
#visu-tools.vt-skill-quiz .vt-sq-focus li strong { font-size: 15px; font-weight: 700; color: var(--vt-ink); }
#visu-tools.vt-skill-quiz .vt-sq-focus li span { font-size: 14.5px; line-height: 1.45; color: var(--vt-text); }
#visu-tools.vt-skill-quiz .vt-sq-disclaimer { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--vt-line); background: var(--vt-bg); font-size: 13.5px; line-height: 1.5; color: var(--vt-text); }

@media (max-width: 900px) {
  #visu-tools.vt-skill-quiz .vt-sq { grid-template-columns: minmax(0, 1fr); }
  #visu-tools.vt-skill-quiz .vt-sq-result { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  #visu-tools.vt-skill-quiz .vt-sq-bar span { transition: none; }
}