/* Live Class Quiz (2 Nov 2026): student screens, the projector screen, results. Design approved 14:35 (canvas "Live Class Quiz"). */
:root { --oA: #1f6f8b; --oB: #b45309; --oC: #6d28d9; --oD: #0f766e; --oE: #9f1239; --oF: #3f6212; --maths: "STIX Two Text", "Cambria Math", "Times New Roman", serif; }
.c0 { --oc: var(--oA); } .c1 { --oc: var(--oB); } .c2 { --oc: var(--oC); } .c3 { --oc: var(--oD); } .c4 { --oc: var(--oE); } .c5 { --oc: var(--oF); }

/* dashboard card and bar */
.live-now { border: 2px solid var(--brand); box-shadow: 0 6px 22px rgba(41, 123, 126, .18); display: grid; gap: 10px; }
.live-now h2 { font-size: 1.25rem; margin: 0; }
.live-dot { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; letter-spacing: .04em; color: var(--red); font-size: .95rem; }
.live-dot i { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; animation: livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot i { animation: none; } }
.live-join { display: grid; justify-items: center; gap: 2px; font-size: 1.2rem; font-weight: 700; min-height: 64px; margin-top: 0; text-decoration: none; }
.live-join .ar { text-align: center; font-size: 1.05rem; font-weight: 600; }
#live-bar { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: #fff; border: 2px solid var(--brand); border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow); max-width: calc(100vw - 24px); }
.livecode { margin-top: 12px; display: grid; gap: 4px; } .livecode label { font-weight: 600; } .livecode small { font-weight: 400; color: var(--muted); }
.livecode .inp, .live-code { letter-spacing: .12em; text-transform: uppercase; text-align: center; font-size: 1.15rem; }
.livecode .ar { color: var(--muted); font-size: .9rem; }

/* the student's quiz screen */
.live-s { max-width: 640px; }
.live-off { background: #fff4e5; border: 2px solid var(--amber); color: #7a3d05; border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; font-size: .92rem; }
.live-top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--brand-d); }
.live-t { font-weight: 700; background: var(--brand-l); border-radius: 999px; padding: 2px 12px; font-variant-numeric: tabular-nums; } .live-t:empty { display: none; }
.live-q { font-size: 1.2rem; line-height: 1.45; margin: 0; overflow-x: auto; }
.live-opts { display: grid; gap: 10px; }
.lopt { font: inherit; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--line); background: #fff; text-align: left; color: var(--ink); cursor: pointer; width: 100%; }
.lopt .ol, .lv-opt .ol, .lv-bar .ol, .live-key .ol { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--oc, var(--brand)); color: #fff; font-size: 1.35rem; font-weight: 700; display: grid; place-items: center; }
.lopt .ot { font-size: 1.35rem; min-width: 0; overflow-x: auto; }
.lopt.sel { border: 3px solid var(--ink); background: #fffaf3; }
.lopt:disabled { cursor: default; opacity: .7; } .lopt.sel:disabled { opacity: 1; }
.lopt:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.live-note { text-align: center; display: grid; gap: 2px; background: var(--bg); box-shadow: none; }
.live-note small { color: var(--muted); } .live-note .ar { text-align: center; color: var(--muted); font-size: .92rem; }
.live-wait, .live-end { text-align: center; }
.live-end .big { font-size: 2.6rem; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.live-res { text-align: center; display: grid; justify-items: center; gap: 4px; border: 2px solid var(--line); }
.live-res h2 { font-size: 1.6rem; margin: 0; } .live-res .ar { text-align: center; font-size: 1.15rem; font-weight: 600; }
.live-res.ok { background: #ecfdf3; border-color: #166534; color: #166534; } .live-res.no, .live-res.none { background: #fff6f5; border-color: var(--red); color: var(--red); }
.live-key { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-top: 6px; } .live-key .ol { background: #166534; width: 36px; height: 36px; font-size: 1.1rem; }
.live-key .ot { font-size: 1.3rem; }
.live-why .lab, .lv-why .lab, .live-stats .lab, .live-tiles .lab { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.live-stats .card { text-align: center; } .live-stats b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.live-next { text-align: center; color: var(--muted); } .live-next .ar { text-align: center; }
.live-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.live-board li, .lv-lead { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 10px; padding: 6px 10px; }
.live-board li span:nth-child(2), .lv-lead span:nth-child(2) { flex: 1; font-weight: 600; min-width: 0; }
.rk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--line); flex: none; }
.rk.r1 { background: #f5c518; } .rk.r2 { background: #c0c7cf; } .rk.r3 { background: #c98a4b; color: #fff; }

/* teacher: start form */
.live-form { display: grid; gap: 8px; } .live-form > label { font-weight: 600; }
.live-path { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; } .live-path legend { font-weight: 700; padding: 0 6px; }
.live-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.chk { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; } .chk input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.live-opts-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; } .live-opts-row label { display: grid; gap: 4px; font-weight: 600; } .live-opts-row .chk { display: flex; font-weight: 600; padding-bottom: 10px; }
.live-opts-row .inp.num { width: 90px; }
.live-preview { display: grid; gap: 8px; padding-left: 1.4em; } .live-preview li { border-bottom: 1px solid var(--line); padding: 6px 0; } .live-preview .qq { overflow-x: auto; }
.live-preview li .btn { margin-top: 4px; }

/* the projector screen (made for 1280 x 720 and larger; readable from the back of the room) */
.lv { min-height: 100vh; background: #fff; display: flex; flex-direction: column; gap: 18px; padding: 22px clamp(16px, 3vw, 40px) 14px; }
.lv-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lv-side .lab { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lv-title { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; flex: 1; min-width: 0; } .lv-title b { font-size: 1.4rem; color: var(--brand-d); } .lv-title span { font-size: 1.2rem; color: var(--muted); }
.lv-title .pill { font-size: 1.2rem; font-weight: 600; background: var(--brand-l); color: var(--brand-d); padding: 4px 14px; }
.lv-join { display: flex; align-items: center; gap: 14px; flex: none; } .lv-join > div { display: grid; justify-items: end; } .lv-join .muted { font-size: .85rem; }
.lv-code { font-size: 1.9rem; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.live-qr { width: 96px; height: 96px; display: block; border: 1px solid var(--line); }
.lv-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 28px; flex: 1; }
.lv-q { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.3; font-weight: 500; margin: 0 0 18px; overflow-x: auto; }
.lv-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lv-opt { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; border: 2px solid var(--line); background: #fff; min-width: 0; }
.lv-opt .ol { width: 52px; height: 52px; font-size: 1.7rem; } .lv-opt .ot { font-size: clamp(1.4rem, 2.3vw, 2.2rem); flex: 1; min-width: 0; overflow-x: auto; }
.lv-opt .pc { font-size: 1.4rem; color: var(--muted); }
.lv-opt.right { border: 3px solid #166534; background: #ecfdf3; } .lv-opt.right .pc { color: #166534; } .lv-opt.dim { opacity: .55; }
.lv-right { font-size: 1.6rem; font-weight: 700; color: #166534; margin: 16px 0 10px; } .lv-right span { font-weight: 400; }
.lv-why { background: var(--bg); border-radius: 16px; padding: 16px 20px; font-size: 1.4rem; line-height: 1.45; }
.lv-side { display: flex; flex-direction: column; gap: 12px; background: var(--bg); border-radius: 16px; padding: 18px; }
.lv-count { display: flex; justify-content: space-between; align-items: center; } .lv-count b { font-size: 2.5rem; line-height: 1.1; }
.lv-timer { position: relative; width: 88px; height: 88px; display: grid; place-items: center; } .lv-timer:empty { display: none; }
.lv-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); } .lv-timer circle { fill: none; stroke-width: 5; } .lv-timer .bg { stroke: var(--line); } .lv-timer .fg { stroke: var(--brand); }
.lv-timer b { font-size: 1.8rem; position: relative; }
.lv-prog { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; } .lv-prog i { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.lv-bar { display: flex; align-items: center; gap: 10px; } .lv-bar .ol { width: 32px; height: 32px; font-size: 1rem; border-radius: 8px; }
.lv-bar > div { flex: 1; height: 30px; background: #fff; border-radius: 8px; overflow: hidden; } .lv-bar > div i { display: block; height: 100%; background: var(--oc); transition: width .3s; }
.lv-bar b { width: 56px; text-align: right; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.lv-ctl { margin-top: auto; } .btn.big { font-size: 1.15rem; padding: 12px 20px; min-height: 52px; flex: 1; }
.lv-board { display: grid; gap: 8px; } .lv-board h3 { margin: 0; font-size: 1.3rem; } .lv-lead { background: #fff; font-size: 1.25rem; } .lv-lead b { font-size: 1rem; color: var(--muted); font-weight: 600; }
.lv-lobby { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 32px; align-items: center; flex: 1; }
.lv-lobby h2 { font-size: 2.4rem; margin: 0; } .lv-lobby .ar { font-size: 1.6rem; text-align: left; color: var(--brand-d); }
.lv-steps { font-size: 1.35rem; line-height: 1.7; padding-left: 1.3em; }
.lv-big { font-size: 3rem; font-weight: 700; margin: 6px 0; } .lv-big span { font-size: 1.4rem; color: var(--muted); font-weight: 500; }
.lv-names { display: flex; flex-wrap: wrap; gap: 8px; } .lv-names span { background: var(--brand-l); color: var(--brand-d); border-radius: 999px; padding: 4px 12px; font-weight: 600; }
.lv-qrbig { display: grid; justify-items: center; gap: 10px; } .lv-qrbig .live-qr { width: min(320px, 32vw); height: auto; aspect-ratio: 1; max-width: 100%; } .lv-qrbig .lv-code { font-size: 2.6rem; }
.lv-ended { text-align: center; display: grid; justify-items: center; gap: 10px; flex: 1; align-content: center; } .lv-ended h2 { font-size: 2.2rem; } .lv-ended .lv-board { width: min(560px, 100%); text-align: left; }
.lv-foot { font-size: .9rem; } .link { background: none; border: 0; color: var(--brand-d); text-decoration: underline; cursor: pointer; font: inherit; padding: 4px 0; }
@media (max-width: 900px) { .lv-grid, .lv-lobby { grid-template-columns: minmax(0, 1fr); } .lv-opts { grid-template-columns: minmax(0, 1fr); } .lv-top { flex-wrap: wrap; } }

/* results */
.live-results .lock { color: var(--brand-d); font-size: .9rem; }
.live-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.live-tiles > div { background: var(--bg); border-radius: 12px; padding: 10px 14px; } .live-tiles b { display: block; font-size: 1.5rem; } .live-tiles small { color: var(--muted); }
.live-results tr.attn td { background: #fff7ed; }
.pbar { display: inline-block; width: 90px; height: 10px; background: #e6edf0; border-radius: 5px; overflow: hidden; vertical-align: middle; } .pbar i { display: block; height: 100%; background: var(--brand); } .pbar i.low { background: var(--amber); }
.live-results td.qcell { max-width: 380px; } .live-results td.ans { text-align: center; font-weight: 600; } td.ans.ok { color: #166534; } td.ans.no { color: var(--red); } td.ans.late { color: var(--amber); }
.small { font-size: .85rem; }
@media print { .lv-foot, #live-bar { display: none !important; } .live-print table.list { font-size: 9pt; } }