/* backend\public\static\public\css\quiz.css
   The quiz pages follow the deck pages (My decks is the benchmark): same
   serif font, black text, 640px centred column, 60px below the header,
   22px titles, compact dark button, deck-style rows. Accents: muted
   #6b7280 / #94a3b8, border #e5e7eb, dark button #111827, blue #185fa5. */

/* ---------------------------------------------------------------------
   Font and page frame, matching the deck pages. Those don't load site.css,
   so they render in the browser's default serif with its default 8px body
   margin; quiz pages do load site.css (header, breadcrumbs...), so the
   same look is set explicitly here, on body.quiz-section (every quiz
   template's <body>). "Times New Roman", Times is what that default is on
   desktop; generic serif covers the rest, as it does on the deck pages.
   --------------------------------------------------------------------- */
body.quiz-section {
    font-family: "Times New Roman", Times, serif;
    color: #000000;
    background: #ffffff;
    margin: 8px;
}

/* 640px of content, like .deck-page (max-width 640 + 24px padding each
   side, content-box) -- here the box is border-box, so 640 + 48. */
.page {
    max-width: 688px;
    margin: 60px auto 0;
    padding: 0 24px 64px;
    box-sizing: border-box;
}

.page h1 {
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 4px;
}

@media (max-width: 640px) {
    .page {
        margin-top: 32px;
        padding: 0 12px 48px;
    }
}

.btn-primary {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #111827;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-primary:hover {
    background: #1f2937;
    text-decoration: none;
}

/* =========================================================
   MY QUIZZES — page head, type tabs, list rows (the deck list's layout;
   its stat cells, HSK pills and share rows reuse deck.css's classes)
   ========================================================= */

.quiz-page-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.quiz-page-head h1 {
    margin: 0;
}

.type-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}

.type-tab {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
    padding: 10px 2px;
    cursor: pointer;
    color: #94a3b8;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.type-tab.is-active {
    color: #111827;
    border-bottom-color: #111827;
}

.type-tab:disabled {
    cursor: default;
}

.type-tab-count {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 1px 7px;
}

.type-tab-soon {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
}

.quiz-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* My Quizzes rows: the deck list's row -- gutter | name | numbers | actions on one
   grid line (fixed number and action widths, so the header labels line up with
   every row's numbers), then the skill pills and the share rows. The whole row is
   one grid, so the phone layout can put the actions under the pills. */
.quiz-list-header-row,
.quiz-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 236px 180px;
    grid-template-areas: "gutter name stats actions";
    align-items: center;
    column-gap: 14px;
    padding: 10px 8px;
    text-align: left;
}

.quiz-list-header-row {
    font-size: 12px;
    color: #94a3b8;
}

.quiz-list-header-row[hidden] {
    display: none;
}

.quiz-list-header-row .deck-stat {
    display: block;
    text-align: right;
    white-space: nowrap;
}

.quiz-row {
    grid-template-areas:
        "gutter name  stats actions"
        ".      pills pills pills"
        ".      share share share"
        ".      link  link  link";
    padding-bottom: 0;
    border-top: 1px solid #f1f5f9;
    font-size: 14px;
}

/* Every skill passed. */
.quiz-row.is-passed {
    background: #f6fbf8;
}

.quiz-cell-gutter {
    grid-area: gutter;
    align-self: start;
    padding-top: 2px;
}

.quiz-cell-name {
    grid-area: name;
    min-width: 0;
}

.quiz-cell-stats {
    grid-area: stats;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

.quiz-stat-questions { min-width: 60px; }
.quiz-stat-known { min-width: 64px; }
.quiz-stat-last { min-width: 84px; }

.quiz-row .deck-stat-value {
    white-space: nowrap;
}

/* Last practised more than a week ago, and not every skill passed yet. */
.quiz-row .quiz-stat-stale {
    color: #b54708;
}

.quiz-row .quiz-stat-never {
    color: #9ca3af;
}

.quiz-cell-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
}

.quiz-row > .deck-lane-breakdown {
    grid-area: pills;
    padding: 8px 0 6px;
}

.quiz-row > .deck-share-checkbox-row {
    grid-area: share;
    padding: 0 0 4px;
}

.quiz-row > .deck-share-link-row {
    grid-area: link;
    padding: 0 0 10px;
}

.quiz-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 2px;
    min-width: 0;
    font-weight: 500;
}

/* The deck list's title is a plain, unstyled link: default link colour,
   underlined. site.css restyles <a>, so restore the default here. */
.quiz-row-title {
    font-size: 14px;
    color: #0000ee;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.quiz-row-title:visited {
    color: #551a8b;
}

