/* Courses (/skool) and the course quizzes (/skool/quiz/...). Black and white only: a right or wrong answer shows by
   its fill, a mark and words, never by color (House Style: red, green and blue appear only where light is shown). */

/* ---------- Courses ---------- */
.doc .sk-hub{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.sk-card{padding:0 0 22px;overflow:hidden}
.doc .sk-card > :not(.sk-cover){margin-left:24px;margin-right:24px}
.sk-cover{display:block;width:100%;height:auto;aspect-ratio:1460/752;object-fit:cover;background:#000;margin-bottom:18px}
.card p.sk-meta{flex:0 0 auto;font-size:.8125rem;margin-bottom:14px}

/* ---------- Quiz ---------- */
/* The running score rides along at the foot of the screen while the questions are in view */
.doc .qz-status{position:sticky;bottom:14px;z-index:5;width:max-content;max-width:100%;margin:8px auto 0;padding:9px 18px;
  border-radius:var(--r-pill);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line),0 6px 24px rgba(0,0,0,.35);
  font-size:.875rem;font-weight:560}
.qz-status[hidden]{display:none}
.doc .qz-list{list-style:none;padding:0;margin:8px 0 0}
.doc .qz-list > li{margin:0;padding:28px 0;border-top:1px solid var(--line)}
.doc .qz-list > li:first-child{border-top:0}
.qz-text{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font-size:1.0625rem;line-height:1.5;font-weight:560;margin:0}
.qz-n{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:.8125rem;font-weight:620;line-height:1}
.qz-tag{color:var(--muted);font-weight:400;font-size:.875rem}
.qz-img{display:block;width:calc(100% - 40px);height:auto;border-radius:var(--r-inner);margin:16px 0 4px 40px;background:#000}

.doc .qz-opts{list-style:none;padding:0;margin:14px 0 0 40px;display:grid;gap:8px}
.doc .qz-opts li{margin:0}
.qz-opt{width:100%;display:flex;gap:12px;align-items:baseline;text-align:left;font:inherit;font-size:.9375rem;line-height:1.45;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-inner);padding:11px 14px;min-height:44px;cursor:pointer;transition:border-color .15s}
.qz-opt:hover{border-color:var(--fg)}
.qz-k{flex:none;font-weight:620;width:1.1em}
.qz-o{flex:1}
.qz-opt[aria-disabled="true"]{cursor:default}
.qz-opt[aria-disabled="true"]:hover{border-color:var(--line)}
.qz-opt.is-right,.qz-opt.is-right:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.qz-opt.is-wrong,.qz-opt.is-wrong:hover{border-style:dashed;border-color:var(--fg)}
.qz-opt.is-wrong .qz-o{text-decoration:line-through;text-decoration-thickness:1px}
.qz-opt.is-right::after,.qz-opt.is-wrong::after{flex:none;font-weight:620;margin-left:8px}
.qz-opt.is-right::after{content:"\2713"}
.qz-opt.is-wrong::after{content:"\2715"}

.qz-ans{margin:14px 0 0 40px}
.qz-ans summary{list-style:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;font-weight:580;cursor:pointer}
.qz-ans summary::-webkit-details-marker{display:none}
.qz-ans summary:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.qz-ans[open]{border-left:2px solid var(--fg);padding:2px 0 2px 16px}
.qz-ans[open] summary{display:none}
.qz-ans p{margin:6px 0}
.qz-verdict{font-weight:620}
.qz-verdict:empty{display:none}
/* With the script, a multiple-choice answer opens when an answer is picked, not before */
.qz-js .qz-q[data-kind="mc"] .qz-ans:not([open]){display:none}

.qz-self{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px}
.qz-self[hidden]{display:none}
.qz-self span{color:var(--muted);font-size:.875rem;margin-right:4px}
.qz-mark{font:inherit;font-size:.875rem;font-weight:580;color:var(--fg);background:none;border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-pill);padding:8px 16px;min-height:40px;cursor:pointer}
.qz-mark:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.qz-mark[aria-pressed="true"]{background:var(--fg);color:var(--bg);box-shadow:none}

.qz-result{margin-top:16px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel)}
.qz-result[hidden]{display:none}
.doc .qz-result h2{margin:0 0 8px;padding:0;border:0}
.qz-total{font-size:1.25rem;font-weight:620;margin:0}
.doc .qz-review ul{margin:6px 0 0}

@media (max-width:560px){
  .doc .qz-opts,.qz-ans{margin-left:0}
  .qz-img{width:100%;margin-left:0}
}