/* 2.52.0: Your own voice (voice-clone.js): the consent, the guided reading, the voice and the admin's settings */
.vc-app { --vc: var(--accent); --vc-ok: #059669; --vc-warn: #B45309; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.vc-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vc-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vc-card-head { display: flex; align-items: flex-start; gap: 12px; }
.vc-card-head > div { flex: 1; min-width: 0; }
.vc-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--vc); background: color-mix(in srgb, var(--vc) 12%, var(--panel)); }
.vc-ico.ok { color: var(--vc-ok); background: color-mix(in srgb, var(--vc-ok) 12%, var(--panel)); }

/* how it works */
.vc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vc-steps li { display: flex; gap: 10px; align-items: flex-start; }
.vc-steps p { margin: 2px 0 0; line-height: 1.5; }
.vc-step-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--accent-soft, color-mix(in srgb, var(--vc) 14%, var(--panel))); color: var(--vc); font-size: 12.5px; font-weight: 700; }
.vc-step-ico { color: var(--vc); vertical-align: -2px; }
.vc-safe { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.vc-safe li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.vc-safe li .ico { flex: none; margin-top: 3px; color: var(--vc); }

/* what it needs */
.vc-needs { border: 1px dashed color-mix(in srgb, var(--vc-warn) 45%, var(--line)); background: color-mix(in srgb, var(--vc-warn) 5%, var(--panel)); }
.vc-needs h2 { display: flex; align-items: center; gap: 6px; color: var(--vc-warn); }
.vc-off p { display: flex; align-items: center; gap: 6px; }

/* the consent */
.vc-consent-text { margin: 0; padding: 14px 16px; border-radius: 12px; border-inline-start: 4px solid var(--vc); background: color-mix(in srgb, var(--vc) 6%, var(--panel)); line-height: 1.7; font-size: 14.5px; }
.vc-agree { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; cursor: pointer; line-height: 1.5; }
.vc-agree input { margin-top: 3px; inline-size: 18px; block-size: 18px; flex: none; accent-color: var(--vc); }
.vc-agree.small { font-weight: 400; }

/* the reading */
.vc-progress { display: flex; flex-direction: column; gap: 4px; }
.vc-meter { position: relative; height: 10px; border-radius: 999px; background: var(--sunk); overflow: visible; max-width: 520px; }
.vc-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--vc) 70%, var(--panel)), var(--vc)); transition: inline-size .3s ease; }
.vc-meter i { position: absolute; top: -3px; bottom: -3px; inline-size: 2px; border-radius: 2px; background: var(--ink); opacity: .35; }
.vc-meter.thin { height: 6px; margin: 8px 0 4px; max-width: 260px; overflow: hidden; }
.vc-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vc-part { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); transition: border-color .2s, box-shadow .2s; }
.vc-part.done { border-color: color-mix(in srgb, var(--vc-ok) 35%, var(--line)); }
.vc-part.live { border-color: #DC2626; box-shadow: 0 0 0 3px color-mix(in srgb, #DC2626 15%, transparent); }
.vc-part-head { display: flex; align-items: center; gap: 8px; }
.vc-part-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sunk); color: var(--muted); }
.vc-part.done .vc-part-n { background: color-mix(in srgb, var(--vc-ok) 14%, var(--panel)); color: var(--vc-ok); }
.vc-timer { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: #DC2626; font-weight: 600; }
.vc-timer::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: #DC2626; margin-inline-end: 6px; animation: vc-pulse 1.2s ease-in-out infinite; }
@keyframes vc-pulse { 50% { opacity: .3; } }
.vc-lines { font-size: 17px; line-height: 1.75; color: var(--ink); }
.vc-lines p { margin: 0 0 2px; }
.vc-part-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-part-act audio { height: 34px; max-width: 260px; }
.vc-rec { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, #DC2626 35%, var(--line)); background: color-mix(in srgb, #DC2626 8%, var(--panel)); color: #B91C1C; font-weight: 600; cursor: pointer; }
.vc-rec.again { border-color: var(--line); background: var(--panel); color: var(--ink); font-weight: 500; }
.vc-make { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.vc-withdraw { display: flex; justify-content: flex-end; }
.vc-withdraw .danger, .vc-keystate .danger { color: #B91C1C; }

/* the voice */
.vc-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.vc-status.vc-ready { background: color-mix(in srgb, var(--vc-ok) 12%, var(--panel)); color: #047857; }
.vc-status.vc-failed { background: color-mix(in srgb, #DC2626 10%, var(--panel)); color: #B91C1C; }
.vc-status.vc-recording { background: color-mix(in srgb, var(--vc) 10%, var(--panel)); color: var(--vc); }
.vc-hear input { flex: 1; min-width: 0; }
.vc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.vc-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--sunk); }
.vc-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* settings */
.vc-keystate { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--vc-warn); }
.vc-keystate.ok { color: #047857; }
.vc-people { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow: auto; }
.vc-pick { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; }
.vc-pick:has(input:checked) { border-color: var(--vc); background: color-mix(in srgb, var(--vc) 8%, var(--panel)); }
.vc-warn { color: var(--vc-warn); display: flex; gap: 6px; align-items: flex-start; }
.vc-table td.num { font-variant-numeric: tabular-nums; }
.vc-audit summary { cursor: pointer; font-weight: 600; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vc-status.vc-ready, :root:not([data-theme="light"]) .vc-keystate.ok { color: #4ADE80; }
  :root:not([data-theme="light"]) .vc-rec, :root:not([data-theme="light"]) .vc-status.vc-failed, :root:not([data-theme="light"]) .vc-withdraw .danger { color: #F87171; }
  :root:not([data-theme="light"]) .vc-app { --vc-warn: #FBBF24; }
}
:root[data-theme="dark"] .vc-status.vc-ready, :root[data-theme="dark"] .vc-keystate.ok { color: #4ADE80; }
:root[data-theme="dark"] .vc-rec, :root[data-theme="dark"] .vc-status.vc-failed, :root[data-theme="dark"] .vc-withdraw .danger { color: #F87171; }
:root[data-theme="dark"] .vc-app { --vc-warn: #FBBF24; }

@media (max-width: 1100px) {
  .vc-app { grid-template-columns: minmax(0, 1fr); }
  .vc-side { position: static; order: -1; }
}
@media (max-width: 640px) {
  .vc-lines { font-size: 16px; }
  .vc-part-act audio { max-width: 100%; flex-basis: 100%; }
  .vc-hear { flex-wrap: wrap; }
  .vc-hear input { flex-basis: 100%; }
}