/* Under the name: characters, tones (readings), HSK levels. */
.quiz-row-meta {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
    unicode-bidi: plaintext;
}

/* Under the meta line: saved items no longer in the dictionary (not in Known X/N). */
.quiz-row-unavailable {
    margin-top: 2px;
    font-size: 12px;
    color: #92400e;
}

.quiz-chip {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    background: #eef2f7;
}

.quiz-chip-passed {
    color: #15803d;
    background: #dcfce7;
}

/* Gutter: every skill passed (green ✓), some (ring "N/M"), none (grey ring). */
.quiz-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.quiz-mark-some {
    border-color: #16a34a;
    color: #15803d;
}

.quiz-mark-all {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    font-size: 13px;
}

/* Skill pills: the deck list's lane pills, single-select. */
.quiz-skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 12px;
    font-size: 12px;
    color: #374151;
    background: #ffffff;
    border-color: #d1d5db;
}

.quiz-skill-pill:hover {
    background: #f8fafc;
    color: #111827;
}

.quiz-skill-pill.is-selected {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e3a8a;
}

.quiz-skill-pill:disabled {
    cursor: default;
    transform: none;
    color: #9ca3af;
    background: #f9fafb;
    border-color: #e5e7eb;
}

.quiz-skill-check {
    color: #16a34a;
    font-weight: 700;
}

/* After the pills: Start over, while the selected skill has a run in progress. */
.quiz-start-over-link {
    align-self: center;
    margin-left: 4px;
    font-size: 12px;
    color: #2563eb;
    text-decoration: underline;
    white-space: nowrap;
}

.quiz-start-over-link[hidden] {
    display: none;
}

