/* 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;
}

/* Name | stats | actions, as the deck list's grid (fixed stat/action
   widths so the header labels line up with every row's numbers). */
.quiz-list-header-row,
.quiz-row-main {
    display: grid;
    grid-template-columns: 1fr 220px 172px;
    align-items: center;
    gap: 8px 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 {
    border-top: 1px solid #f1f5f9;
    font-size: 14px;
}

.quiz-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 2px;
    min-height: 46px;
    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;
}

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

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

.quiz-stat-questions { min-width: 60px; }
.quiz-stat-characters { min-width: 70px; }
.quiz-stat-tones { min-width: 50px; }

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

/* Rows below the grid start under the name (no radio column here,
   unlike the deck list's 40px indent). */
.quiz-list .deck-lane-breakdown,
.quiz-list .deck-share-checkbox-row,
.quiz-list .deck-share-link-row {
    padding-left: 8px;
}

/* HSK level pills: the deck list's lane pills, informational only. */
.quiz-hsk-pill,
.quiz-hsk-pill:hover,
.quiz-hsk-pill:active {
    cursor: default;
    transform: none;
    background: #e6f1fb;
    color: #185fa5;
}

@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;
    }

    .quiz-row-main {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name actions"
            "stats stats";
        row-gap: 6px;
        padding: 12px 6px;
    }

    .quiz-row-name { grid-area: name; }
    .quiz-cell-actions { grid-area: actions; }

    .quiz-cell-stats {
        grid-area: stats;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px 16px;
    }

    .quiz-list .deck-lane-breakdown,
    .quiz-list .deck-share-checkbox-row,
    .quiz-list .deck-share-link-row {
        padding-left: 6px;
    }
}

/* 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;
}

.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-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;
}

/* "Pinyin" lane tag + Character/Word tag, side by side above the question. */
.quiz-card-tags {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.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;
}

.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;
}