/* Test page. Port of proto/test.html onto the engine's markup:
   .quiz-engine-form > fieldset.quiz-engine-question > legend + label.quiz-engine-answer > input.
   Without JS every question is visible; one question per screen only under .js. */

:root { --quiz-engine-scroll-offset: 70px; }
@media (min-width: 900px) { :root { --quiz-engine-scroll-offset: 90px; } }

.thero { position: relative; padding: 18px 0 0; overflow: clip; }
.tg2 { position: relative; display: grid; gap: 16px; }
.tintro { min-width: 0; }
.th1 { margin-top: 2px; font-size: 28px; line-height: 1.04; font-weight: 600; letter-spacing: -.04em; text-wrap: balance; }
.tmeta { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 15px; color: var(--tx2); }
.tmeta:empty { display: none; }
.tmeta p { margin: 0; display: inline-flex; align-items: center; gap: 7px; }
.tmeta p::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.tint { max-width: 32em; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--tx-body); }
.tint p { margin: 0 0 .6em; }
.tint p:last-child { margin-bottom: 0; }
.quiz-engine-disclaimer { font-size: 13px; color: var(--tx2); }
.tsum { display: none; }
@media (min-width: 600px) { .th1 { font-size: 38px; } }

/* friend plate (?r=) */
.frp { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 12px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--sys) 14%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sys) 45%, transparent); }
.frp .gl { flex: none; width: 24px; height: 24px; color: var(--sys); }
.frp p { margin: 0; line-height: 1.3; }
.frp b { font-size: 15px; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.frp b a { color: var(--sys); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.frp span { font-size: 13px; line-height: 1.3; color: var(--tx2); }

/* question card */
.qcol { min-width: 0; }
.qz { position: relative; padding: 14px 14px 12px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2), 0 30px 60px -34px #000; }
.qtop, .pg { display: none; }
/* min-height = the Back button's 44px: the card does not grow when it appears on question 2 */
.js .qtop { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--tx2); }
.qtop b { font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; }
.qback { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 44px; padding: 0 12px 0 8px; border-radius: var(--r-ctl); font-size: 15px; color: var(--tx2); }
.qback svg { width: 16px; height: 16px; flex: none; }
.js .pg { display: block; margin-top: 8px; margin-bottom: 4px; }
.js .pg.seg { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; }
.pg.seg i { height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); transition: background-color .3s; }
.pg.seg i.d { background: var(--sys); }
.pg.seg i.c { background: rgba(255,255,255,.5); }
.pg.bar { position: relative; height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); overflow: hidden; }
.pg.bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: var(--r-pill); background: var(--sys); transition: width .4s var(--ease); }
.qfoot { display: none; justify-content: flex-end; margin: 10px 0 0; font-size: 13px; color: var(--tx3); }

/* engine form */
.quiz-engine-progress { display: none; }
.quiz-engine-question { margin: 0; padding: 0; border: 0; min-width: 0; counter-reset: ans; }
.quiz-engine-question + .quiz-engine-question { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.js .quiz-engine-form:has(.is-active) .quiz-engine-question:not(.is-active) { display: none; }
.js .quiz-engine-form:has(.is-active) .quiz-engine-question.is-active { margin-top: 0; padding-top: 0; border-top: 0; animation: qin .4s var(--ease) both; }
@keyframes qin { from { opacity: 0; transform: translateX(18px); } }
.quiz-engine-question legend { display: block; width: 100%; padding: 18px 0 16px; font-size: 24px; line-height: 1.16; font-weight: 600; letter-spacing: -.028em; text-wrap: pretty; }
.quiz-engine-answer { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: var(--r-ctl); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.28; letter-spacing: -.011em; cursor: pointer; counter-increment: ans; transition: background-color .15s, box-shadow .15s, transform .12s; }
.quiz-engine-answer + .quiz-engine-answer { margin-top: 8px; }
.quiz-engine-answer::before { content: counter(ans); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-badge); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--tx2); transition: background-color .15s, color .15s; }
.quiz-engine-answer:active { transform: scale(.992); }
.quiz-engine-answer input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.quiz-engine-answer:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.quiz-engine-answer:has(input:checked) { background: color-mix(in srgb, var(--sys) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--sys); }
.quiz-engine-answer:has(input:checked)::before { background: var(--sys); color: var(--on-sys); box-shadow: none; }
.quiz-engine-timer { margin-top: 8px; font-size: 13px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.quiz-engine-submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 16px; padding: 0 20px; border-radius: var(--r-ctl); background: var(--tx); color: var(--bg); font-size: 15px; font-weight: 500; text-align: center; }
/* with JS the button appears only once every question is answered (auto submit normally
   wins); test.js sets data-done on the card, since :has() cannot be nested */