@media (max-width: 640px) {
    /* The tab strip scrolls within itself rather than widening the page. */
    .type-tabs {
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .type-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .quiz-list-header-row {
        display: none;
    }

    /* One column: name and chip, the numbers on one line, the pills, then the actions. */
    .quiz-row {
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas:
            "gutter name"
            "gutter stats"
            ".      pills"
            ".      actions"
            ".      share"
            ".      link";
        column-gap: 10px;
        row-gap: 6px;
        padding: 12px 6px 0;
    }

    .quiz-cell-stats {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .quiz-cell-stats .deck-stat {
        min-width: 0;
    }

    .quiz-cell-actions {
        justify-content: flex-start;
    }

    .quiz-start-link .quiz-start-count {
        display: inline;
    }

    .quiz-row > .deck-lane-breakdown {
        padding: 2px 0;
    }
}

/* Action cluster: one pill container, filled Play button + icon-only
   Edit/Delete riding next to it — same pattern as the deck list's
   .deck-action-cluster. */
.quiz-action-cluster {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f8fafc;
    border-radius: 999px;
    padding: 3px;
    flex-shrink: 0;
}

.quiz-start-link {
    color: #ffffff;
    background: #185fa5;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    line-height: 1.4;
    text-decoration: none;
}

/* Practice on a phone: the card's Hint / Next row, while the on-screen keyboard (with its
   own Hint and Next keys) is up -- quiz_pinyin_practice.js sets the class. */
.review-pinyin-actions.quiz-actions--keyboard {
    display: none;
}

/* Continue's "(X/N)": on phones only -- on desktop Known shows it beside the button. */
.quiz-start-count {
    display: none;
}

.quiz-start-link:hover {
    background: #124d87;
    color: #ffffff;
    text-decoration: none;
}

.quiz-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.quiz-icon-btn:hover {
    background: #e5e7eb;
    color: #111827;
}

.quiz-icon-btn-danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

.quiz-icon-btn-armed {
    background: #dc2626;
    color: #ffffff;
}

.quiz-icon-btn-armed:hover {
    background: #b91c1c;
    color: #ffffff;
}

.empty-state {
    padding: 28px 0;
    color: #6b7280;
    font-size: 15px;
    border-bottom: 1px solid #e5e7eb;
}

.signed-out-copy {
    color: #6b7280;
    font-size: 15px;
    max-width: 48ch;
    margin: 10px 0 20px;
}

/* =========================================================
   QUIZ LANDING (type picker at /quiz/new/)
   ========================================================= */

.quiz-landing-hero {
    text-align: center;
    margin: 32px 0;
}

.quiz-landing-hero p {
    color: #6b7280;
}

.quiz-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.quiz-type-card {
    color: inherit;
}

.quiz-type-card h2 {
    font-size: 16px;
    margin: 0 0 6px;
    color: #111827;
}

.quiz-type-card p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

a.quiz-type-card:hover {
    border-color: #94a3b8;
    text-decoration: none;
}

.quiz-type-card--soon {
    opacity: 0.6;
}

/* =========================================================
   PINYIN BUILDER
   ========================================================= */

.quiz-search {
    display: flex;
    gap: 8px;
    margin: 20px 0 6px;
    max-width: 420px;
}

.quiz-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
}

.quiz-search button {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* My Quizzes' inline "New quiz" form -- the builder's search box, opened in
   place like the deck page's .deck-new-form. */
.quiz-new-form {
    margin: 0 0 20px;
}

/* display:flex above would otherwise beat the [hidden] attribute. */
.quiz-new-form[hidden] {
    display: none;
}

.quiz-search-hint {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 20px;
}

.quiz-empty,
.quiz-warning {
    padding: 14px 16px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #6b7280;
    font-size: 14px;
}

.quiz-level-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 16px 0;
}

.quiz-level-chip {
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Batch example controls: untick "All" or one HSK level to pull every example at
   that level out of the quiz at once, across every character -- finetuning the
   final example set in batches rather than one checkbox at a time. Visually a
   step down from the main HSK level chips above it (smaller, muted background)
   since it's a secondary, narrower-scope control acting only on examples. */
.quiz-example-batch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 20px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.quiz-example-batch-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.quiz-example-batch-chip {
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 5px;
}

.quiz-level-chip:has(input:disabled),
.quiz-example-batch-chip:has(input:disabled) {
    color: #cbd5e1;
}

.quiz-example-batch-all-chip {
    font-weight: 600;
    padding-right: 14px;
    border-right: 1px solid #e5e7eb;
}

.quiz-select-hint {
    font-size: 13px;
    color: #94a3b8;
    margin: 0 0 20px;
}

.quiz-pivot-wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}

.quiz-pivot {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
    /* Fixed layout: column widths come from the header row, not from the cell
       text -- otherwise every "9/12" -> "10/12" while ticking re-sizes the
       columns and the whole table shifts sideways. */
    table-layout: fixed;
}

.quiz-pivot th,
.quiz-pivot td {
    padding: 8px 4px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.quiz-pivot thead .quiz-pivot-corner {
    width: 100px;
}

.quiz-pivot thead .quiz-pivot-total-col {
    width: 84px;
}

/* Cells read "selected/total" once JS runs (data-total holds the server-rendered total
   for the no-JS fallback) -- tabular-nums keeps the "/" aligned as the selected count
   changes digit width while the user ticks boxes. */
.js-pivot-characters,
.js-pivot-words,
.js-pivot-questions,
.js-pivot-questions-total {
    font-variant-numeric: tabular-nums;
}

/* The running question count -- what the Start button will ask -- set apart
   from the two "selected/total" rows above it. */
.quiz-pivot-questions td {
    font-weight: 700;
    color: #111827;
    background: #f8fafc;
    border-top: 2px solid #e5e7eb;
}

.quiz-pivot thead th {
    color: #94a3b8;
    font-weight: 500;
}

.quiz-pivot td:first-child,
.quiz-pivot .quiz-pivot-corner {
    padding-left: 10px;
    text-align: left;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.quiz-pivot-total-col {
    font-weight: 700;
    color: #111827;
    border-left: 1px solid #e5e7eb;
}

/* Explains why the Words row's "selected/total" can show something like 31/30 -- not an
   error, just that a shared word (counted once in Total) renders as one checkbox per
   character it appears under (so Selected can tick past it). */
.quiz-pivot-note {
    margin: 6px 0 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

.quiz-level-group {
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

/* Native <details>/<summary> accordion -- no extra JS needed to expand/collapse
   an HSK level group. The marker is drawn via ::before below so it can rotate
   on [open] instead of relying on the browser's default triangle glyph. */
.quiz-level-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    background: #f8fafc;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.quiz-level-summary::-webkit-details-marker {
    display: none;
}

.quiz-level-summary::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(-45deg);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.quiz-level-group[open] > .quiz-level-summary::before {
    transform: rotate(45deg);
}

.quiz-level-title {
    flex: 1;
}

.quiz-level-count {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

.quiz-tone-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px;
}

.quiz-tone-col {
    min-width: 160px;
}

/* Tones are grouped for structure (reading order), not colour-coded any more --
   one tone no longer "means" one colour; nothing about a tone's correctness or
   difficulty was meant to be conveyed by it, so a single neutral style for all
   five removes a visual signal that wasn't actually signalling anything. */
.quiz-tone-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #6b7280;
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e5e7eb;
}

.quiz-word-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
}

.quiz-char-row {
    display: block;
    padding: 10px 0;
    border-bottom: 0.5px solid #f1f5f9;
    font-size: 14px;
}

.quiz-char-row:last-child {
    border-bottom: none;
}

/* A character the user has unticked still shows its data (nothing to quiz on it
   right now, but nothing hides), just dimmed, matching its now-disabled example
   checkboxes below it. */
.quiz-char-row-off {
    opacity: 0.5;
}

.quiz-char-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
}

.quiz-char-zh {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.quiz-char-py {
    color: #6b7280;
}

/* Flags a character that's ALSO read a completely different way on another syllable
   (系 as jì here, but xì elsewhere) -- its level badge below only reflects THIS reading,
   so without this a learner could reasonably expect the character's "famous" reading's
   level instead. Hover/title carries the other syllable(s); kept terse inline since most
   rows won't have it at all. */
.quiz-multi-reading-badge {
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 5px;
    cursor: help;
}

/* All of the character's own senses, read-only -- e.g. all 17 for 是, not just one */
.quiz-char-senses {
    display: block;
    font-size: 13px;
    color: #374151;
    margin: 4px 0 0 24px;
}

.quiz-example-sep {
    margin: 0 4px;
    color: #cbd5e1;
}

/* Example words -- each with ALL of its own senses, not just one. Individually
   checkable (picking which examples feed the quiz is a later "cart" step), so
   each is its own label/checkbox row rather than plain text. */
.quiz-char-examples {
    list-style: none;
    margin: 6px 0 0 24px;
    padding: 0;
    font-size: 12px;
    color: #94a3b8;
}

.quiz-char-examples li {
    padding: 2px 0;
}

.quiz-example-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
}

.quiz-example-row input[disabled] {
    cursor: default;
}

.quiz-example {
    font-weight: 600;
    color: #6b7280;
    margin-right: 6px;
}

.quiz-example-py {
    color: #94a3b8;
    margin-right: 6px;
}

.quiz-example-level {
    color: #cbd5e1;
    font-size: 11px;
    margin-right: 6px;
}

.quiz-example-en {
    color: #94a3b8;
}

.quiz-builder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.quiz-title-input {
    flex: 1 1 220px;
    min-width: 160px;
    padding: 9px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
}

#quiz-start-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

#quiz-start-btn:disabled {
    background: #cbd5e1;
    cursor: default;
}

