/* ============================================================
   Components - quiz engine, video, tables, result ring, diagrams,
   live Q&A, schedule. Shared across all surfaces.
   ============================================================ */

/* ---- quiz engine ---- */
.qbar{display:flex;align-items:center;gap:12px;padding:10px var(--pad);border-bottom:.5px solid var(--sep)}
.qbar .qcount{font-size:15px;font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.qbar .qtimer{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tint-d);
  display:flex;align-items:center;gap:5px;flex:none}
.qbar .qtimer.low{color:var(--red)}
.qbar .qtimer svg{width:15px;height:15px}
.pbar{flex:1;height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.pbar > i{display:block;height:100%;background:var(--tint);transition:width .35s var(--ease)}
.qscroll{flex:1;overflow-y:auto;padding-bottom:8px}
.qtext{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.3;padding:20px var(--pad) 4px;text-wrap:balance}
.qhint{padding:2px var(--pad) 12px;color:var(--label2);font-size:14px}
.qimg{margin:8px var(--pad) 4px;background:var(--grouped-d);border-radius:14px;padding:16px;
  display:flex;justify-content:center;align-items:center}
.qimg svg{max-height:200px;width:auto}
.opts{padding:8px var(--pad) var(--pad);display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--bg);
  border:1.5px solid var(--sep);border-radius:13px;padding:14px;font-size:16px;line-height:1.3;
  transition:border-color .12s,background-color .12s,transform .12s var(--ease)}
.opt .mk{width:24px;height:24px;border-radius:50%;border:2px solid var(--label3);flex:none;
  display:grid;place-items:center;transition:background-color .12s,border-color .12s}
.opt .mk svg{width:14px;height:14px;color:#fff;opacity:0;stroke-width:3;transition:opacity .12s}
.opt.on{border-color:var(--tint);background:var(--tint-l)}
.opt.on .mk{background:var(--tint);border-color:var(--tint)}
.opt.on .mk svg{opacity:1}
.opt:active{transform:scale(.96)}
/* review states */
.opt.correct{border-color:var(--tint);background:var(--tint-l)}
.opt.correct .mk{background:var(--tint);border-color:var(--tint)}
.opt.correct .mk svg{opacity:1}
.opt.wrong{border-color:var(--red);background:rgba(255,59,48,.08)}
.opt.wrong .mk{background:var(--red);border-color:var(--red)}
.opt.wrong .mk svg{opacity:1}
.qexplain{margin:0 var(--pad) 14px;background:var(--tint-l);border-radius:12px;padding:12px 14px;
  font-size:14px;line-height:1.45;color:var(--tint-d);display:flex;gap:9px}
.qexplain svg{width:17px;height:17px;flex:none;margin-top:1px}
.qfoot{padding:12px var(--pad);border-top:.5px solid var(--sep);background:var(--bg);
  display:flex;gap:10px;align-items:center}

/* ---- result ring (conic gradient score) ---- */
.ring{--p:0;--ring-color:var(--tint);width:168px;height:168px;border-radius:50%;margin:8px auto;
  background:conic-gradient(var(--ring-color) calc(var(--p)*1%),var(--fill) 0);
  display:grid;place-items:center;position:relative}
.ring::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--bg)}
.ring .rin{position:relative;z-index:1;text-align:center}
.ring .rin b{font-size:44px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1;font-variant-numeric:tabular-nums}
.ring .rin small{font-size:14px;color:var(--label2)}
.pass{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 16px;border-radius:17px;
  background:var(--tint);color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em}
.pass.fail{background:var(--red)}
.pass svg{width:18px;height:18px;stroke-width:2.6}

/* ---- video / live tile - the instructor on camera (talking-head stream) ---- */
.video{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#0c1f16;color:#fff}
.video.tablet,.video.desk{border-radius:16px}
.video.fill{aspect-ratio:auto;flex:1;min-height:0}
/* hairline image outline so the photo edge stays crisp on light surfaces (drawn above the feed) */
.video::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.video .vfeed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 36%;display:block}
/* soft shade so the overlay chips stay legible over the photo */
.vshade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 60%,rgba(0,0,0,.45) 100%)}
.video .vlive,.video .vpresence,.video .vctrl,.video .vtopic{z-index:3}
.vlive{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 11px;border-radius:13px;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.04em}
.vlive::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;
  animation:livepulse 1.6s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
