/* =============================================================
   quiz.css   (wS-quiz, 2026-08-02)

   The quiz and challenge lane's own sheet, registered from each
   page's code behind with PageAssets.StyleLink so it lands in
   the middle head slot: site.css, then this, then chrome.css.
   Dropping a .css into the theme folder does NOT link it.

   WHAT THIS FILE IS. The five inline <style> blocks the first
   edition kept in Quizzes.aspx, Quiz.aspx, QuizResult.aspx,
   QuizChallenge.aspx and RequestQuiz.aspx, plus the handful of
   style="..." attributes those pages' code behinds emitted,
   centralized into one canonical copy. Not one declaration has
   been redesigned: the mechanism changed and
   nothing the eye sees did.

   DUPLICATES COLLAPSED, and the class names are deliberately
   BOTH kept. The take page and the challenge page carried two
   prefixes for the same shapes (.qblock / .qcblock, .qopts /
   .qcopts, .qopt / .qcopt, .qempty / .qcempty, .qback /
   .qcback) with byte-identical declarations in two files. They
   are one grouped rule each here, so a fix reaches both, while
   the markup ports across unchanged. Renaming them would be a
   redesign of a thing nobody asked to change.

   EVERYTHING IS rem AND em, and no box around text has a fixed
   height, so the A- / A+ control and OS text scaling move the
   whole surface as one piece. Checked at 150% and 200%.
   ============================================================= */