.quiz-save-btn {
    padding: 10px 18px;
    border: 1px solid #111827;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-weight: 600;
    cursor: pointer;
}

.quiz-save-btn:disabled {
    border-color: #cbd5e1;
    color: #cbd5e1;
    cursor: default;
}

.quiz-save-status {
    font-size: 13px;
    color: #374151;
    margin-top: 10px;
}

.quiz-save-status-error {
    color: #dc2626;
}

.quiz-share-hint {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 20px;
}

.quiz-share-hint input {
    display: block;
    margin-top: 6px;
    width: 100%;
    max-width: 420px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    color: #6b7280;
}

/* =========================================================
   PINYIN PLAYER
   ========================================================= */

.quiz-play {
    text-align: center;
    /* The player loads review.css, which makes <body> a flex column. There,
       .page's "margin: 0 auto" stops the item stretching to the screen and
       sizes it to its content instead -- and the results list's one-line
       (ellipsised) meanings are several hundred px wide unwrapped, so on a
       phone the page grew to 512px and scrolled sideways. An explicit full
       width (still capped by .page's max-width, still centred) fits it to
       the screen and lets the ellipsis do its job. */
    width: 100%;
    box-sizing: border-box;
}

.quiz-play-root {
    max-width: 480px;
    margin: 20px auto 0;
}

.quiz-progress {
    font-size: 13px;
    color: #94a3b8;
}

/* Long meaning/translation on the question card: 4 lines, then a Show more
   toggle (see makeClampable in quiz_pinyin_play.js). */
.quiz-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.quiz-clamp-1 {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.quiz-clamp.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.quiz-clamp-toggle {
    margin: 2px 0 0;
    padding: 0;
    border: none;
    background: none;
    color: #2563eb;
    font-size: 13px;
    cursor: pointer;
}

.quiz-clamp-toggle[hidden] {
    display: none;
}

/* Per-question verdict -- the same pill as the end screen's result badge. */
.quiz-word-verdict {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    margin: 0 0 12px;
}

.quiz-kind-tag {
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    align-self: flex-start;
    flex-shrink: 0;
    color: #475569;
    background: #f1f5f9;
}

.quiz-next-btn,
.quiz-replay-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.quiz-score {
    font-size: 22px;
    color: #111827;
}

.quiz-end-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 16px 0;
}