.js .qz:not([data-done]) .quiz-engine-submit { display: none; }
.quiz-engine-form.is-completed .quiz-engine-question { display: none; }
.quiz-engine-errors { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-ctl); background: color-mix(in srgb, #ff5f5f 14%, var(--card)); font-size: 15px; }

/* about this test */
.ab { display: grid; gap: 32px; margin-top: 20px; }
.ab h3 { margin-bottom: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.016em; }
.ab .ab-h { margin-top: 22px; }
.ab p, .ab li { font-size: 15px; line-height: 1.55; color: var(--tx-body); }
.ab p { margin: 0 0 .7em; }
.ab ol { margin: 0; padding-left: 1.2em; }
.ab li { margin-bottom: .55em; overflow-wrap: anywhere; }
.ab li a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.chev { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--tx3); transition: transform .2s; }
details[open] > summary .chev { transform: rotate(180deg); }
.faq .fa { padding-bottom: 6px; }
.sign { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--tx2); }
.sign p { margin: 0; color: var(--tx2); }
.sign.has-av::before { content: ""; flex: none; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--card) url(../img/author-head-160.webp) center / cover; box-shadow: inset 0 0 0 1px var(--line); }
.sign a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tx); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* rating: Lex Rating markup, restyled. Star size (44px = tap target) is the plugin
   setting; the star itself is drawn 21px inside each 44px cell by the mask below. */