.vpresence{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:13px;background:rgba(0,0,0,.42);color:#fff;
  font-size:12px;font-weight:600;backdrop-filter:blur(6px);font-variant-numeric:tabular-nums}
.vpresence svg{width:14px;height:14px}
.vctrl{position:absolute;bottom:12px;left:12px;width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff}
.vctrl svg{width:20px;height:20px}
.vtopic{position:absolute;bottom:12px;right:12px;left:64px;text-align:right;color:#fff}
.vtopic b{font-size:15px;font-weight:600;display:block}
.vtopic small{font-size:12px;opacity:.8}

/* ---- live Q&A ---- */
.qa{display:flex;flex-direction:column;gap:10px;padding:var(--pad)}
.qacard{background:var(--bg);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-card);
  border:.5px solid var(--sep)}
.qacard.resolved{opacity:.55}
.qahead{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.qahead .who{font-size:14px;font-weight:600}.qahead .t{font-size:12px;color:var(--label2);margin-left:auto}
.qacard .qbody{font-size:15px;line-height:1.4}
.qacard .ans{margin-top:9px;padding-top:9px;border-top:.5px solid var(--sep);font-size:14px;
  color:var(--tint-d);display:flex;gap:7px}
.qacard .ans svg{width:15px;height:15px;flex:none;margin-top:2px}
.qaactions{display:flex;gap:8px;margin-top:10px}
.qabar{display:flex;gap:9px;align-items:center;padding:10px var(--pad);border-top:.5px solid var(--sep);
  background:var(--bg)}
.qabar input{flex:1;background:var(--fill);border:0;border-radius:18px;min-height:38px;padding:0 14px;
  font-size:15px;outline:none}
.qabar .send{width:40px;height:40px;border-radius:50%;background:var(--tint);color:#fff;
  display:grid;place-items:center;flex:none}
.qabar .send svg{width:18px;height:18px}

/* ---- schedule items ---- */
.sched{display:flex;flex-direction:column;gap:10px;padding:0 var(--pad)}
.schedcard{display:flex;align-items:center;gap:13px;background:var(--bg);border-radius:14px;
  padding:13px 14px;box-shadow:var(--shadow-card)}
.schedcard .when{text-align:center;flex:none;width:50px}
.schedcard .when b{font-size:18px;font-weight:700;display:block;font-variant-numeric:tabular-nums}
.schedcard .when small{font-size:12px;color:var(--label2)}
.schedcard .what{flex:1;min-width:0}
.schedcard .what b{font-size:16px;font-weight:600;display:block}
.schedcard .what small{font-size:13px;color:var(--label2)}

/* ---- tables (desktop / tablet consoles) ---- */
.tablecard{background:var(--bg);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);
  border:.5px solid var(--sep)}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th{text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--label2);padding:11px 16px;border-bottom:.5px solid var(--sep);background:var(--grouped-d)}
.table td{padding:12px 16px;border-bottom:.5px solid var(--sep);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:var(--grouped-d)}
.namecell{display:flex;align-items:center;gap:11px}
.namecell b{font-weight:600;font-size:15px}
.namecell small{display:block;color:var(--label2);font-size:13px}
.table .ta-r{text-align:right}
.rowact{display:inline-flex;gap:7px;justify-content:flex-end}

/* ---- diagrams (inline-SVG road scenes & signs; NO photos/emoji) ---- */
.diagram{width:100%;height:auto}
.diagram .road{fill:#c9ccd2}
.diagram .verge{fill:#dfe3e7}
.diagram .lane{stroke:#fff;stroke-width:3;stroke-dasharray:10 12;fill:none}
.diagram .edge{stroke:#fff;stroke-width:2.5;fill:none}
.diagram .carA{fill:var(--blue)}
.diagram .carB{fill:var(--amber)}
.diagram .carC{fill:var(--tint)}
.diagram .carLabel{fill:#fff;font:700 15px var(--f);text-anchor:middle}
.diagram .arrow{stroke-width:3.5;fill:none}
.sign{display:block}
.sign text{font-family:var(--f);font-weight:700}