/* Live session (plan note 61): the setup page uses the site's classes; this file adds the set picker, the projector stage
   (live/index.html) and the phone screens (live/join.html). Tokens come from site.css, with fallbacks. */
.lv-sets{display:grid;gap:var(--s-3,12px);margin:0;padding:0;border:0}
@media (min-width:760px){.lv-sets{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4,16px)}}
.lv-set{position:relative;display:grid;align-content:start;gap:6px;padding:var(--s-5,20px);border-radius:var(--r-l,20px);background:var(--surface,#fff);box-shadow:var(--edge,inset 0 0 0 1px rgba(16,24,40,.08));cursor:pointer;transition:box-shadow .12s}
.lv-set input{position:absolute;opacity:0;pointer-events:none}
.lv-set b{font-size:var(--t-head,17px)}
.lv-set span{font-size:14px;line-height:1.45;color:var(--text-2,#3d4756)}
.lv-set em{font-style:normal;font-size:12px;font-weight:600;color:var(--lib-accent,var(--accent,#1d8fe0))}
.lv-set:has(input:checked){box-shadow:inset 0 0 0 2px var(--lib-accent,var(--accent,#1d8fe0))}
.lv-set input:focus-visible+b{outline:2px solid var(--accent,#1d8fe0);outline-offset:3px;border-radius:4px}
.lv-opts-row{display:flex;flex-wrap:wrap;gap:var(--s-3,12px) var(--s-6,24px);margin-top:var(--s-5,20px)}
.lv-check{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:var(--text,#0f1620);cursor:pointer}
.lv-check input{width:20px;height:20px;accent-color:var(--lib-accent,var(--accent,#1d8fe0))}
.lv-err{min-height:1.4em;margin-top:var(--s-3,12px);color:#b42318;font-size:15px}
.lv-keys{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.lv-keys li{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--text-2,#3d4756)}
kbd{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 8px;border-radius:7px;background:var(--surface,#fff);box-shadow:inset 0 0 0 1px rgba(16,24,40,.16),0 1px 0 rgba(16,24,40,.12);font:600 13px/1 var(--font,Arial,sans-serif);color:var(--text,#0f1620)}

/* ---------- the projector stage ---------- */
body.live-on{overflow:hidden;background:#0d1117}
body.live-on::before{display:none}
body.live-on .topbar,body.live-on .foot-bar,body.live-on #main,body.live-on .skip{display:none}
.lv-stage{--st-bg:#0d1117;--st-panel:#161b22;--st-panel-2:#1f2630;--st-line:rgba(255,255,255,.10);--st-text:#f2f5f8;--st-text-2:#aab4c0;--st-acc:#ffb547;--st-good:#3fcf8e;--st-bar:#4c9df0;
  position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--st-bg);color:var(--st-text);font-family:var(--font,Arial,sans-serif);font-size:clamp(15px,1.05vw,22px);line-height:1.35}
.lv-stage[hidden]{display:none}
.lv-top{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.7em 1.4em;border-bottom:1px solid var(--st-line)}
.lv-title{display:flex;align-items:center;gap:.6em;min-width:0}
.lv-title img{width:1.6em;height:1.6em;border-radius:.35em}
.lv-title b{font-size:1.05em;white-space:nowrap}
.lv-title span{color:var(--st-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-pill[hidden]{display:none}
.lv-pill{display:inline-flex;align-items:center;padding:.15em .7em;border-radius:99px;background:var(--st-panel-2);color:var(--st-text-2);font-size:.85em;font-weight:600;white-space:nowrap}
.lv-join{display:flex;align-items:center;gap:1em}
.lv-join-t{display:grid;text-align:right;font-size:.85em;color:var(--st-text-2)}
.lv-join-t b{color:var(--st-text);font-size:1.1em}
.lv-code{font-size:1.9em;font-weight:800;letter-spacing:.14em;color:var(--st-acc);font-variant-numeric:tabular-nums}
.lv-qr-s{width:4.2em;height:4.2em;border-radius:.3em;overflow:hidden;background:#fff}
.lv-qr-s svg,.lv-qr svg{display:block;width:100%;height:100%}
.lv-people{display:grid;text-align:center;font-size:.8em;color:var(--st-text-2);min-width:4.5em}
.lv-people b{font-size:1.8em;color:var(--st-text);line-height:1}
.lv-main{position:relative;min-height:0;overflow:auto}

/* lobby */
.lv-lobby{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:3em;height:100%;padding:2em 4em}
.lv-lobby[hidden]{display:none}
.lv-over{margin:0;font-size:1em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--st-acc)}
.lv-lobby h1{margin:.3em 0 0;font-size:2.4em;line-height:1.1;letter-spacing:-.01em}
.lv-code-big{margin-top:.4em;font-size:6.4em;font-weight:800;letter-spacing:.12em;line-height:1;color:var(--st-acc);font-variant-numeric:tabular-nums}
.lv-lobby p.lv-hint{margin-top:1em;color:var(--st-text-2);font-size:1.05em;max-width:34em}
.lv-qr{width:min(100%,24em);aspect-ratio:1;justify-self:center;padding:0;border-radius:.6em;overflow:hidden;background:#fff}
.lv-chips{display:flex;flex-wrap:wrap;gap:.45em;margin-top:1.4em;max-height:9em;overflow:hidden}
.lv-chips span{padding:.25em .7em;border-radius:99px;background:var(--st-panel-2);font-weight:700;letter-spacing:.06em}

/* question */
.lv-q{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2.2em;height:100%;padding:1.6em 2.2em}
.lv-q[hidden]{display:none}
.lv-q.no-fig{grid-template-columns:minmax(0,1fr)}
.lv-q.no-fig .lv-fig{display:none}
.lv-fig{position:relative;display:grid;place-items:center;margin:0;min-height:0;border-radius:.8em;background:#000;overflow:hidden}
.lv-fig img{display:block;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain}
.lv-fig.is-light{background:#e6e9ee}
.lv-fig figcaption{position:absolute;left:.8em;bottom:.6em;padding:.2em .6em;border-radius:.4em;background:rgba(0,0,0,.6);font-size:.8em;color:#fff}
.lv-fig figcaption:empty{display:none}
.lv-fig .lv-lab{display:grid;gap:.4em;place-items:center;text-align:center;color:var(--st-text-2);font-size:1.2em;padding:2em}
.lv-fig .lv-lab b{font-size:1.6em;color:var(--st-text)}
.lv-qbody{display:flex;flex-direction:column;min-height:0;overflow:auto}
.lv-kind{margin:0;font-size:.9em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--st-acc)}
.lv-qbody h1{margin:.25em 0 .7em;font-size:2.05em;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.lv-q.no-fig .lv-qbody{max-width:72em;margin:0 auto;width:100%}
.lv-q.no-fig .lv-qbody h1{font-size:2.6em}
.lv-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.lv-locked{display:inline-flex;align-items:center;min-height:2.4em;padding:0 1em;border-radius:99px;background:rgba(255,181,71,.16);color:var(--st-acc);font-weight:700}
.lv-sum-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5em}
.lv-opts{display:grid;gap:.55em;margin:0;padding:0;list-style:none}
.lv-opt{position:relative;display:grid;grid-template-columns:2.1em minmax(0,1fr) auto;align-items:center;gap:.7em;min-height:2.6em;padding:.45em .8em .45em .5em;border-radius:.6em;background:var(--st-panel);overflow:hidden;font-size:1.35em}
.lv-opt .lv-fill{position:absolute;inset:0 auto 0 0;width:0;background:rgba(76,157,240,.28);transition:width .6s cubic-bezier(.2,.8,.2,1);z-index:0}
.lv-opt>*:not(.lv-fill){position:relative;z-index:1}
.lv-l{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:.4em;background:var(--st-panel-2);font-weight:800;font-size:.9em}
.lv-t{min-width:0;overflow-wrap:anywhere}
.lv-n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--st-text-2);white-space:nowrap}
.lv-n small{margin-left:.4em;font-size:.75em;font-weight:600}
.lv-opt .lv-me{display:none;margin-left:.5em;padding:.1em .5em;border-radius:99px;background:var(--st-acc);color:#1b1300;font-size:.6em;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.lv-opt.is-mine .lv-me{display:inline-block}
.lv-opt.is-right{box-shadow:inset 0 0 0 3px var(--st-good)}
.lv-opt.is-right .lv-fill{background:rgba(63,207,142,.36)}
.lv-opt.is-right .lv-l{background:var(--st-good);color:#04140c}
.lv-done .lv-opt:not(.is-right):not(.is-ref){opacity:.62}
.lv-opt.is-ref{box-shadow:inset 0 0 0 3px var(--st-acc)}
.lv-opts.is-hidden .lv-fill,.lv-opts.is-hidden .lv-n{visibility:hidden}
.lv-texts{display:flex;flex-wrap:wrap;gap:.5em;margin:0;padding:0;list-style:none}
.lv-texts:empty{display:none}
.lv-texts li{display:inline-flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:.6em;background:var(--st-panel);font-size:1.6em;overflow-wrap:anywhere}
.lv-texts li b{display:grid;place-items:center;min-width:1.6em;height:1.6em;padding:0 .3em;border-radius:99px;background:var(--st-bar);color:#04101e;font-size:.75em}
.lv-status{display:flex;align-items:center;gap:1.2em;margin-top:.9em;color:var(--st-text-2);font-size:1.05em}
.lv-timer{display:inline-flex;align-items:center;gap:.35em;padding:.15em .7em;border-radius:99px;background:var(--st-panel-2);color:var(--st-text);font-weight:800;font-variant-numeric:tabular-nums}
.lv-timer.is-low{background:#b42318}
.lv-timer[hidden]{display:none}
.lv-why{margin-top:1em;padding:.9em 1.1em;border-radius:.6em;background:var(--st-panel);border-left:.3em solid var(--st-good);font-size:1.15em;line-height:1.45}
.lv-why[hidden]{display:none}
.lv-why b{display:block;margin-bottom:.2em;color:var(--st-good)}

/* summary */
.lv-sum{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2em;padding:1.6em 2.2em;align-content:start}
.lv-sum[hidden]{display:none}
.lv-sum h1{grid-column:1/-1;margin:0;font-size:2em}
.lv-sum h2{margin:0 0 .5em;font-size:1.15em;color:var(--st-text-2);font-weight:700}
.lv-table{width:100%;border-collapse:collapse;font-size:1em}
.lv-table th,.lv-table td{padding:.45em .6em;text-align:left;border-bottom:1px solid var(--st-line);vertical-align:top}
.lv-table th{font-size:.8em;color:var(--st-text-2);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.lv-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lv-pct{display:inline-block;min-width:3.2em;padding:.05em .45em;border-radius:.35em;background:var(--st-panel-2);text-align:right}
.lv-pct.hi{background:rgba(63,207,142,.25)}.lv-pct.lo{background:rgba(240,90,90,.28)}
.lv-board{margin:0;padding:0;list-style:none;display:grid;gap:.4em}
.lv-board li{display:grid;grid-template-columns:2em minmax(0,1fr) auto;gap:.6em;align-items:center;padding:.45em .7em;border-radius:.5em;background:var(--st-panel);font-size:1.15em}
.lv-board li span:first-child{color:var(--st-text-2);font-weight:700}
.lv-board li b{letter-spacing:.06em}
.lv-muted{color:var(--st-text-2)}

/* the control bar */
.lv-bar{display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap;padding:.6em 1.4em;border-top:1px solid var(--st-line);background:#0a0d12}
.lv-mine{display:flex;align-items:center;gap:.5em;font-size:.9em;color:var(--st-text-2)}
.lv-mine[hidden]{display:none}
.lv-mine div{display:flex;gap:.35em}
.lv-ctl{display:flex;flex-wrap:wrap;gap:.5em;margin-left:auto}
.lv-b{display:inline-flex;align-items:center;gap:.45em;min-height:2.4em;padding:0 1em;border:0;border-radius:99px;background:var(--st-panel-2);color:var(--st-text);font:600 .92em/1 var(--font,Arial,sans-serif);cursor:pointer}
.lv-b:hover{background:#2a3340}
.lv-b:disabled{opacity:.4;cursor:default}
.lv-b.pri{background:var(--st-acc);color:#1b1300}
.lv-b.pri:hover{filter:brightness(1.06)}
.lv-b.sq{width:2.4em;justify-content:center;padding:0}
.lv-b.on{background:var(--st-acc);color:#1b1300}
.lv-b kbd{min-width:1.6em;height:1.5em;padding:0 .35em;font-size:.75em;background:rgba(0,0,0,.18);box-shadow:none;color:inherit}
.lv-stage :focus-visible{outline:3px solid var(--st-acc);outline-offset:2px}

/* sheets: live case templates, an ad hoc question, settings */
.lv-sheet{position:absolute;right:1.4em;bottom:4.2em;z-index:5;width:min(40em,calc(100vw - 2.8em));max-height:calc(100vh - 9em);overflow:auto;padding:1.1em 1.2em;border-radius:.8em;background:var(--st-panel);box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 0 1px var(--st-line)}
.lv-sheet[hidden]{display:none}
.lv-sheet h2{margin:0 0 .2em;font-size:1.15em}
.lv-sheet p{margin:0 0 .8em;color:var(--st-text-2);font-size:.9em}
.lv-tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em}
.lv-tpl{display:grid;gap:.15em;padding:.7em .8em;border:0;border-radius:.6em;background:var(--st-panel-2);color:var(--st-text);text-align:left;font:600 1em/1.25 var(--font,Arial,sans-serif);cursor:pointer}
.lv-tpl:hover{background:#2a3340}
.lv-tpl small{font-weight:400;font-size:.78em;color:var(--st-text-2)}
.lv-form{display:grid;gap:.6em}
.lv-form label{display:grid;gap:.25em;font-size:.85em;color:var(--st-text-2)}
.lv-form input[type=text]{width:100%;min-height:2.4em;padding:0 .7em;border:0;border-radius:.45em;background:#0d1117;color:var(--st-text);font:1em var(--font,Arial,sans-serif);box-shadow:inset 0 0 0 1px var(--st-line)}
.lv-form .lv-check{color:var(--st-text);font-size:.95em;min-height:2em}
.lv-row{display:flex;gap:.5em;flex-wrap:wrap;justify-content:flex-end}
.lv-toast{position:absolute;left:50%;bottom:4.6em;transform:translateX(-50%);z-index:6;padding:.5em 1em;border-radius:99px;background:#b42318;color:#fff;font-weight:600}
.lv-toast[hidden]{display:none}
@media (max-width:900px){
  .lv-stage{font-size:15px}
  .lv-q,.lv-lobby,.lv-sum{grid-template-columns:minmax(0,1fr);padding:1em}
  .lv-fig{min-height:40vh}
  .lv-code-big{font-size:3.6em}
  .lv-join-t{display:none}
}
@media (prefers-reduced-motion:reduce){.lv-opt .lv-fill{transition:none}}

/* ---------- the phone ---------- */
.lj-page{max-width:520px;margin:0 auto;padding:0 16px calc(32px + env(safe-area-inset-bottom))}
.lj-form{display:grid;gap:14px;margin-top:20px;padding:20px;border-radius:var(--r-l,20px);background:var(--surface,#fff);box-shadow:var(--edge,inset 0 0 0 1px rgba(16,24,40,.08))}
.lj-form label{display:grid;gap:6px;font-size:15px;font-weight:600;color:var(--text,#0f1620)}
.lj-form label small{font-weight:400;color:var(--text-3,#6b7585)}
.lj-form input{width:100%;min-height:56px;padding:0 14px;border:0;border-radius:14px;background:var(--surface-2,#eef1f5);color:var(--text,#0f1620);font:700 26px/1 var(--font,Arial,sans-serif);letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}
.lj-form input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--lib-accent,var(--accent,#1d8fe0))}
.lj-form .btn{width:100%}
.lj-fine{margin-top:14px;font-size:13px;line-height:1.5;color:var(--text-3,#6b7585)}
body.join-on .topbar,body.join-on .foot-bar,body.join-on .lib-hero,body.join-on #joinForm{display:none}
.lj-app{display:none}
body.join-on .lj-app{display:block}
.lj-bar{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -16px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--glass,rgba(246,247,249,.9));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--hairline,rgba(16,24,40,.1))}
.lj-bar b{font-size:15px}
.lj-bar span{font-size:13px;color:var(--text-3,#6b7585)}
.lj-me{padding:4px 10px;border-radius:99px;background:var(--lib-soft,rgba(183,121,31,.13));color:var(--lib-accent,#8a5a12);font-weight:800;letter-spacing:.08em;font-size:14px}
.lj-leave{min-height:36px;padding:0 12px;border:0;border-radius:99px;background:transparent;color:var(--text-2,#3d4756);font:600 14px var(--font,Arial,sans-serif);cursor:pointer}
.lj-screen{padding-top:16px}
.lj-wait{display:grid;place-content:center;justify-items:center;gap:10px;min-height:52vh;text-align:center}
.lj-wait b{font-size:22px}
.lj-wait span{font-size:15px;color:var(--text-2,#3d4756);max-width:30ch}
.lj-dot{width:14px;height:14px;border-radius:50%;background:var(--lib-accent,var(--accent,#1d8fe0));animation:ljp 1.4s ease-in-out infinite}
@keyframes ljp{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.lj-dot{animation:none}}
.lj-q{margin:0 0 10px;font-size:18px;font-weight:650;line-height:1.35}
.lj-kind{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lib-accent,var(--accent,#1d8fe0))}
.lj-img{display:block;width:100%;max-height:34vh;object-fit:contain;margin:0 0 12px;border-radius:12px;background:#111}
.lj-img.is-light{background:#e6e9ee}
.lj-opts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.lj-opt{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 14px 8px 10px;border:0;border-radius:16px;background:var(--surface,#fff);box-shadow:var(--edge,inset 0 0 0 1px rgba(16,24,40,.1)),0 1px 2px rgba(16,24,40,.06);color:var(--text,#0f1620);font:600 18px/1.25 var(--font,Arial,sans-serif);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.lj-opt .lj-l{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface-2,#eef1f5);font-weight:800}
.lj-opt span:last-child{overflow-wrap:anywhere}
.lj-opt:active{transform:scale(.99)}
.lj-opt:disabled{cursor:default}
.lj-opt.is-picked{box-shadow:inset 0 0 0 3px var(--lib-accent,var(--accent,#1d8fe0))}
.lj-opt.is-picked .lj-l{background:var(--lib-accent,var(--accent,#1d8fe0));color:#fff}
.lj-opts.is-locked .lj-opt:not(.is-picked):not(.is-right){opacity:.5}
.lj-opt.is-right{box-shadow:inset 0 0 0 3px #128a55}
.lj-opt.is-right .lj-l{background:#128a55;color:#fff}
.lj-text{display:grid;gap:10px}
.lj-text input{width:100%;min-height:56px;padding:0 14px;border:0;border-radius:14px;background:var(--surface,#fff);box-shadow:inset 0 0 0 1px rgba(16,24,40,.14);font:500 18px var(--font,Arial,sans-serif);color:var(--text,#0f1620)}
.lj-msg{margin-top:14px;padding:14px 16px;border-radius:16px;background:var(--surface,#fff);box-shadow:var(--edge,inset 0 0 0 1px rgba(16,24,40,.08));font-size:16px;line-height:1.45}
.lj-msg b{display:block;font-size:20px}
.lj-msg.ok{box-shadow:inset 0 0 0 2px #128a55}.lj-msg.ok b{color:#0d7a4a}
.lj-msg.no{box-shadow:inset 0 0 0 2px #c4320a}.lj-msg.no b{color:#b42318}
.lj-msg:empty{display:none}
.lj-timer{float:right;margin-left:8px;padding:2px 10px;border-radius:99px;background:var(--surface-2,#eef1f5);font-weight:800;font-variant-numeric:tabular-nums;font-size:15px}
.lj-timer.is-low{background:#b42318;color:#fff}
.lj-timer[hidden]{display:none}
.lj-err{min-height:1.4em;color:#b42318;font-size:15px}