/* ---- shared: the back link, the empty state ---------------- */
.qback,.qcback{color:var(--faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;text-decoration:none}
.qback:hover,.qcback:hover{color:var(--muted)}
.qempty,.qcempty{color:var(--muted);font-size:.92rem;padding:8px 0}

/* The page heading on the take and challenge pages sat under an
   inline margin-top:8px, because the back link above it is a
   small-caps line rather than a block. */
.qhead{margin-top:8px}

/* ---- Quizzes.aspx: the catalogue --------------------------- */
.qtopics{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px}
.qtopics a{display:inline-block;padding:6px 13px;border:1px solid var(--edge);border-radius:999px;font-size:.82rem;color:var(--muted);text-decoration:none;background:var(--panel2)}
.qtopics a:hover{color:var(--ink);border-color:var(--edge2)}
.qtopics a.on{color:var(--ink);border-color:var(--gold);background:var(--panel)}
/* w2208-quizcards: the level filter row (All/Beginner/Intermediate/Expert),
   same chip idiom as the category picker above so the two rows read as one
   family of controls; .qlevelslabel mirrors .qlenlabel's caption-before-chips
   shape from the take page's own length switcher. */
.qlevelslabel{color:var(--faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-right:2px}
.qcatgroup{margin:0 0 30px}
.qcatgroup:last-child{margin-bottom:0}
.qcathd{font-family:var(--serif);color:var(--gold);font-size:1.12rem;font-weight:600;margin:0 0 12px;padding:0 0 7px;border-bottom:1px solid var(--edge)}
/* THE CATALOGUE IS NOT A FORM, so it does not want a form's measure.
   Measured 2026-08-17 in a real browser at a 1280px viewport: the page sat
   inside .authwrap, whose 520px cap is right for a sign-in card and wrong
   for a grid, so 57 quiz boxes rendered ONE PER ROW in a 480px column and
   the document ran to 21,628 pixels of scroll. The grid rule below was
   already asking for as many columns as would fit; it had no width to fit
   them in. This modifier gives the catalogue the width, and the cap stays
   well short of full bleed so the descriptions keep a readable line length.
   Owner-reported the same day: "the page can be long and this may make it
   more user friendly". */
.authwrap.quizwrap{max-width:1180px}

/* minmax raised from 260px with the same measurement: a card now carries
   three dropdowns and a button, and at 260px they wrapped onto four rows,
   which made every card tall enough to undo what the extra columns win.
   340px holds Difficulty and Length side by side on one row. */
/* min(340px,100%) rather than a bare 340px: a bare minimum LARGER than the
   container makes a grid track overflow the page, and 340px is wider than a
   320px phone's content box. The min() keeps the track from ever exceeding
   the space it has, which is the same clipping trap html{overflow-x:hidden}
   would hide rather than fix. */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:14px}
/* w2208-quizcards: ONE CARD PER QUIZ FAMILY (owner request, 2026-08-17),
   rebuilt from a whole-card link into a plain block holding real prose plus
   a GET form's three selects and its Take Quiz button. No text-decoration or
   color:inherit reset needed any more since nothing here is an anchor. */
.quizcard{display:block;padding:16px 18px;border:1px solid var(--edge);border-radius:12px;background:var(--panel2)}
.quizcard:hover{border-color:var(--gold)}
.quizcard .qtitle{font-size:1.02rem;font-weight:600;margin-bottom:4px}
.quizcard .qmeta{color:var(--faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.quizcard .qdesc{color:var(--muted);font-size:.9rem;line-height:1.45;margin-bottom:14px}
/* The three dropdowns plus the button. flex-wrap so they stack on a phone or
   at 200 percent text rather than being clipped or overflowing the card;
   min-width:0 on the field lets its own select shrink instead of forcing the
   row wider than the panel, the same trap SiteUpdate 47's .qopt>span fix
   (below) already documents for this file. */
.qcardform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}
.qcardfield{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 120px}
.qcardfield label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.qcardfield select{padding:8px 10px;border:1px solid var(--edge);border-radius:9px;background:var(--panel);color:inherit;font-size:.88rem;max-width:100%}
.qcardform .btn{flex:0 0 auto}
.qtools{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.qtools a{display:inline-flex;align-items:center;text-decoration:none}

/* This week's quiz, above everything. Its own block rather than a card in the
   grid, because a card in the grid is one of many and this is the one thing the
   page is asking you to come back for. rem and em throughout so the A- / A+
   control reaches it, and no fixed height, so a long title wraps rather than
   spilling. */
.qweekly{border:1px solid var(--gold);border-radius:14px;background:linear-gradient(180deg,var(--panel2),var(--panel));
         padding:18px 20px;margin:0 0 22px;box-shadow:var(--shadow)}
.qweeklytag{color:var(--gold);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:650}
.qweeklytitle{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin:6px 0 0;line-height:1.3;overflow-wrap:anywhere}
.qweeklytitle a{color:var(--ink);text-decoration:none}
.qweeklytitle a:hover{color:var(--gold)}
.qweeklydesc{color:var(--muted);font-size:.92rem;line-height:1.5;margin:8px 0 0}
.qweeklyacts{margin-top:14px}

/* Opt-in leaderboards. A wide table has to carry its own scroller, because
   html{overflow-x:hidden} would otherwise clip it with no scrollbar and no sign
   anything was missing. */
.qlb{margin:26px 0 0}
.qlb h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 6px}
.qlbnote{color:var(--faint);font-size:.84rem;margin:0 0 12px;line-height:1.5}
.qlbwrap{overflow-x:auto}
.qlb table{width:100%;border-collapse:collapse;font-size:.92rem}
.qlb th,.qlb td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--edge)}
.qlb th{color:var(--faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.qlb tr.you td{background:var(--panel2)}

/* ---- Quiz.aspx and QuizChallenge.aspx: the question block ---
   One grouped rule for two prefixes that carried identical
   declarations in two files. See the header note. */
.qblock,.qcblock{border:1px solid var(--edge);border-radius:12px;background:var(--panel2);padding:16px 18px;margin:0 0 14px}
.qblock legend,.qblock .qprompt,.qcblock .qcprompt{font-size:1rem;font-weight:600;padding:0;margin:0 0 12px}

/* Ruling 502 (2026-08-14): js/quiz.js's per-question read-aloud button,
   appended as the prompt's own trailing child, the same placement
   chrome.css's ".report h2 .dspeak{margin-left:.8em}" already uses for a
   read control inside a block heading. .dspeak's own margin-left:auto
   (chrome.css) resolves to nothing here, .qprompt/.qcprompt are not flex
   containers, so this is the whole override needed; no new button shape. */
.qblock .qprompt .dspeak,.qcblock .qcprompt .dspeak{margin-left:.6em}
.qopts,.qcopts{display:flex;flex-direction:column;gap:8px}
.qopt,.qcopt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--edge);border-radius:9px;background:var(--panel);cursor:pointer;font-size:.94rem}
.qopt input,.qcopt input{margin-top:3px}
/* SiteUpdate 47, codex-finalqa-20260815: a long answer option overflowed the quiz
   viewport at 200 per cent text on mobile, a content-width defect separate from
   SiteUpdate 46's header panel. .qopt/.qcopt is a flex row (input, then the bare
   span carrying the option's own text; Quiz.aspx.vb/QuizChallenge.aspx.vb both
   emit exactly that shape, take page and review page alike); a flex item's
   default min-width is auto, not 0, so the span refused to shrink below its own
   text's min-content width and pushed the row wider than the panel rather than
   wrapping, exactly the trap CLAUDE.md's accessibility section names ("every flex
   row of text either wraps or gives its shrinkable member min-width:0"). The
   `.qmark` sibling (Correct/Incorrect, Your answer, Correct answer) already
   carries its own white-space:nowrap and is untouched: this rule is scoped to
   the DIRECT CHILD span, the option text alone. overflow-wrap:anywhere matches
   the treatment .qweeklytitle already carries above for the identical reason,
   a single long word with no natural break point. */
