/* Extraction wizard (extract-wizard.js). Everything scoped under .xw; tokens from base.css. */
.xw { max-width: 92rem; margin: 0 auto; display: grid; gap: 1.25rem; }
.xw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-right: 5rem; }
.xw-h { margin: 0; font-size: clamp(2.25rem, 5vw, 4rem); line-height: .95; }
.xw-steps { display: flex; gap: 1rem; }
.xw-steps span { display: flex; align-items: center; gap: .4rem; color: var(--grey-3); }
.xw-steps i { width: 1.75rem; height: .375rem; border-radius: 99px; background: var(--faint); }
.xw-steps .on { color: var(--ink); } .xw-steps .on i { background: var(--ink); }
.xw-steps .cur { color: var(--red); } .xw-steps .cur i { background: var(--red); }

.xw-pick { padding: 2rem; max-width: 40rem; display: grid; gap: 1.25rem; justify-items: start; }
.xw-lead { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.xw-busy { display: flex; align-items: center; gap: .6rem; margin: 0; }
.xw-pulse { width: .5rem; height: .5rem; border-radius: 50%; background: var(--red); animation: xw-blink 1s ease-in-out infinite; }
@keyframes xw-blink { 50% { opacity: .2; } }
.xw-err { margin: 0; padding: .625rem 1rem; border: 1.5px solid var(--red); border-radius: 1rem; background: var(--red-pale); color: var(--ink); overflow-wrap: anywhere; }

.xw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .xw-grid { grid-template-columns: 1fr; } }
.xw-stage { padding: .75rem; display: grid; gap: .625rem; border-radius: 1.5rem; }
.xw-frame { border-radius: 1rem; overflow: hidden; background: #000; line-height: 0; }
.xw-canvas { display: block; width: 100%; height: auto; transition: opacity .15s; touch-action: none; }
.xw-canvas.loading { opacity: .6; }
.xw-canvas.picking { cursor: crosshair; }
.xw-scrubrow { display: flex; align-items: center; gap: .375rem; }
.xw-scrub { flex: 1; min-width: 0; appearance: none; background: transparent; height: 1.375rem; margin: 0 .25rem; cursor: pointer; }
.xw-scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--grey-1); }
.xw-scrub::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; margin-top: -6px; border-radius: 50%; background: var(--ink); border: 2px solid var(--panel); }
.xw-scrub:active::-webkit-slider-thumb { background: var(--red); }
.xw-time { min-width: 5.5rem; text-align: right; }

.xw-side { display: grid; gap: .875rem; }
.xw-sect { display: grid; gap: .5rem; padding: .875rem 1rem; border: var(--line); border-radius: 1.25rem; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.xw-sect h2 { margin: 0; font-size: .625rem; color: var(--grey-3); }
.xw-title { width: 100%; }
.xw-kv { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .5rem; }
.xw-kv b { font-weight: 500; color: var(--ink); }
.xw-hands { display: grid; gap: .5rem; justify-items: start; }
.xw-hand { display: grid; grid-template-columns: 1.75rem 3.5rem auto; align-items: center; gap: .5rem; }
.xw-sw { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: var(--line); }
.xw-sw.none { background: repeating-linear-gradient(45deg, var(--faint) 0 3px, transparent 3px 6px) !important; }
.xw-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.xw-check input { accent-color: var(--red); width: 1rem; height: 1rem; }
.xw-hint { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--grey-3); }
.xw-go { justify-content: space-between; }

.xw-job { position: relative; overflow: hidden; border-radius: 1.75rem; max-width: 48rem; }
.xw-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--red-pale), color-mix(in srgb, var(--red) 45%, transparent)); transition: width .4s ease; }
.xw-job-in { position: relative; padding: 1.25rem 1.5rem; display: grid; gap: .625rem; }
.xw-job-title { font: 800 1.875rem/1 var(--f-title); letter-spacing: -.035em; text-transform: uppercase; overflow-wrap: anywhere; }
.xw-pct { font-size: 1.75rem; }
.xw-msg { margin: 0; min-height: 1.2em; color: var(--grey-3); }
@media (prefers-reduced-motion: reduce) { .xw-pulse { animation: none; } .xw-fill { transition: none; } }