/* VUI - Talk, Library, From a recording. Colours from the framework's tokens only (light and dark follow them). */
.vu-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vu-pick { flex: 1 1 260px; min-width: 0; position: relative; }
.vu-pick .pk-q { width: 100%; }
.vu-live { display: flex; gap: 14px; align-items: center; }
.vu-mic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); }
.vu-mic[data-on="1"] { background: var(--brand); color: var(--brand-ink); animation: vu-pulse 1.4s var(--ease) infinite; }
@keyframes vu-pulse { 0% { box-shadow: 0 0 0 0 var(--ring); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .vu-mic[data-on="1"] { animation: none; } }
.vu-say { min-width: 0; }
.vu-q { font-size: 1.15rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.vu-type .row input { flex: 1 1 200px; min-width: 0; }
.vu-head { align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vu-head h3 { margin: 0; }
.vu-form { display: grid; gap: 2px; }
.vu-row { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: var(--radius-sm); border: 1px solid transparent; }
.vu-row:nth-child(odd) { background: var(--panel-2); }
.vu-row.vu-asking { border-color: var(--brand); background: var(--brand-soft); }
.vu-lab { color: var(--muted); font-size: .9rem; }
.vu-val { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.vu-st { display: flex; gap: 4px; align-items: center; }
.vu-item { display: flex; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; }
.vu-item:hover, .vu-item:focus-visible { background: var(--panel-2); }
.vu-main { flex: 1 1 auto; min-width: 0; }
.vu-name { font-weight: 600; overflow-wrap: anywhere; }
.vu-name code { font-weight: 400; font-size: .8rem; color: var(--muted); }
.vu-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.vu-sp { flex: 1 1 auto; }
.vu-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.vu-checks .tag { cursor: pointer; }
.vu-el { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 4px; background: var(--panel); }
.vu-el > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vu-grip { color: var(--faint); }
.vu-tests { width: 100%; border-collapse: collapse; }
.vu-tests th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 500; }
.vu-tests td { padding: 3px 4px; }
.vu-tests input:not([type="checkbox"]) { width: 100%; }
@media (max-width: 560px) {
  .vu-row { grid-template-columns: 1fr auto; }
  .vu-lab { grid-column: 1 / -1; }
  .vu-item { flex-wrap: wrap; }
  .vu-tags { justify-content: flex-start; }
}
.modal .grid.two { align-items: start; }
#vl-tabs { align-items: center; }
@media (max-width: 560px) {
  #vl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #vl-tabs > * { flex: 0 0 auto; }
  #vl-tabs .vu-sp { flex: 1 0 8px; }
}