/* The Truckers Hub: free CDL quiz (/examen-cdl/gratis/). Uses the tokens of /styles.css (light + dark). */
.wrap.narrow { max-width: 820px; }

.quiz-hero { padding: 36px 0 8px; }
.quiz-hero .eyebrow { margin: 0 0 8px; font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--link); }
.quiz-hero .lead { font-size: 1.12rem; color: var(--muted); max-width: 40em; }
.quiz-facts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-facts li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: .95rem; }

section.block.quiz-body { padding-top: 16px; }

/* English toggle: a real checkbox (works without JS). Checked = every .en line inside the quiz shows. */
.en-switch { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.en-intro { margin: 0 0 16px; color: var(--muted); }
/* The bar comes AFTER the questions in the HTML and sticks to the bottom of the screen while you scroll through them
   (no guess about the header's height), then settles under the last question. */
.quiz-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px;
  margin: 16px -16px 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
@media (min-width: 720px) { .quiz-bar { margin: 16px 0 0; padding: 8px 20px; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; } }
.en-toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; min-height: 44px; line-height: 1.3; }
.en-toggle .hint { font-weight: 400; color: var(--muted); }
@media (max-width: 559px) { .en-toggle .hint { display: none; } }
.en-toggle .knob {
  position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px;
  background: var(--surface-2); border: 2px solid var(--field-line);
}
.en-toggle .knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--field-line);
}
@media (prefers-reduced-motion: no-preference) { .en-toggle .knob::after { transition: left .15s; } }
.en-switch:checked ~ .quiz-bar .knob { background: var(--amber); border-color: var(--amber); }
.en-switch:checked ~ .quiz-bar .knob::after { left: 22px; background: var(--amber-text); }
.en-switch:focus-visible ~ .quiz-bar .en-toggle .knob { outline: 3px solid var(--focus); outline-offset: 3px; }
.quiz-progress { margin: 0; font-size: .95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.quiz-progress span { font-weight: 800; color: var(--text); }

.quiz .en { display: none; }
.en-switch:checked ~ .quiz .en { display: block; }

/* Questions */
ol.quiz { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.q fieldset { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 14px; }
@media (min-width: 720px) { .q fieldset { padding: 22px 24px 16px; } }
.q legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font-size: 1.12rem; font-weight: 700; line-height: 1.4; }
.q legend + * { clear: both; }
.q-meta { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.q legend .en { margin-top: 6px; font-weight: 500; font-size: 1rem; color: var(--muted); }

.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opt {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 12px;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--field-bg); cursor: pointer;
}
.opt:hover { border-color: var(--field-line); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt .letter {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--field-line); font-weight: 800; font-size: .9rem;
}
.opt .txt { padding-top: 1px; }
.opt .txt .en { margin-top: 2px; font-size: .93rem; color: var(--muted); }
.opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt:has(input:checked) { border-color: var(--text); }
.opt:has(input:checked) .letter { background: var(--text); color: var(--bg); border-color: var(--text); }

/* After an answer (quiz.js adds the classes) */
.answered .opt { cursor: default; }
.answered .opt:hover { border-color: var(--line); }
.opt.right { border-color: #1F8A4C; background: #E7F6EC; }
.opt.right .letter { background: #1F8A4C; border-color: #1F8A4C; color: #FFFFFF; }
.opt.wrong { border-color: #C0362C; background: #FCEBEA; }
.opt.wrong .letter { background: #C0362C; border-color: #C0362C; color: #FFFFFF; }
.opt.right .txt .en, .opt.wrong .txt .en { color: #3A3833; }
.opt.right, .opt.wrong { color: #1C1B19; }
@media (prefers-color-scheme: dark) {
  .opt.right { background: #173A26; border-color: #3FBF75; color: var(--text); }
  .opt.right .letter { background: #3FBF75; border-color: #3FBF75; color: #10140F; }
  .opt.wrong { background: #3F1D1A; border-color: #F07A6E; color: var(--text); }
  .opt.wrong .letter { background: #F07A6E; border-color: #F07A6E; color: #1C1B19; }
  .opt.right .txt .en, .opt.wrong .txt .en { color: var(--muted); }
}
.verdict { margin: 12px 0 0; font-weight: 800; }
.verdict:empty { display: none; }
.is-right .verdict { color: #1F7A44; }
.is-wrong .verdict { color: #B3261E; }
@media (prefers-color-scheme: dark) { .is-right .verdict { color: #5DD38E; } .is-wrong .verdict { color: #FF9488; } }

.why { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.why summary { cursor: pointer; font-weight: 700; color: var(--link); min-height: 32px; display: flex; align-items: center; }
.why p { margin: 8px 0 4px; }
.why p.en { color: var(--muted); font-size: .95rem; }
/* With JS the summary is a "show again" control; the feedback line already says right/wrong. */
.js .q fieldset:not(.answered) .why { display: none; }

/* Result + calls to action */
.result { margin-top: 24px; border: 2px solid var(--amber); }
.result:focus { outline: none; }
.result h2 { margin-bottom: 4px; }
.r-pct { font-size: 1.5rem; font-weight: 800; margin: 0 0 8px; }
.r-pct.pass { color: #1F7A44; }
.r-pct.fail { color: #B3261E; }
@media (prefers-color-scheme: dark) { .r-pct.pass { color: #5DD38E; } .r-pct.fail { color: #FF9488; } }
.r-actions { margin: 12px 0 0; }
.btn-light-line { background: transparent; color: var(--text); border-color: var(--field-line); cursor: pointer; font-family: inherit; }
.btn-light-line:hover { border-color: var(--text); }

.cta-final { margin-top: 24px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
@media (max-width: 559px) { .cta-row .btn { width: 100%; } }

.faq .disclaimer { margin-top: 20px; }

/* Result hooks (src/cdl/funnel.ts via cdl-quiz-lib.mjs; quiz.js shows one) */
.r-weak { margin: 4px 0 12px; }
.r-weak h3 { font-size: 1rem; margin: 0 0 4px; }
.r-weak ol { margin: 0; padding-left: 1.3em; }
.r-weak li { font-weight: 700; }
.hook { margin: 16px 0 8px; padding: 18px 16px; border-radius: var(--radius); background: var(--note-bg); border: 1px solid var(--note-line); }
.hook-title { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.25; }
.hook-body { margin: 0 0 12px; }
.hook-buy { margin: 10px 0 0; }
.hook-cta { margin: 10px 0 0; }
.hook .btn-block { width: 100%; text-align: center; white-space: normal; }
.hook-note { margin: 4px 0 0; color: var(--muted); }
.hook-soon { margin: 12px 0 0; font-weight: 700; }
.hook-cross { margin: 14px 0 0; padding: 10px 0 0 1.1em; border-top: 1px solid var(--note-line); font-size: .95rem; }
.hook-cross li { margin: 4px 0; }
.restore-link { word-break: break-all; }
@media (prefers-color-scheme: dark) { .hook { background: #2E241F; border-color: #7A4A33; } .hook-cross { border-color: #7A4A33; } }