/* End screen: every question of the run with its result. Kept neutral --
   "Correct" is a green pill and "Incorrect" a red one; "Incorrect (hint
   used)" is a quiet outlined pill, and glyphs, pinyin and the struck-through
   attempt stay neutral. */
.quiz-results {
    margin: 24px 0;
    text-align: start;   /* left, or right on an RTL page */
}

/* Mixed directions on an RTL page (Arabic): the page and its translations
   run right to left, Chinese and pinyin left to right -- in the same row.

   Rows that lay a word out ONE ELEMENT PER CHARACTER (the results glyphs,
   the question's context word) must be LTR themselves, or the RTL row puts
   the characters in reverse: 漂亮 would read 亮 漂. On RTL the glyph row
   still sits at the start (right) side of its row. */
.quiz-result-glyphs,
.quiz-play .review-context-word {
    direction: ltr;
}

[dir="rtl"] .quiz-result-glyphs {
    justify-content: flex-end;
}

/* Text blocks take their direction from their own first strong letter
   (plaintext), not from the page: an Arabic translation runs RTL with any
   Chinese or pinyin inside it kept LTR in place; a meaning that fell back
   to English, typed pinyin in the input, run LTR. The input's Arabic
   placeholder stays RTL that way too. */
.quiz-play .review-pinyin-input,
.quiz-play .review-char-meaning,
.quiz-play .review-sub,
.quiz-play .review-summary-context-meaning,
.quiz-result-meaning,
.quiz-char-senses,
.quiz-example-en {
    unicode-bidi: plaintext;
}

.quiz-results-heading {
    font-size: 15px;
    color: #111827;
    margin: 0 0 8px;
}

.quiz-results-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
}

.quiz-results-tally-item strong {
    color: #111827;
}

.quiz-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e5e7eb;
}

.quiz-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.quiz-result-main {
    flex: 1;
    min-width: 0;
}

