/* =====================================================================
   Product labs (js/discovery/discovery-lab.js)
   The frame is the Crossing's own interface (umber slate, brass seam,
   stencil names); inside the browser window is the product's own look,
   which each lab brings in its css. The spotlight dims everything but the
   part being explained; the coach card is the instructor's slate.
   ===================================================================== */
html.vl-open, html.vl-open body { overflow: hidden; }
.vl-root {
    --ink: #120d0a; --deep: #1b1510; --raised: #2a2019; --selected: #3a2b18;
    --line: #3a2e24; --line2: #4a3b2e; --bone: #efe6d2; --soft: #d3c8b1; --dust: #937f6b;
    --brass: #d9a441; --rust: #b4462a; --good: #9cc48a; --bad: #e3735a;
    --seam: inset 3px 0 0 var(--brass), inset 4px 0 0 rgba(18, 13, 10, .6);
    position: fixed; inset: 0; z-index: 2147482000;
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    background: radial-gradient(1200px 600px at 30% -10%, rgba(217, 164, 65, .07), transparent 60%), #0d0906;
    color: var(--bone); font-family: 'Sora', system-ui, sans-serif; font-size: 14px; line-height: 1.5;
    animation: vl-in .22s ease-out;
}
@keyframes vl-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.vl-root * { box-sizing: border-box; }
.vl-root :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.vl-root [hidden] { display: none !important; }
.vl-ico { width: 17px; height: 17px; flex: none; }
.vl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Top: the instructor, progress, voice, book, close ── */
.vl-top {
    display: flex; align-items: center; gap: 18px; min-height: 62px; padding: 8px 16px 8px 14px;
    background: rgba(27, 21, 16, .96); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
.vl-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.vl-portrait { width: 40px; height: 50px; object-fit: cover; object-position: 50% 18%; border-radius: 3px; border: 1px solid var(--line2); box-shadow: 0 0 0 2px rgba(217, 164, 65, .25); background: var(--raised); flex: none; }
.vl-portrait.is-standin { display: inline-grid; place-items: center; font-family: 'Big Shoulders Stencil Display', 'Sora', sans-serif; font-weight: 700; font-size: 22px; color: var(--brass); }
.vl-who-name { margin: 0; font-family: 'Big Shoulders Stencil Display', 'Sora', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .02em; line-height: 1; color: var(--bone); white-space: nowrap; }
.vl-who-what { margin: 3px 0 0; font-size: 12.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-prog { flex: 1 1 auto; max-width: 360px; margin-left: auto; }
.vl-prog-text { margin: 0 0 5px; font-size: 12.5px; color: var(--soft); text-align: right; }
.vl-prog-bar { height: 4px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.vl-prog-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b98a33, var(--brass)); transition: width .35s ease; }
.vl-top-actions { display: flex; gap: 6px; flex: none; }
.vl-hbtn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 12px; cursor: pointer;
    background: var(--raised); border: 1px solid var(--line); border-radius: 3px; color: var(--soft);
    font: 600 13px/1 'Sora', system-ui, sans-serif;
}
.vl-hbtn:hover { background: var(--selected); color: var(--bone); box-shadow: inset 3px 0 0 var(--rust); }
.vl-hbtn[aria-pressed="true"] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--brass); }
.vl-kbd { font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--dust); }

/* ── Main: the window (and the task tray under it), the book beside ── */
.vl-main { display: grid; grid-template-columns: minmax(0, 1fr) 0; min-height: 0; transition: grid-template-columns .25s ease; }
.vl-root.has-dock .vl-main { grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 420px); }
.vl-stagecol { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-width: 0; min-height: 0; padding: 12px 12px 12px 14px; }
.vl-dock { min-width: 0; min-height: 0; overflow: hidden; padding: 12px 12px 12px 0; }
.vl-root:not(.has-dock) .vl-dock { visibility: hidden; padding: 0; }
.vl-dock .bk { height: 100%; }