.qopt>span,.qcopt>span{min-width:0;overflow-wrap:anywhere}
.qopt.correct{border-color:var(--gold);background:var(--panel2)}
.qopt.wrong{border-color:#a4443a}

/* THE ANSWER STATE IS CARRIED BY WORDS, NEVER BY COLOUR ALONE
   (WCAG 1.4.1). The border tint above is decoration; .qmark
   holds the real sentence ("Correct answer", "Your answer") and
   the prompt line carries "Correct" or "Incorrect" as text. A
   reader who sees no colour at all loses nothing. */
.qmark{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-left:auto;white-space:nowrap}
.qmark.ok{color:var(--gold)}
.qmark.no{color:#c56}
.qexpl{margin:12px 0 0;padding:12px 14px;border-left:2px solid var(--gold);background:var(--panel);border-radius:0 8px 8px 0;color:var(--muted);font-size:.9rem;line-height:1.5}
.qscore{border:1px solid var(--gold);border-radius:12px;background:var(--panel2);padding:18px 20px;margin:0 0 20px}
.qscore .big{font-size:1.6rem;font-weight:700}
.qscore .sub{color:var(--muted);font-size:.92rem;margin-top:4px}
.qactions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* A link styled as a button sits beside real buttons in these rows, and the
   first edition patched the alignment with an inline style at every call site.
   One rule instead. */
.qactions .btn,.qcactions .btn,.qracts .btn,.qweeklyacts .btn{display:inline-flex;align-items:center;text-decoration:none}

/* The length switcher. Real links in a wrapping row, so it works with no script,
   each length is bookmarkable, and it reflows rather than truncating on a phone
   or at 200 percent text. em rather than px throughout, so the A- / A+ control
   reaches it. */
.qlens{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px}
.qlenlabel{color:var(--faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;margin-right:4px}
.qlen{font-size:.85rem;color:var(--muted);text-decoration:none;padding:6px 12px;border:1px solid var(--edge);border-radius:9px;background:var(--panel)}
.qlen:hover{color:var(--ink);border-color:var(--edge2)}
.qlen.on{color:#1a1508;background:var(--gold);border-color:var(--gold);font-weight:650}

/* The draft-preview banner, which the first edition wrote as a long inline
   style attribute on every branch of the take page. */
.qpreview{margin:0 0 16px;padding:11px 14px;border:1px solid var(--gold);border-radius:10px;background:var(--panel2);font-size:.9rem}

/* The answer key behind a closed disclosure on a settled challenge. */
.qckey{margin-top:18px}

/* ---- QuizResult.aspx: the shareable card ------------------- */
/* Everything in rem and em so the A-/A+ control and OS text scaling move it as
   one piece; no fixed-height box anywhere, because a score in a box that cannot
   grow is the first thing to break at 200 percent text. */
.qrcard{border:1px solid var(--edge);border-radius:16px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  padding:26px 24px;margin:18px 0 0;text-align:center;min-width:0}
.qrscore{font-family:var(--serif);font-size:clamp(2.4rem,12vw,3.6rem);font-weight:600;line-height:1.05;color:var(--gold)}
.qrout{color:var(--muted);font-size:.9rem;margin-top:4px}
.qrquiz{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin-top:14px;overflow-wrap:break-word}
.qrsub{color:var(--muted);font-size:.9rem;margin-top:6px;line-height:1.5}
.qracts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.qrnote{color:var(--faint);font-size:.8rem;line-height:1.5;margin:16px 0 0;text-align:center}

/* ---- QuizChallenge.aspx ------------------------------------ */
.qcfield{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.qcfield label{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.qcfield select{padding:10px 12px;border:1px solid var(--edge);border-radius:9px;background:var(--panel);color:inherit;font-size:.95rem}
.qcscore{border:1px solid var(--gold);border-radius:12px;background:var(--panel2);padding:18px 20px;margin:0 0 18px}
.qcscore .big{font-size:1.5rem;font-weight:700}
.qcscore .sub{color:var(--muted);font-size:.92rem;margin-top:4px}
.qcscore .sub.qcovertime{color:var(--dark-c,#c56)}
.qcrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--edge)}
.qcrow:last-child{border-bottom:0}
.qcrow .who{font-weight:600}
.qcrow .sc{font-variant-numeric:tabular-nums;font-weight:700}
/* The winner mark is generated content, and it is NOT the only place the result
   is stated: the headline above the rows says "You won", "It's a tie" or names
   the winner in real text, so nothing depends on this rendering. */
.qcrow.win .who:after{content:" (winner)";color:var(--gold);font-weight:600;font-size:.85rem}
.qcwait{border:1px solid var(--edge);border-radius:12px;background:var(--panel2);padding:18px 20px;margin:0 0 18px;color:var(--muted)}
.qcactions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.qcsec{margin:22px 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.qclist{display:flex;flex-direction:column;gap:10px}
.qcitem{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--edge);border-radius:10px;background:var(--panel2);padding:12px 14px}
.qcitem .qcinfo{min-width:0}
.qcitem .qcname{font-weight:600}
.qcitem .qcmeta{color:var(--muted);font-size:.85rem;margin-top:2px}
/* The create picker was held to 520px by an inline style. */
.qcform{max-width:520px}
.qcnote{margin:0 0 12px}
.qcgroups{margin:0 0 14px}

/* ---- RequestQuiz.aspx -------------------------------------- */
.rqform{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);margin-bottom:20px}
.rqform label{display:block;font-family:var(--sans);font-size:.8rem;font-weight:650;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin:0 0 6px}
.rqform select,.rqform textarea{width:100%;background:var(--ground);border:1px solid var(--edge2);color:var(--ink);border-radius:9px;padding:9px 11px;font-size:.95rem;font-family:var(--sans)}
.rqform textarea{min-height:84px;resize:vertical}
.rqform select:focus,.rqform textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.rqfield{margin-bottom:16px}
/* The "(optional)" qualifier inside a label, previously an inline style. */
.rqopt{font-weight:400;text-transform:none;letter-spacing:0}
.rqhint{color:var(--faint);font-size:.8rem;margin:6px 0 0}
.rqlist{display:flex;flex-direction:column;gap:8px}
.rqitem{border:1px solid var(--edge);border-radius:11px;padding:12px 14px;background:var(--panel)}
.rqitem .rqtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rqitem .rqtopic{font-family:var(--sans);font-weight:600;font-size:.98rem}
.rqitem .rqdate{margin-left:auto;color:var(--faint);font-size:.78rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.rqitem .rqnote{color:var(--muted);font-size:.88rem;margin-top:6px;white-space:pre-wrap}
.rqitem .rqadmin{color:var(--faint);font-size:.82rem;margin-top:6px;white-space:pre-wrap}
.rqstatus{display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:650;text-transform:uppercase;letter-spacing:.09em;border:1px solid var(--edge2);border-radius:999px;padding:2px 9px;color:var(--faint)}
.rqstatus.pending{color:var(--gold);border-color:var(--gold)}
.rqstatus.accepted{color:var(--shared,#79bcb0);border-color:var(--shared,#79bcb0)}
.rqstatus.fulfilled{color:var(--shared,#79bcb0);border-color:var(--shared,#79bcb0)}
.rqstatus.declined{color:var(--dark-c);border-color:var(--dark-c)}
.rqempty{color:var(--faint)}
.rqsec{font-family:var(--serif);font-size:1.2rem;margin:26px 0 14px}

/* ---- Difficulty badge (w722-quizlevels, 2026-08-11) ---------
   Same idiom as .rqstatus above: a bordered pill, text carries the
   meaning (never color alone, WCAG 1.4.1), tokens only, no new
   colors. rem-sized so the A-/A+ control and OS text scaling reach
   it, no fixed height. Shown on the catalogue card, the weekly
   block and the take page's own header, always through
   QuizDifficulty.Badge so the three surfaces cannot drift apart. */
.qdiff{display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:650;text-transform:uppercase;letter-spacing:.09em;border:1px solid var(--edge2);border-radius:999px;padding:2px 9px;color:var(--faint);white-space:nowrap}
.qdiff.beginner{color:var(--shared);border-color:var(--shared)}
.qdiff.intermediate{color:var(--gold);border-color:var(--gold)}
.qdiff.expert{color:var(--dark-c);border-color:var(--dark-c)}
/* Beside the take page's h1 and on the weekly block, its own line rather
   than crowding the title; on the catalogue card it sits inline in .qmeta
   instead, no extra rule needed there. */
.qdiffline{margin:6px 0 0}

/* ---- QuizLeaderboard.aspx (ruling 445, w788-quizleaderboard) ----
   One topic's own <section class="sec qpodsec">, drawn inside the shared
   .dvpage/.sechd shell (see the page's own header comment for why
   .dvpage rather than .authwrap here). The podium itself is a simple
   wrapping row of up to three place cards, never a fixed-height box, so
   the A-/A+ control and long handles both reflow rather than overflow.
   Placement is carried in real text (.qpodrank says "First Place", not
   a numeral or a colour alone), matching the site's WCAG 1.4.1 rule
   every other badge on this page already follows. */
.qpodsec{margin:0 0 20px}
/* One difficulty's own sub-podium inside a topic section (owner
   clarification 2026-08-11: difficulty is the PARTITION, three separate
   podiums per topic, never a tie break inside one). The level badge IS
   the heading rather than sitting beside one, since QuizDifficulty.Badge
   already carries the level in real text. */
.qpodlevel{margin:0 0 16px}
.qpodlevel:last-child{margin-bottom:0}
.qpodlevelhd{margin:0 0 8px;font-weight:400}
.qpod{display:flex;flex-wrap:wrap;gap:14px}
.qpodplace{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;border:1px solid var(--edge);border-radius:12px;background:var(--panel2)}
.qpodplace.qpod1{border-color:var(--gold);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.qpodrank{font-family:var(--sans);font-size:.72rem;font-weight:650;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint)}
.qpodplace.qpod1 .qpodrank{color:var(--gold)}
.qpodwho{font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.qpodscore{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.qpodtime{font-size:.82rem;color:var(--faint);font-variant-numeric:tabular-nums}

/* One topic's own detail section on the two-level board's PER-TOPIC
   view (ruling 451): identical shell to .qpodsec above, its own name only
   so the two are never accidentally conflated by a future edit. */
.qpoddetailsec{margin:0 0 20px}

/* ---- Ruling 451: the MAIN BOARD's nine-cell grid, first place only --
   Deliberately NOT a CSS grid with fixed rows/columns: at 200% text a
   rigid track layout is exactly the shape CLAUDE.md's accessibility
   section warns against, so this is flex-wrap all the way down and
   reflows to one cell per line on a narrow phone with nothing clipped.
   Each cell is its own short sentence for a screen reader (size, then
   who or the empty state), never relying on grid position to carry
   meaning. */
.qcellgrid{display:flex;flex-direction:column;gap:12px}
.qcelldiff{display:flex;flex-direction:column;gap:6px}
.qcelldifflabel{display:flex}
.qcellrow{display:flex;flex-wrap:wrap;gap:10px}
.qcell{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:9px 12px;border:1px solid var(--edge);border-radius:10px;background:var(--panel2)}
.qcell.qcell-champ{border-color:var(--gold)}
.qcellsize{font-family:var(--sans);font-size:.68rem;font-weight:650;text-transform:uppercase;
  letter-spacing:.09em;color:var(--faint)}
.qcellwho{font-size:.92rem;font-weight:600;overflow-wrap:anywhere}
.qcellscore{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.qcellempty{font-size:.82rem;color:var(--faint);font-style:italic}
.qpodmore{margin:10px 0 0;font-size:.86rem}

/* ---- AccountQuizzes.aspx ----------------------------------- */
/* The bar row itself is site.css's .qptopics / .qprow / .qpbar, already ported.
   What lives here is the two things that were inline attributes. */
.qmbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.qptopicshd{margin:20px 0 4px}

/* THE BAR'S WIDTH IS A CLASS, NOT AN INLINE STYLE, and that is the one place
   this port had to change a mechanism rather than copy it. The first edition
   wrote style="width:NN%" on .qpbar; inline CSS is refused here and the honeypot
   helper is the only sanctioned exception. Fifty-one buckets in steps of two
   carry the same bar to within one percent of its old width, on a track a few
   characters wide, and the EXACT figure was never the bar's job: the row prints
   "3 / 7" and the best percentage as real text beside it, which is also what a
   screen reader gets, because the track is aria-hidden. */
.qprow .qpbar.qpw0{width:0}
.qprow .qpbar.qpw2{width:2%}
.qprow .qpbar.qpw4{width:4%}
.qprow .qpbar.qpw6{width:6%}
.qprow .qpbar.qpw8{width:8%}
.qprow .qpbar.qpw10{width:10%}
.qprow .qpbar.qpw12{width:12%}
.qprow .qpbar.qpw14{width:14%}
.qprow .qpbar.qpw16{width:16%}
.qprow .qpbar.qpw18{width:18%}
.qprow .qpbar.qpw20{width:20%}
.qprow .qpbar.qpw22{width:22%}
.qprow .qpbar.qpw24{width:24%}
.qprow .qpbar.qpw26{width:26%}
.qprow .qpbar.qpw28{width:28%}
.qprow .qpbar.qpw30{width:30%}
.qprow .qpbar.qpw32{width:32%}
.qprow .qpbar.qpw34{width:34%}
.qprow .qpbar.qpw36{width:36%}
.qprow .qpbar.qpw38{width:38%}
.qprow .qpbar.qpw40{width:40%}
.qprow .qpbar.qpw42{width:42%}
.qprow .qpbar.qpw44{width:44%}
.qprow .qpbar.qpw46{width:46%}
.qprow .qpbar.qpw48{width:48%}
.qprow .qpbar.qpw50{width:50%}
.qprow .qpbar.qpw52{width:52%}
.qprow .qpbar.qpw54{width:54%}
.qprow .qpbar.qpw56{width:56%}
.qprow .qpbar.qpw58{width:58%}
.qprow .qpbar.qpw60{width:60%}
.qprow .qpbar.qpw62{width:62%}
.qprow .qpbar.qpw64{width:64%}
.qprow .qpbar.qpw66{width:66%}
.qprow .qpbar.qpw68{width:68%}
.qprow .qpbar.qpw70{width:70%}
.qprow .qpbar.qpw72{width:72%}
.qprow .qpbar.qpw74{width:74%}
.qprow .qpbar.qpw76{width:76%}
.qprow .qpbar.qpw78{width:78%}
.qprow .qpbar.qpw80{width:80%}
.qprow .qpbar.qpw82{width:82%}
.qprow .qpbar.qpw84{width:84%}
.qprow .qpbar.qpw86{width:86%}
.qprow .qpbar.qpw88{width:88%}
.qprow .qpbar.qpw90{width:90%}
.qprow .qpbar.qpw92{width:92%}
.qprow .qpbar.qpw94{width:94%}
.qprow .qpbar.qpw96{width:96%}
.qprow .qpbar.qpw98{width:98%}
.qprow .qpbar.qpw100{width:100%}

/* ---- Quiz.aspx: ruling 447/448/450/454 (w796-quiztimer, 2026-08-11) ----
   The mode picker (the pre-start surface), the mode banner carried onto the
   form itself, the timed notice and countdown, the ranked-cap refusal, and
   the withheld-on-a-miss review note. Same idioms as the rest of this file:
   bordered panels on --panel2, text carries state rather than color alone
   (WCAG 1.4.1), rem/em throughout so the A-/A+ control and OS text scaling
   reach every one of these, checked at 150 to 200 percent text. */

.qmodepick{margin:0 0 8px}
.qmodegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.qmodecard{display:block;padding:18px 20px;border:1px solid var(--edge);border-radius:12px;background:var(--panel2);text-decoration:none;color:inherit}
.qmodecard:hover{border-color:var(--gold)}
.qmodetitle{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--gold);margin-bottom:6px}
.qmodedesc{color:var(--muted);font-size:.9rem;line-height:1.5}

/* The banner carried onto the actual take form, so a member re-reads which
   sitting they are in even after scrolling past the picker. Text alone
   states timed-versus-not; the border tint is decoration only. */
.qmodebanner{margin:0 0 16px;padding:10px 14px;border:1px solid var(--edge2);border-radius:10px;background:var(--panel2);font-size:.88rem;color:var(--muted)}
.qmodebanner.ranked{border-color:var(--gold);color:var(--ink)}

/* The timed notice, the ticking clock and the aria-live announcer. The
   clock is aria-hidden: it is the VISUAL channel, ticking every second,
   which would be unbearable read aloud; .qtimerannounce is the deliberate
   NON-visual channel instead, updated by js/quiz.js only at half time, one
   minute, thirty seconds and ten seconds remaining, and is visually hidden
   (the standard clip-rect technique) so the two channels never appear to
   disagree on screen. */
.qtimer{margin:0 0 18px;padding:14px 16px;border:1px solid var(--gold);border-radius:12px;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.qtimernotice{margin:0 0 8px;font-size:.92rem;line-height:1.5}
.qtimerclock{font-variant-numeric:tabular-nums;font-size:1.3rem;font-weight:700;color:var(--gold)}
.qtimerannounce{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ruling 454's cap refusal, the same panel idiom as .qpreview. */
.qcapnotice{margin:0 0 16px;padding:14px 16px;border:1px solid var(--edge2);border-radius:10px;background:var(--panel2);font-size:.92rem;line-height:1.5}

/* The mode/overtime notes under the score, plain text rows beside .sub. */
.qmodenote{margin-top:4px}
.qmodenote.qovertime{color:var(--dark-c,#c56)}

/* Ruling 450: what used to be .qexpl for a miss is now a short withheld
   notice in the same slot, so the layout does not jump between a hit and a
   miss; the wording itself, not a color, is what a reader is told. */
.qexpl.qwithheld{color:var(--faint);font-style:italic}