.rate { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 8px; margin-top: 28px; padding: 10px 16px; border-radius: var(--r-ctl); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--tx2); }
.rate > b { font-weight: 500; color: var(--tx); }
.lex-rating-wp { display: flex; align-items: center; gap: 10px; }
.lex-rating-wp__stars { position: relative; width: calc(var(--lex-rating-wp-star-size, 44px) * 5); height: var(--lex-rating-wp-star-size, 44px); flex-shrink: 0; }
.lex-rating-wp__stars-bg, .lex-rating-wp__stars-fg { height: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath transform='translate(11.5 11.5) scale(.875)' d='M12 2.6l2.9 6.1 6.7.8-5 4.6 1.3 6.6L12 16.9l-5.9 3.3 1.3-6.6-5-4.6 6.7-.8z'/%3E%3C/svg%3E") left center / var(--lex-rating-wp-star-size, 44px) var(--lex-rating-wp-star-size, 44px) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath transform='translate(11.5 11.5) scale(.875)' d='M12 2.6l2.9 6.1 6.7.8-5 4.6 1.3 6.6L12 16.9l-5.9 3.3 1.3-6.6-5-4.6 6.7-.8z'/%3E%3C/svg%3E") left center / var(--lex-rating-wp-star-size, 44px) var(--lex-rating-wp-star-size, 44px) repeat-x; }
.lex-rating-wp__stars-bg { width: 100%; background-color: rgba(255,255,255,.26); }
.lex-rating-wp__stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; background-color: var(--sys); }
.lex-rating-wp__stars-input { position: absolute; inset: 0; display: flex; }
.lex-rating-wp__star-hit { flex: 1; cursor: pointer; border-radius: var(--r-badge); }
.lex-rating-wp__value { font-size: 15px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.lex-rating-wp.is-voting { opacity: .6; pointer-events: none; }
.lex-rating-wp.is-voted .lex-rating-wp__stars-input { display: none; }

@media (max-height: 700px) and (max-width: 899px) {
  .thero { padding-top: 12px; } .th1 { font-size: 28px; } .tmeta { margin-top: 6px; } .tint { margin-top: 6px; line-height: 1.42; }
  .tg2 { gap: 12px; } .quiz-engine-question legend { padding: 12px 0 10px; font-size: 20px; } .quiz-engine-answer { min-height: 48px; padding: 8px 12px; } .quiz-engine-answer + .quiz-engine-answer { margin-top: 6px; }
}
@media (min-width: 900px) {
  .thero { padding-top: 48px; }
  .tg2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  .tintro { position: sticky; top: 28px; padding-top: 10px; }
  .th1 { font-size: 56px; }
  .tint { font-size: 17px; }
  .tsum { display: block; margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--line); }
  .tsum a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .qz { padding: 22px 26px 18px; min-height: 470px; }
  .quiz-engine-question legend { font-size: 28px; padding: 26px 0 22px; }
  .quiz-engine-answer { min-height: 62px; font-size: 17px; padding: 14px 16px; }
  .js .qfoot { display: flex; }
  .ab { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
  /* Every question in one grid cell, the inactive ones invisible but still in
     the layout: the card is as tall as the longest question from the start and
     the blocks below it stop jumping between questions (Lex, 2026-11-11). */
  .js .quiz-engine-form:not(.is-completed):has(.is-active) { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .js .quiz-engine-form:not(.is-completed):has(.is-active) > .quiz-engine-question { grid-area: 1 / 1; }
  .js .quiz-engine-form:not(.is-completed):has(.is-active) > .quiz-engine-question:not(.is-active) { display: block; visibility: hidden; margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .qback:hover { color: var(--tx); background: rgba(255,255,255,.06); }
  .quiz-engine-answer:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line2); }
  .quiz-engine-answer:has(input:checked):hover { background: color-mix(in srgb, var(--sys) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--sys); }
  .lex-rating-wp__star-hit:hover { background: rgba(255,255,255,.07); }
  .tsum a:hover, .sign a:hover, .ab li a:hover { color: var(--tx); }
}

/* finished run: the card's controls go away with the questions */
.qz:has(.quiz-engine-form.is-completed) .qtop,
.qz:has(.quiz-engine-form.is-completed) .pg,
.qz:has(.quiz-engine-form.is-completed) .qfoot { display: none; }

/* resume a started test / answers not sent (proto/test.html ?state=resume|senderr) */
.hp[hidden] { display: none; }
.qz.hold .qtop, .qz.hold > .pg, .qz.hold #quiz-engine-app, .qz.hold .qfoot { display: none; }
.hp { padding: 6px 2px 4px; }
.hp .hi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-ctl); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx); }
.hp .hi svg { width: 22px; height: 22px; }
.hp.err .hi { color: #ff8a80; }
.hp h2 { margin-top: 16px; font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.028em; }
.hp p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--tx-body); }
.hp .hpg .pg { display: block; margin-top: 18px; }
.hp .hpg .pg.seg { display: grid; }
.hp .hm { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.hp .acts { display: grid; gap: 8px; margin-top: 22px; }
.hp .acts .btn { width: 100%; min-height: 52px; white-space: normal; text-align: center; }
.hp .net { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--tx2); }
.hp .net i { flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: #ff8a80; }
.hp .net.on i { background: #4ade80; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.btn .spin { width: 16px; height: 16px; border-radius: var(--r-pill); border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn .spin { animation-duration: 2.4s; } }
.qz.hold .quiz-engine-errors { display: none; }

/* round 2: "Take the test" only scrolls (phones), the intro hides after the first answer */
.tgo { width: 100%; margin-top: 18px; }
.thero.started .tmeta, .thero.started .tint, .thero.started .tsum, .thero.started .tgo, .thero.started .frp { display: none; }
/* "About this test": four closed sections */
.acc { max-width: 760px; margin-top: 16px; border-top: 1px solid var(--line); }
.acc > details { border-bottom: 1px solid var(--line); }
.acc > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--tx); cursor: pointer; list-style: none; }
.acc > details > summary::-webkit-details-marker { display: none; }
.acc > details > summary svg { flex: none; width: 20px; height: 20px; color: var(--tx2); transition: transform .2s; }
.acc > details[open] > summary svg { transform: rotate(180deg); }
.accb { padding: 4px 0 24px; font-size: 17px; line-height: 1.6; color: var(--tx-body); }
.accb p { margin: 0; } .accb p + p { margin-top: 12px; }
.accb ol { margin: 0; padding-left: 22px; font-size: 15px; } .accb li + li { margin-top: 8px; }
.accb li { overflow-wrap: anywhere; } .accb li a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.accb .sign { margin-top: 20px; }
.accb .faq details:first-child { border-top: 0; }
.accb .rate { margin-top: 0; }
@media (min-width: 900px) { .tgo { display: none; } }