.vl-window { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; border-radius: 9px; overflow: hidden; background: #1a1d22; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 18px 50px rgba(0, 0, 0, .6); }
.vl-chrome { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 6px 12px; background: #24272d; border-bottom: 1px solid rgba(0, 0, 0, .45); }
.vl-dots { display: inline-flex; gap: 6px; flex: none; }
.vl-dots i { width: 11px; height: 11px; border-radius: 50%; background: #4a4d55; }
.vl-dots i:first-child { background: #b4462a; }
.vl-dots i:nth-child(2) { background: #d9a441; }
.vl-dots i:nth-child(3) { background: #6d8a5a; }
.vl-address { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 13px; background: #16181c; color: #b8bcc6; font: 500 12.5px/1 'IBM Plex Mono', ui-monospace, monospace; }
.vl-lock { width: 13px; height: 13px; color: #8fb07a; }
.vl-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-badge { flex: none; font-size: 11.5px; color: #c9b27a; padding: 3px 9px; border: 1px solid rgba(217, 164, 65, .35); border-radius: 10px; white-space: nowrap; }

.vl-viewport { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; background: #0f1114; }
.vl-viewport.is-scroll { overflow: auto; place-items: start; }
.vl-sizer { position: relative; }
.vl-scaler { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vl-app { position: relative; overflow: hidden; overflow: clip; }
.vl-app .vl-ghost { position: absolute; z-index: 50; pointer-events: none; opacity: .92; transform: translate(-50%, -50%) rotate(-1.5deg); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.vl-broken { margin: 40px; color: #f3b3a5; font-size: 18px; }

/* ── Spotlight and the coach card ── */
.vl-halo {
    position: absolute; z-index: 60; pointer-events: none; border-radius: 6px;
    box-shadow: 0 0 0 2px var(--brass), 0 0 0 6px rgba(217, 164, 65, .25), 0 0 0 100vmax rgba(10, 7, 4, .52);
    transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease;
}
.vl-coach {
    position: absolute; z-index: 61; width: min(330px, calc(100% - 16px)); padding: 13px 14px 12px 17px;
    background: rgba(27, 21, 16, .97) url(/assets/discovery/ui/ui-slate.webp) 0 0 / 384px 384px; border: 1px solid var(--line); border-radius: 3px;
    box-shadow: var(--seam), 0 14px 34px rgba(0, 0, 0, .55); color: var(--bone);
    transition: left .28s ease, top .28s ease;
}
.vl-coach-step { margin: 0 0 3px; font-size: 11.5px; color: var(--dust); }
.vl-coach-title { margin: 0 0 6px; font-family: 'Big Shoulders Stencil Display', 'Sora', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .02em; line-height: 1.05; color: var(--bone); }
.vl-say { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--soft); }
.vl-s { transition: color .2s ease, background .2s ease; border-radius: 2px; }
.vl-s.is-said { color: var(--bone); background: rgba(217, 164, 65, .16); box-shadow: 0 0 0 2px rgba(217, 164, 65, .16); }
.vl-doit { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 7px 9px; border-radius: 3px; background: rgba(217, 164, 65, .1); border: 1px solid rgba(217, 164, 65, .28); color: var(--bone); font-size: 13.5px; font-weight: 600; }
.vl-doit .vl-ico { color: var(--brass); margin-top: 1px; }
.vl-doit.is-done { background: rgba(156, 196, 138, .12); border-color: rgba(156, 196, 138, .4); }
.vl-doit.is-done .vl-ico { color: var(--good); }
.vl-aside { margin: -2px 0 9px; padding-left: 9px; border-left: 2px solid var(--rust); font-size: 13.5px; color: var(--bone); }
.vl-coach-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.vl-cbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 12px; cursor: pointer;
    background: var(--raised); border: 1px solid var(--line); border-radius: 3px; color: var(--soft); font: 600 13px/1.1 'Sora', system-ui, sans-serif;
}
.vl-cbtn:hover:not(:disabled) { background: var(--selected); color: var(--bone); }
.vl-cbtn:disabled { opacity: .4; cursor: default; }
.vl-cbtn.is-primary { background: var(--selected); color: var(--bone); box-shadow: inset 3px 0 0 var(--rust); }
.vl-cbtn.is-icon { padding: 6px 8px; }
.vl-cbtn.is-icon .vl-ico { width: 16px; height: 16px; }
.vl-coach-actions .vl-cbtn:first-child { margin-right: auto; }

/* The part being taught gets a brass ring inside the replica too (under the halo). */
.vl-app .vl-target { outline: 2px solid rgba(217, 164, 65, .9) !important; outline-offset: 2px; }

.vl-toasts { position: absolute; z-index: 62; left: 50%; bottom: 14px; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none; }
.vl-toast { padding: 8px 14px; background: rgba(27, 21, 16, .95); border: 1px solid var(--line); border-radius: 3px; box-shadow: inset 3px 0 0 var(--good), 0 8px 22px rgba(0, 0, 0, .5); font-size: 13px; color: var(--bone); }
.vl-toast.is-bad { box-shadow: inset 3px 0 0 var(--bad), 0 8px 22px rgba(0, 0, 0, .5); }

/* ── The tray under the window: the tour, then the task and its checks ── */
.vl-tray {
    display: flex; gap: 18px; align-items: flex-start; min-height: 64px; padding: 12px 14px 12px 18px;
    background: rgba(27, 21, 16, .92); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--seam);
}
.vl-tray-main { flex: 1 1 320px; min-width: 0; }
.vl-tray-kicker { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--brass); }
.vl-tray-line { margin: 0; font-size: 14px; color: var(--bone); }
.vl-tray-side { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.vl-tray-next { margin: 0; font-size: 12.5px; color: var(--dust); max-width: 320px; }
.vl-task-title { margin: 0 0 3px; font-family: 'Big Shoulders Stencil Display', 'Sora', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: .02em; line-height: 1.05; color: var(--bone); }
.vl-task-brief { margin: 0; font-size: 13.5px; color: var(--soft); max-width: 60ch; }
.vl-tray-checks { flex: 1 1 380px; min-width: 0; display: grid; gap: 8px; }
.vl-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.vl-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--soft); }
.vl-check-mark { display: inline-flex; color: var(--dust); }
.vl-check-mark .vl-ico { width: 15px; height: 15px; }
.vl-checks li.is-ok { color: var(--bone); }
.vl-checks li.is-ok .vl-check-mark { color: var(--good); }
.vl-verdict { margin: 0; min-height: 0; font-size: 13.5px; }
.vl-verdict:empty { display: none; }
.vl-verdict.is-bad { color: #f0b2a3; }
.vl-verdict.is-good { color: var(--good); }
.vl-tray-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Passed ── */
.vl-pass-shade { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(10, 7, 4, .6); animation: vl-in .3s ease-out; }
.vl-pass { width: min(460px, calc(100% - 32px)); padding: 22px 22px 16px 26px; background: rgba(27, 21, 16, .98) url(/assets/discovery/ui/ui-slate.webp) 0 0 / 384px 384px; border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--seam), 0 20px 50px rgba(0, 0, 0, .6); }
.vl-seal { display: inline-grid; place-items: center; width: 74px; height: 74px; margin-bottom: 10px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f6dc98 0 14%, var(--brass) 48%, #8a6424 100%); box-shadow: inset 0 0 0 3px rgba(18, 13, 10, .45), 0 6px 16px rgba(0, 0, 0, .5); transform: rotate(-8deg); }
.vl-seal span { font-family: 'Big Shoulders Stencil Display', 'Sora', sans-serif; font-weight: 700; font-size: 18px; color: #3a2a10; letter-spacing: .03em; }
.vl-pass-title { margin: 0 0 10px; font-family: 'Big Shoulders Stencil Display', 'Sora', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--bone); }
.vl-pass-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.vl-pass-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--soft); }
.vl-pass-list .vl-ico { color: var(--good); margin-top: 2px; }

/* ── Narrow screens ── */
@media (max-width: 1180px) {
    .vl-root.has-dock .vl-main { grid-template-columns: minmax(0, 1fr); }
    .vl-root.has-dock .vl-dock { position: absolute; z-index: 80; top: 62px; right: 0; bottom: 0; width: min(420px, 100%); padding: 10px; background: rgba(13, 9, 6, .96); box-shadow: -12px 0 30px rgba(0, 0, 0, .6); }
}
@media (max-width: 760px) {
    .vl-top { gap: 10px; padding: 6px 8px; min-height: 54px; flex-wrap: wrap; }
    .vl-who-what { display: none; }
    .vl-prog { order: 5; flex-basis: 100%; max-width: none; margin: 0; }
    .vl-prog-text { text-align: left; }
    .vl-hbtn .vl-hlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .vl-hbtn .vl-kbd { display: none; }
    .vl-hbtn.vl-close::before { content: '\2715'; font-size: 15px; }   /* named by aria-label */
    .vl-stagecol { padding: 6px; gap: 6px; }
    .vl-badge { display: none; }
    .vl-tray { flex-wrap: wrap; gap: 8px; padding: 10px 10px 10px 14px; }
    .vl-tray-side { margin-left: 0; }
    .vl-tray-next { display: none; }
    .vl-root.has-dock .vl-dock { top: 54px; }
}
@media (pointer: coarse) { .vl-cbtn, .vl-hbtn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
    .vl-root, .vl-pass-shade { animation: none; }
    .vl-halo, .vl-coach, .vl-prog-bar span, .vl-main { transition: none; }
}
/* Settings > Motion > Reduce motion in the game (discovery-app.js sets html.dq-still) */
html.dq-still .vl-root, html.dq-still .vl-pass-shade { animation: none; }
html.dq-still .vl-halo, html.dq-still .vl-coach, html.dq-still .vl-prog-bar span, html.dq-still .vl-main { transition: none; }