/* Section quiz pages (pages/quiz*.html). Uses the theme vars from style.css. The frame uses zoom for text size, so px is fine. */
.qz { max-width: 860px; }

.qz-kicker {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sku-color); margin-bottom: 10px;
}
.qz-covers { font-size: 15px; color: var(--tx-dim); }
.qz-who { margin-top: 6px; }
.qz-who strong { color: var(--tx-bright); }

/* buttons */
.qz-btn {
  display: inline-block; font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--pre-border-l); color: var(--try-fg); border: 0; border-radius: 4px;
  padding: 10px 20px; cursor: pointer; text-decoration: none; text-shadow: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.3); transition: transform .12s, filter .12s;
}
a.qz-btn, a.qz-btn:hover { color: var(--try-fg); border-bottom: 0; text-shadow: none; }
.qz-btn:hover { filter: brightness(1.15); transform: translateY(1px); }
.qz-btn:disabled { opacity: .35; cursor: default; transform: none; filter: none; }
.qz-ghost { background: transparent; color: var(--pre-text); border: 1px solid var(--pre-border); box-shadow: none; }
html[data-theme="nes"] .qz-btn { border-radius: 0; font-size: 11px; }

/* name form */
.qz-name { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 18px 0; }
.qz-name label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--tx-mid); }
.qz-name input {
  font-family: var(--font-body); font-size: 18px; padding: 8px 10px; min-width: 200px;
  background: var(--bg-code); color: var(--tx-bright); border: 1px solid var(--pre-border); border-radius: 3px;
}
.qz-name input:focus { outline: none; border-color: var(--pre-border-l); }

/* stats */
.qz-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }
.qz-stats > div, .qz-score {
  display: flex; flex-direction: column; padding: 12px 18px; min-width: 140px;
  background: var(--call-bg); border: 1px solid var(--call-border); border-left: 3px solid var(--call-border-l);
}
.qz-score { display: inline-flex; margin: 10px 0 18px; }
.qz-num { font-family: var(--font-display); font-size: 26px; color: var(--h1-color); line-height: 1.2; }
.qz-lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-dim); }
html[data-theme="nes"] .qz-num { font-size: 16px; }

/* history table */
.qz-hist { border-collapse: collapse; width: 100%; max-width: 560px; font-size: 16px; }
.qz-hist th, .qz-hist td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--bd-subtle); color: var(--tx-mid); }
.qz-hist th { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-dim); }

/* taking */
.qz-progress { height: 6px; background: var(--bd-subtle); border-radius: 3px; overflow: hidden; margin: 6px 0 12px; }
.qz-bar { height: 100%; width: 0; background: var(--pre-border-l); transition: width .25s; }
.qz-dots { display: flex; gap: 8px; margin-bottom: 18px; }
.qz-dot {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-family: var(--font-mono); font-size: 14px; color: var(--tx-mid);
  background: transparent; border: 1px solid var(--pre-border);
}
.qz-dot.done { background: var(--code-bg); color: var(--pre-text); border-color: var(--pre-border-l); }
.qz-dot.on { outline: 2px solid var(--h1-color); outline-offset: 2px; }
html[data-theme="nes"] .qz-dot { border-radius: 0; }

.qz-q { display: none; }
.qz-q.on { display: block; }
.qz-q, .qz-res {
  background: var(--call-bg); border: 1px solid var(--call-border); border-left: 3px solid var(--call-border-l);
  padding: 16px 20px; margin-bottom: 16px;
}
.qz-qhead { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--call-label); margin-bottom: 10px; }
.qz-from { color: var(--tx-dim); margin-left: 10px; text-transform: none; letter-spacing: 0.04em; }
.qz-prompt { color: var(--tx-bright); font-size: 19px; }
.qz-q pre, .qz-res pre { margin: 10px 0 14px; }

.qz-opts { list-style: upper-alpha; padding-left: 28px; margin: 6px 0 0; }
.qz-q[data-type="tf"] .qz-opts { list-style: none; padding-left: 0; }
.qz-opts li { margin: 8px 0; color: var(--h2-color); }
.qz-opts label {
  display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--tx-mid);
  padding: 8px 12px; border: 1px solid var(--bd-subtle); border-radius: 3px; font-size: 18px;
}
.qz-opts label:hover { border-color: var(--pre-border); color: var(--tx-bright); }
.qz-opts input { accent-color: var(--pre-border-l); width: 18px; height: 18px; flex: none; }
.qz-opts label:has(input:checked) { border-color: var(--pre-border-l); background: var(--code-bg); color: var(--tx-bright); }

.qz-revlist { padding-left: 22px; margin: 8px 0 16px; }
.qz-revlist li { margin: 6px 0; }
.qz-revlist li.todo a { color: var(--warn-label); }

.qz-nav { display: flex; justify-content: space-between; margin-top: 4px; }

/* results */
.qz-res.right { border-left-color: var(--tip-border-l); }
.qz-res.wrong { border-left-color: var(--warn-border-l); }
.qz-mark { margin-right: 10px; font-weight: 700; }
.qz-res.right .qz-mark { color: var(--tip-label); }
.qz-res.wrong .qz-mark { color: var(--warn-label); }
.qz-optres { list-style: none; padding: 0; margin: 6px 0 12px; }
.qz-optres li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 6px 12px; margin: 6px 0; border: 1px solid var(--bd-subtle); border-radius: 3px; color: var(--tx-dim);
}
.qz-optres li em { font-style: normal; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 8px; border-radius: 10px; }
.qz-optres li.is-right { border-color: var(--tip-border-l); color: var(--tx-bright); background: var(--tip-bg); }
.qz-optres li.is-right em { color: var(--tip-label); border: 1px solid var(--tip-border); }
.qz-optres li.is-pick:not(.is-right) { border-color: var(--warn-border-l); color: var(--tx-bright); background: var(--warn-bg); }
.qz-optres li.is-pick:not(.is-right) em { color: var(--warn-label); border: 1px solid var(--warn-border); }
.qz-explain { border-top: 1px solid var(--bd-subtle); padding-top: 10px; font-size: 17px; color: var(--tx-mid); margin-bottom: 10px; }
.qz-lesson { font-size: 15px; }
.qz-actions { margin-top: 22px; }

@media (max-width: 600px) {
  .qz-name input { min-width: 0; width: 100%; }
  .qz-name label { width: 100%; }
}