.quiz-result-glyphs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quiz-result-char {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.quiz-result-glyph {
    font-size: 22px;
}

.quiz-result-glyph { color: #111827; }

.quiz-result-pinyin {
    font-size: 12px;
    color: #374151;
}

/* The dictionary reading under a spoken (sandhi) form: "dictionary: bu4". */
.quiz-result-reading {
    font-size: 11px;
    color: #6b7280;
}

.quiz-result-typed {
    font-size: 11px;
    color: #6b7280;
    text-decoration: line-through;
}

.quiz-result-info {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

/* One line (ellipsised by .quiz-clamp-1), Show more underneath when cut. */
.quiz-result-meaning-wrap {
    flex: 1;
    min-width: 0;
}

.quiz-result-meaning-wrap .quiz-clamp-toggle:not([hidden]) {
    display: block;
    font-size: 12px;
}

.quiz-result-badge {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.quiz-result-row.is-correct .quiz-result-badge,
.quiz-word-verdict.is-correct { color: #15803d; background: #dcfce7; }
.quiz-result-row.is-incorrect .quiz-result-badge,
.quiz-word-verdict.is-incorrect { color: #b91c1c; background: #fee2e2; }
.quiz-result-row.is-hint .quiz-result-badge,
.quiz-word-verdict.is-hint { color: #374151; background: #ffffff; border-color: #d1d5db; }

/* End screen "Create deck": quick-select row above the list, a checkbox
   per word row, name + button below. Neutral like the rest of the list. */
.quiz-select-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 0 0 8px;
    font-size: 13px;
    color: #6b7280;
}

.quiz-select-btns {
    display: flex;
    gap: 6px;
}

.quiz-select-btn {
    padding: 3px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #374151;
    font-size: 12px;
    cursor: pointer;
}

.quiz-select-btn:hover {
    border-color: #94a3b8;
}

.quiz-result-check,
.quiz-result-check-slot {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

.quiz-deck-create {
    max-width: none;
    margin: 16px 0 0;
}

.quiz-deck-create button:disabled {
    background: #cbd5e1;
    cursor: default;
}

.quiz-edit-link {
    color: #2563eb;
    align-self: center;
}

.quiz-powered-by {
    margin-top: 24px;
    font-size: 12px;
    color: #94a3b8;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
    .quiz-type-grid {
        grid-template-columns: 1fr;
    }

}
/* My Quizzes' toast ("No longer shared", link copied, ...) -- same look as
   the deck page's .deck-toast, kept here since this page doesn't load
   deck.css. Fixed at the bottom centre, fading/sliding in. */
.quiz-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #111827;
    color: #ffffff;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
}

.quiz-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.quiz-toast[hidden] {
    display: none;
}

/* A shared public quiz's page (quiz_shared.html): title, counts, one action. */
.quiz-shared-meta {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 8px;
}

/* Practice mode (quiz_pinyin_practice.html): a bar above the card with the
   known count and a Stop button, a Known badge in the verdict, the recap. */
.quiz-practice-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 13px;
    color: #6b7280;
}

/* The bar's left side: Known X of N, then the skill practised -- a plain label, no switch. */
.quiz-practice-bar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
}

.quiz-practice-skill {
    padding: 1px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    white-space: nowrap;
}

/* Continue / Start over: Start over is a link-style button beside Continue. */
.quiz-run-start-over {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.quiz-practice-stop {
    padding: 5px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.quiz-practice-stop[hidden] {
    display: none;
}

.quiz-practice-stop:hover {
    border-color: #94a3b8;
}

.quiz-practice-known {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #185fa5;
    background: #e6f1fb;
}

.quiz-practice-known[hidden] {
    display: none;
}

.quiz-practice-answer {
    justify-content: center;
    margin: 4px 0 16px;
}

.quiz-practice-recap-list {
    list-style: none;
    margin: 12px 0 20px;
    padding: 0;
    color: #374151;
    line-height: 1.8;
}

/* Practice recap: timing per item and per character inside it. */
.quiz-practice-stats {
    margin: 8px 0 24px;
    text-align: start;
}

.quiz-practice-stats[hidden] {
    display: none;
}

.quiz-practice-stats-summary {
    margin: 0 0 4px;
    font-size: 13px;
    color: #6b7280;
}

.quiz-practice-item-word {
    font-size: 20px;
    direction: ltr;
    margin-inline-end: 8px;
}

.quiz-practice-item-reps {
    font-size: 12px;
    color: #94a3b8;
    margin-inline-start: 8px;
}

.quiz-practice-timing {
    margin-top: 12px;
}

.quiz-practice-timing-group {
    text-align: center !important;
    border-bottom: none !important;
}

/* Item heading row: word, tags, count -- set off from the previous item. */
.quiz-practice-timing-head td {
    text-align: start !important;
    padding-top: 14px !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-top: 1px solid #e5e7eb;
}

.quiz-practice-timing-head .quiz-kind-tag,
.quiz-practice-timing-head .quiz-practice-known {
    vertical-align: middle;
}

.quiz-practice-timing {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.quiz-practice-timing th,
.quiz-practice-timing td {
    padding: 4px 6px;
    text-align: end;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}

.quiz-practice-timing th {
    font-weight: 600;
    color: #374151;
}

.quiz-practice-timing-sub th {
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
}

.quiz-practice-timing-char {
    text-align: start;
    direction: ltr;
}

.quiz-practice-timing-char .quiz-result-glyph {
    font-size: 18px;
    margin-inline-end: 6px;
}

.quiz-practice-timing-avg {
    color: #6b7280;
}

.quiz-practice-all-known {
    display: inline-block;
    margin: 4px 0 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
}

.quiz-practice-all-known[hidden] {
    display: none;
}

/* Practice: speed check panel under the card. */
.quiz-speed-check {
    margin: 28px 0 0;
    text-align: start;
}

.quiz-speed-table[hidden],
.quiz-speed-check [hidden] {
    display: none;
}

.quiz-speed-fast {
    color: #15803d;
    font-weight: 600;
}

.quiz-speed-slow {
    color: #b45309;
    font-weight: 600;
}

/* Speed check: every answer, with the correct pinyin next to what was typed.
   Nine columns -- scrolls sideways on a narrow screen instead of squeezing. */
.quiz-speed-scroll {
    overflow-x: auto;
}

.quiz-speed-scroll[hidden] {
    display: none;
}

.quiz-speed-table td,
.quiz-speed-table th {
    white-space: nowrap;
}

.quiz-speed-pinyin {
    unicode-bidi: plaintext;
}

.quiz-speed-right {
    color: #15803d;
}

.quiz-speed-wrong {
    color: #b91c1c;
    font-weight: 600;
}

.quiz-speed-hint {
    font-weight: 400;
    color: #6b7280;
}

/* Practice: away pause -- blurs the whole page (the on-screen keyboard
   included) until Continue. */
.quiz-pause {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.quiz-pause[hidden] {
    display: none;
}

.quiz-pause-box {
    max-width: 360px;
    padding: 24px 28px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    text-align: center;
}

.quiz-pause-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
}

.quiz-pause-note {
    margin: 0 0 18px;
    font-size: 14px;
    color: #6b7280;
}

/* Practice: a character question's translation under its answer. */
.quiz-practice-answer-meaning {
    margin: 8px 0 0;
    font-size: 15px;
    unicode-bidi: plaintext;
}

.quiz-practice-answer-meaning + .quiz-clamp-toggle:not([hidden]) {
    display: block;
    margin: 4px auto 12px;
}

/* Character quiz builder (quiz_character.html): a pivot of the readings, then
   one block per reading of the character with its words by level. */
.quiz-reading-block {
    margin: 0 0 24px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.quiz-reading-block.is-empty {
    background: #f8fafc;
    color: #94a3b8;
}

.quiz-reading-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 18px;
}

.quiz-reading-char {
    font-size: 32px;
    font-weight: 600;
    color: #111827;
}

.quiz-reading-py {
    font-size: 20px;
    color: #2563eb;
}

.quiz-reading-block.is-empty .quiz-reading-char,
.quiz-reading-block.is-empty .quiz-reading-py {
    color: #94a3b8;
}

.quiz-reading-meaning {
    margin: 0;
    font-size: 14px;
    color: #374151;
}

/* The pivot on top: readings x HSK levels, "selected / total" per cell. On a
   phone it scrolls sideways inside its own box, never the page. */
.quiz-char-pivot-wrap {
    overflow-x: auto;
    margin: 0 0 24px;
    max-width: 100%;
}

.quiz-char-pivot {
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.quiz-char-pivot th,
.quiz-char-pivot td {
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    text-align: center;
    white-space: nowrap;
}

.quiz-char-pivot thead th {
    background: #f8fafc;
    font-weight: 600;
    color: #374151;
}

.quiz-char-pivot tbody th,
.quiz-char-pivot tfoot th {
    text-align: start;
    font-weight: 600;
}

.quiz-char-pivot-corner {
    font-size: 18px;
}

.quiz-char-pivot-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

/* Level columns: checkbox above "HSK n", so the whole table fits a desktop page. */
.quiz-char-pivot thead .quiz-char-pivot-check {
    flex-direction: column;
    gap: 2px;
}

.quiz-char-pivot .quiz-reading-py {
    font-size: 13px;
}

.quiz-char-pivot-total,
.quiz-char-pivot tfoot td {
    font-weight: 600;
}

.quiz-char-pivot tfoot th,
.quiz-char-pivot tfoot td {
    background: #f8fafc;
}

.quiz-char-pivot .is-empty {
    color: #cbd5e1;
}

.quiz-char-pivot tr.is-empty th,
.quiz-char-pivot tr.is-empty .quiz-reading-py {
    color: #94a3b8;
}

.quiz-reading-word-label {
    display: inline;
    cursor: pointer;
}

.quiz-reading-word-label input {
    margin: 0 6px 0 0;
    vertical-align: middle;
}

.quiz-reading-empty {
    margin: 8px 0 0;
    font-size: 14px;
    font-style: italic;
}

.quiz-reading-level {
    margin: 12px 0 0;
}

.quiz-reading-level-title {
    margin: 0 0 6px;
    font-size: 14px;
    color: #374151;
}

.quiz-reading-words {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quiz-reading-word {
    padding: 3px 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* The spoken form where it differs from the reading: 不要 "(said bú)". */
.quiz-reading-said {
    color: #b45309;
    font-size: 12px;
    margin-right: 6px;
}

/* My Quizzes: a character quiz's anchor character next to its title. */
.quiz-row-anchor {
    margin: 0 6px;
    font-size: 18px;
    color: #374151;
}

/* The Char column (the character itself at each reading) set apart from the levels. */
.quiz-char-pivot .quiz-char-pivot-charcol {
    background: #eff6ff;
    border-right: 2px solid #bfdbfe;
}

/* Edit mode: saved items the dictionary no longer has. */
.quiz-unavailable {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    font-size: 14px;
    color: #92400e;
}

.quiz-unavailable p,
.quiz-unavailable ul {
    margin: 0;
}

.quiz-unavailable ul {
    padding-left: 18px;
}

/* My Quizzes: the skill pills (the SRS deck list's lane pills, as buttons). */
.quiz-skill-pills {
    padding: 0 0 10px;
}

.quiz-skill-pills .deck-lane-pill {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

/* Recap: a character quiz's reading next to a character item (行 xíng / 行 háng). */
.quiz-practice-item-reading {
    margin-left: 6px;
    color: #2563eb;
}

/* Recall: masked boxes (X) until answered, then a check or a cross beside the colour. */
.review-pinyin-context-char.is-masked .review-pinyin-context-char-glyph {
    color: #94a3b8;
}

.quiz-recall-mark {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.review-pinyin-context-char.correct .quiz-recall-mark { color: #15803d; }
.review-pinyin-context-char.incorrect .quiz-recall-mark { color: #b91c1c; }

/* Practice: saved items the page can't serve. */
.quiz-unavailable {
    margin: 0 0 12px;
    font-size: 14px;
    color: #92400e;
}

/* Practice: the attempt's verdict under the result badge -- counted or not, and why.
   A mark and a colour together. On a phone it is a button opening the speed check. */
.quiz-attempt-verdict {
    margin: -4px 0 12px;
    font-size: 14px;
    line-height: 1.4;
}
.quiz-attempt-verdict.is-counted { color: #15803d; }
.quiz-attempt-verdict.is-not-counted { color: #b91c1c; }
.quiz-attempt-verdict-mark {
    font-weight: 700;
    margin-right: 4px;
}
.quiz-attempt-verdict-toggle {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
}
.quiz-attempt-verdict-more {
    margin-left: 6px;
    color: #2563eb;
    text-decoration: underline;
    white-space: nowrap;
}
.quiz-attempt-verdict-toggle[aria-expanded="true"] .quiz-attempt-verdict-more::after { content: " \25B4"; }
.quiz-attempt-verdict-toggle[aria-expanded="false"] .quiz-attempt-verdict-more::after { content: " \25BE"; }

/* Writing's final screen: a character's full dictionary entry, collapsed under the
   lane's "is a component in" toggle style (quiz_writing_decomp.js entryHTML). The reading
   used in the word comes first, marked with the accent bar. */
.quiz-writing-entry-body { margin-top: 8px; text-align: left; }
.quiz-writing-entry-reading { padding: 6px 0 6px 10px; border-left: 3px solid transparent; }
.quiz-writing-entry-reading + .quiz-writing-entry-reading { border-top: 1px solid #f1f5f9; }
.quiz-writing-entry-reading.is-current { border-left-color: #6366f1; background: #f8fafc; }
.quiz-writing-entry-head { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; }
.quiz-writing-entry-glyph { font-size: 18px; }
.quiz-writing-entry-pinyin { font-size: 15px; color: #374151; }
.quiz-writing-entry-reading.is-current .quiz-writing-entry-pinyin { font-weight: 700; color: #4338ca; }
.quiz-writing-entry-senses { list-style: none; margin: 0; padding: 0; font-size: 13px; color: #4b5563; }
.quiz-writing-entry-senses li { margin: 2px 0; }
.quiz-writing-entry-number { color: #9ca3af; }

/* The Writing card (quiz_writing_card.js, on the Practice page): the SRS
   Writing lane's card and result screen (srs/css/review.css), plus Hint / Done under the
   canvas, per-character Again / Good with the verdict line, and room under the final
   screen for the lane's fixed Next bar. */
.quiz-writing-card { margin: 0 auto; text-align: center; }
.quiz-writing-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* The word's slots while drawing: written glyphs grey, hinted ones red with the Hint label
   under them. The label sits in room kept below the row and the slots are spaced for it,
   so it never wraps or moves the card. */
.quiz-writing-slots { padding-bottom: 14px; }
.quiz-writing-slots .review-context-char {
    position: relative; display: inline-block; box-sizing: content-box; min-width: 1em; padding: 0 6px;
    text-align: center;
}
.quiz-writing-slot-done { color: #94a3b8; }
.quiz-writing-slot-done.quiz-writing-slot-hint { color: #dc2626; }
.quiz-writing-slot-hint-label {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    font-size: 10px; font-weight: 400; line-height: 1; white-space: nowrap; color: #dc2626;
}
.quiz-writing-final-root { padding-bottom: 120px; }
.quiz-writing-char-block { padding: 4px 0 16px; border-bottom: 1px solid #f1f5f9; }
.quiz-writing-char-block:last-child { border-bottom: 0; }
.quiz-writing-char-rate { display: flex; gap: 8px; margin-top: 12px; }
.quiz-writing-char-rate .review-rate-btn { padding: 10px 0; border-radius: 8px; }
.quiz-writing-char-rate.is-rated .review-rate-btn:not(.is-picked) { opacity: 0.35; }
.quiz-writing-char-rate .is-picked { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); }
.quiz-writing-char-block .quiz-attempt-verdict { margin: 8px 0 0; text-align: left; }
.quiz-writing-word-verdict { margin: 16px 0 0; text-align: left; font-weight: 600; }
/* The Writing recap: a write that didn't count, as its word's verdict line. */
.quiz-writing-recap .quiz-writing-recap-reason td { text-align: start; white-space: normal; }
.quiz-writing-card .review-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }