/* /Components/Drill/PracticeBoard.razor.rz.scp.css */
/* The board's styling. This was briefly duplicated from DrillBoard.razor.css
   while both boards existed; that one is gone and this is the only copy. */

.board[b-jwf23psry6] {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    outline: none;
}

.loading[b-jwf23psry6] {
    color: var(--muted);
}

/* Paradigms ------------------------------------------------------------ */

.paradigms[b-jwf23psry6] {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.paradigms .link[b-jwf23psry6] {
    font: inherit;
    font-size: 0.85rem;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.paradigms .link:hover[b-jwf23psry6] {
    text-decoration: underline;
}

.paradigms .link kbd[b-jwf23psry6] {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: 0.2rem;
    padding: 0.05rem 0.3rem;
}

.paradigms[b-jwf23psry6]  .paradigm {
    margin-top: 1rem;
}

/* Toolbar -------------------------------------------------------------- */

.toolbar[b-jwf23psry6] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: var(--surface);
    border-radius: var(--radius-panel);
    padding: 0.35rem 0.6rem;
    margin-bottom: 0;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    box-shadow: var(--shadow-panel);
    border: 1px solid var(--rule);
}

.toolbar .row[b-jwf23psry6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem 0.35rem;
}

.toolbar .group[b-jwf23psry6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}

.toolbar .divider[b-jwf23psry6] {
    width: 1px;
    align-self: stretch;
    margin: 0.2rem 0.45rem;
    background: var(--rule);
}

.toolbar .opt[b-jwf23psry6] {
    font: inherit;
    letter-spacing: 0;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: 0.45rem;
    padding: 0.28rem 0.45rem;
    cursor: pointer;
    transition: color 100ms ease, background-color 100ms ease;
    font-weight: 500;
}

.toolbar .opt:hover[b-jwf23psry6] {
    color: var(--ink);
    background: var(--highlight);
}

.toolbar .opt.on[b-jwf23psry6] {
    color: var(--accent);
    background: var(--highlight);
}

.toolbar .opt.on:hover[b-jwf23psry6] {
    background: var(--highlight);
}

/* Selection editing and progress stay separate from the display controls. */
.session-line[b-jwf23psry6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.75rem 0 1.75rem;
    color: var(--muted);
    font-size: 0.8rem;
}
.session-line a[b-jwf23psry6] { text-underline-offset: 0.2em; }
.session-line strong[b-jwf23psry6] { color: var(--ink-soft); }
.session-line button[b-jwf23psry6] { border: 0; padding: 0; color: var(--accent); background: transparent; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.phase[b-jwf23psry6] { color: var(--accent); font-size: .8rem; margin: -1rem 0 1.5rem; }

/* Verse context ------------------------------------------------------- */

.verse[b-jwf23psry6] {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* Standalone mode: the reference stays for orientation, but it gives nothing
   away about the form, so the word is genuinely on its own. */
.verse.bare[b-jwf23psry6] {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.75rem;
}

.reference[b-jwf23psry6] {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.greek[b-jwf23psry6] {
    font-size: 1.25rem;
    line-height: 1.9;
    margin: 0;
    color: var(--ink-soft);
}

.target[b-jwf23psry6] {
    color: var(--accent);
    font-weight: 600;
    background: var(--highlight);
    border-radius: 0.25em;
    padding: 0.05em 0.2em;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Headword ------------------------------------------------------------ */

.headword[b-jwf23psry6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.9rem;
    margin-bottom: 1.75rem;
}

.headword .form[b-jwf23psry6] {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}

.headword .lemma[b-jwf23psry6] {
    font-size: 1.05rem;
    color: var(--muted);
}

.headword .gloss[b-jwf23psry6] {
    font-size: 0.95rem;
    color: var(--muted);
    font-style: normal;
}

.headword .pos[b-jwf23psry6] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    background: var(--surface);
    font-weight: 600;
}

/* Answer fields ------------------------------------------------------- */

.field[b-jwf23psry6] {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: var(--radius-control);
    border-left: 3px solid transparent;
}

.field.active[b-jwf23psry6] {
    background: color-mix(in srgb, var(--highlight) 55%, transparent);
    border-left-color: var(--accent);
}

.label[b-jwf23psry6] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}

.options[b-jwf23psry6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.option[b-jwf23psry6] {
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    box-shadow: 0 1px 2px rgb(12 35 30 / 4%);
}

.option:hover:not(:disabled)[b-jwf23psry6] {
    border-color: var(--accent);
}

.option .key[b-jwf23psry6] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: 0.2rem;
    padding: 0 0.25rem;
    min-width: 1rem;
    text-align: center;
    font-family: ui-monospace, monospace;
    background: color-mix(in srgb, var(--page) 60%, transparent);
}

.option.chosen[b-jwf23psry6] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.option.chosen .key[b-jwf23psry6] {
    color: var(--on-accent);
    border-color: color-mix(in srgb, var(--on-accent) 40%, transparent);
    background: transparent;
}

.option.expected[b-jwf23psry6] {
    background: var(--good-bg);
    border-color: var(--good);
    color: var(--good);
}

/* Neither right nor wrong: the tag says otherwise, but the form does not
   distinguish them, so they are marked as allowed rather than struck through.
   Every reading the form permits is marked, not just the one chosen. */
.option.accepted[b-jwf23psry6] {
    border-color: var(--accent);
    border-style: dashed;
    color: var(--accent);
}

/* The allowed reading that was actually picked, against the ones that were
   merely open. */
.option.accepted.picked[b-jwf23psry6] {
    background: var(--highlight);
    font-weight: 600;
}

.option.wrong[b-jwf23psry6] {
    background: var(--bad-bg);
    border-color: var(--bad);
    color: var(--bad);
    text-decoration: line-through;
}

.option:disabled[b-jwf23psry6] {
    cursor: default;
}

/* Actions and reveal --------------------------------------------------- */

.actions[b-jwf23psry6] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.5rem;
}

.primary[b-jwf23psry6] {
    font: inherit;
    font-weight: 600;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-control);
    padding: 0.55rem 1.2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    box-shadow: 0 3px 8px rgb(12 35 30 / 10%);
}

.primary:disabled[b-jwf23psry6] {
    opacity: 0.45;
    cursor: default;
}

.primary kbd[b-jwf23psry6] {
    font: inherit;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--on-accent) 40%, transparent);
    border-radius: 0.2rem;
    padding: 0 0.3rem;
}

.hint[b-jwf23psry6] {
    font-size: 0.85rem;
    color: var(--muted);
}

.reveal[b-jwf23psry6] {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-panel);
    border: 1px solid var(--rule);
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}

.reveal.correct[b-jwf23psry6] {
    border-color: color-mix(in srgb, var(--good) 45%, var(--rule));
}

.reveal.incorrect[b-jwf23psry6] {
    border-color: color-mix(in srgb, var(--bad) 45%, var(--rule));
}

.verdict[b-jwf23psry6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
}

.reveal.correct .verdict strong[b-jwf23psry6] {
    color: var(--good);
}

.reveal.incorrect .verdict strong[b-jwf23psry6] {
    color: var(--bad);
}

.corrections[b-jwf23psry6] {
    font-size: 0.9rem;
    color: var(--muted);
}

.detail[b-jwf23psry6] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
}

.detail dt[b-jwf23psry6] {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding-top: 0.15rem;
}

.detail dd[b-jwf23psry6] {
    margin: 0;
    color: var(--ink-soft);
}

/* The marked word is taller than the line — it carries padding and a rule
   underneath — so the verse is given room rather than letting the mark crowd
   the line below it. */
.detail dd.context[b-jwf23psry6] {
    line-height: 1.8;
}

.detail code[b-jwf23psry6] {
    font-size: 0.85rem;
    background: var(--highlight);
    border-radius: 0.2rem;
    padding: 0.05rem 0.3rem;
}

.reveal .actions[b-jwf23psry6] {
    margin-top: 1.1rem;
}

/* Looking back --------------------------------------------------------- */

/* Says plainly that this is not the question to answer, without dressing the
   board up as something else. */
.reviewing[b-jwf23psry6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 0.3rem;
    font-size: 0.85rem;
}

.reviewing .where[b-jwf23psry6] {
    color: var(--muted);
    letter-spacing: 0.03em;
}

.reviewing .link[b-jwf23psry6] {
    font: inherit;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.reviewing .link:hover[b-jwf23psry6] {
    text-decoration: underline;
}

.reviewing kbd[b-jwf23psry6] {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: 0.2rem;
    padding: 0.05rem 0.3rem;
}

/* Session score -------------------------------------------------------- */

.score[b-jwf23psry6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
    color: var(--muted);
}

.score .review[b-jwf23psry6] {
    display: flex;
    gap: 0.3rem;
    order: 2;
}

.score .tally[b-jwf23psry6] {
    order: 1;
}

.score .step[b-jwf23psry6] {
    font: inherit;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 0.45rem;
    padding: 0.15rem 0.45rem;
    cursor: pointer;
}

.score .step:hover:not(:disabled)[b-jwf23psry6] {
    color: var(--ink);
    border-color: var(--accent);
}

.score .step:disabled[b-jwf23psry6] {
    opacity: 0.35;
    cursor: default;
}

.score .step kbd[b-jwf23psry6] {
    font: inherit;
    font-size: 0.7rem;
    border: 1px solid var(--rule);
    border-radius: 0.2rem;
    padding: 0 0.25rem;
}

@media (max-width: 34rem) {
    .field[b-jwf23psry6] {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .headword .form[b-jwf23psry6] {
        font-size: 1.9rem;
    }
}

.appearance-link[b-jwf23psry6] { text-decoration: none; }

/* The rating step. Four choices of equal weight — the suggested one is marked
   but not privileged, because a reader who found a correct answer hard should
   have no further to reach for Hard than for Good. */
.rating[b-jwf23psry6] {
    margin-top: 1.5rem;
}

.rating .prompt[b-jwf23psry6] {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.rating .choices[b-jwf23psry6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.rate[b-jwf23psry6] {
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.4rem;
    cursor: pointer;
    background: var(--surface);
    color: inherit;
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
}

.rate:hover:not(:disabled)[b-jwf23psry6] {
    border-color: var(--accent);
}

.rate:disabled[b-jwf23psry6] {
    opacity: 0.45;
    cursor: default;
}

.rate .what[b-jwf23psry6] {
    font-weight: 600;
    font-size: 0.9rem;
}

/* The interval is the reason to choose one over another, so it is legible
   rather than decorative. */
.rate .when[b-jwf23psry6] {
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.rate kbd[b-jwf23psry6] {
    font: inherit;
    font-size: 0.68rem;
    color: var(--muted);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 0.2rem;
    padding: 0 0.25rem;
}

.rate.suggested[b-jwf23psry6] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.rate.again[b-jwf23psry6] { border-left: 3px solid var(--bad); }
.rate.easy[b-jwf23psry6] { border-left: 3px solid var(--good); }

.rating .skip[b-jwf23psry6] {
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .2em;
}

@media (max-width: 30rem) {
    .rating .choices[b-jwf23psry6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nothing left in the queue. Said plainly: the day's work being over is a
   result, not an error. */
.finished[b-jwf23psry6] {
    margin: 2rem 0;
}

.finished h2[b-jwf23psry6] {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
}

.finished p[b-jwf23psry6] {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.finished .primary[b-jwf23psry6] {
    margin-top: 0.8rem;
    text-decoration: none;
}

.finished .aside[b-jwf23psry6] {
    margin-left: 0.9rem;
    font-size: 0.88rem;
    color: var(--muted);
    text-underline-offset: .2em;
}
/* /Components/Drill/SessionSummary.razor.rz.scp.css */
.results[b-u5o82xv6k6] { padding: 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 1.2rem; }
.eyebrow[b-u5o82xv6k6] { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
h2[b-u5o82xv6k6] { margin-top: .4rem; }
h3[b-u5o82xv6k6] { margin: 1.8rem 0 .7rem; font-size: 1rem; }
p[b-u5o82xv6k6], small[b-u5o82xv6k6] { color: var(--muted); }
.metrics[b-u5o82xv6k6] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.8rem 0; }
.metrics div[b-u5o82xv6k6] { display: flex; flex-direction: column; gap: .3rem; }
.metrics strong[b-u5o82xv6k6] { font-size: 2.5rem; color: var(--accent); }
.result-row[b-u5o82xv6k6] { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.result-row span:last-child[b-u5o82xv6k6] { text-align: right; }
.actions[b-u5o82xv6k6] { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem; }
button[b-u5o82xv6k6] { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: .6rem; padding: .7rem 1rem; cursor: pointer; }
button.primary[b-u5o82xv6k6] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 480px) { .results[b-u5o82xv6k6] { padding: 1rem; } .result-row[b-u5o82xv6k6] { font-size: .85rem; } .metrics strong[b-u5o82xv6k6] { font-size: 2rem; } }
/* /Components/Drill/SuppliedReadingBadge.razor.rz.scp.css */
.supplied-reading[b-oew6euu1qa] { display: inline-block; border: 1px dashed var(--accent); color: var(--accent); border-radius: .35rem; padding: .25rem .45rem; font-size: .7rem; line-height: 1.4; font-family: var(--font-ui, sans-serif); }
/* /Components/Paradigms/ParadigmBrowser.razor.rz.scp.css */
.reference[b-ob2vs2q9gi] {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* Toolbar -------------------------------------------------------------- */

/* The drill's toolbar, doing the same job in the same shape. */
.toolbar[b-ob2vs2q9gi] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: var(--surface);
    border-radius: var(--radius-panel);
    padding: 0.45rem 0.6rem;
    margin-bottom: 2rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    box-shadow: var(--shadow-panel);
    border: 1px solid var(--rule);
}

.toolbar .row[b-ob2vs2q9gi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
}

.toolbar .row-label[b-ob2vs2q9gi] {
    color: var(--muted);
    opacity: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.62rem;
    min-width: 2.6rem;
    font-weight: 600;
}

.toolbar .group[b-ob2vs2q9gi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}

.toolbar .opt[b-ob2vs2q9gi] {
    font: inherit;
    letter-spacing: 0;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: 0.45rem;
    padding: 0.28rem 0.45rem;
    cursor: pointer;
    transition: color 100ms ease, background-color 100ms ease;
    font-weight: 500;
}

.toolbar .opt:hover[b-ob2vs2q9gi] {
    color: var(--ink);
    background: var(--highlight);
}

.toolbar .opt.on[b-ob2vs2q9gi] {
    color: var(--accent);
    background: var(--highlight);
}

.toolbar .clear[b-ob2vs2q9gi] {
    margin-left: 0.4rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.toolbar .find[b-ob2vs2q9gi] {
    font: inherit;
    flex: 1 1 16rem;
    min-width: 10rem;
    color: var(--ink);
    background: var(--page);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    padding: 0.5rem 0.65rem;
}

.toolbar .find:focus[b-ob2vs2q9gi] {
    outline: none;
    border-color: var(--accent);
}

.toolbar .find[b-ob2vs2q9gi]::placeholder {
    color: var(--muted);
    opacity: 1;
}

.toolbar .tally[b-ob2vs2q9gi] {
    color: var(--muted);
    opacity: 1;
    white-space: nowrap;
}

/* Shelves -------------------------------------------------------------- */

.reference h2[b-ob2vs2q9gi] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 2.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rule);
}

.reference section:first-of-type h2[b-ob2vs2q9gi] {
    margin-top: 0;
}

/* Tables sit side by side where there is room and stack where there is not,
   which is what lets the first and second declensions be read against each
   other on a wide screen.

   Flow rather than a grid, because the tables are not one width: a finite verb
   is one column and the third declension is four, and a grid track wide enough
   for the second would leave the first swimming — or, worse, scroll the fourth
   column of a reference table out of sight. Each takes what it needs. */
.tables[b-ob2vs2q9gi] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem 2.5rem;
    align-items: flex-start;
}

.tables[b-ob2vs2q9gi]  .paradigm {
    margin: 0;
    /* Never shrink: wrapping is what makes room, not squeezing. A shrunk table
       scrolls its last column out of sight, which on a page for reading tables
       is the one thing that must not happen. */
    flex: 0 0 auto;
    max-width: 100%;
}

/* The note under a table is prose and would otherwise stretch to whatever the
   table beside it happens to be. */
.tables[b-ob2vs2q9gi]  .paradigm .note {
    max-width: 22rem;
}

.empty[b-ob2vs2q9gi] {
    color: var(--muted);
    font-size: 0.9rem;
}

.empty .link[b-ob2vs2q9gi] {
    font: inherit;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.credit[b-ob2vs2q9gi] {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.75rem;
    color: var(--muted);
}
/* /Components/Paradigms/ParadigmTable.razor.rz.scp.css */
.paradigm[b-9hctunao7r] {
    margin: 0 0 1.25rem;
}

/* The table the answer described, rather than the one the word belongs to. */
.paradigm.muted[b-9hctunao7r] {
    border-left: 2px dashed var(--rule);
    padding-left: 0.9rem;
}

.paradigm figcaption[b-9hctunao7r] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.paradigm .title[b-9hctunao7r] {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.paradigm .subtitle[b-9hctunao7r] {
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.scroll[b-9hctunao7r] {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    background: var(--surface);
    box-shadow: 0 2px 8px rgb(12 35 30 / 4%);
}

table[b-9hctunao7r] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

th[b-9hctunao7r],
td[b-9hctunao7r] {
    padding: 0.25rem 0.7rem;
    text-align: left;
    white-space: nowrap;
}

thead th[b-9hctunao7r] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.35rem;
    background: var(--page);
}

tbody th[b-9hctunao7r] {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    padding-right: 1rem;
}

tbody td[b-9hctunao7r] {
    color: var(--ink-soft);
}

/* The word's own row is lifted, and its exact cell carries the accent. */
tr.row-here th[b-9hctunao7r],
tr.row-here td[b-9hctunao7r] {
    background: var(--surface);
}

/* The same accent bar the active answer field uses, so "you are here" reads
   the same way everywhere on the page. */
tr.row-here th[b-9hctunao7r] {
    color: var(--ink-soft);
    border-radius: 0.25rem 0 0 0.25rem;
    box-shadow: inset 2px 0 0 var(--accent);
}

/* Where the learner's own answer sits, so the two can be read against each
   other rather than one replacing the other. */
tr.row-given th[b-9hctunao7r],
tr.row-given td[b-9hctunao7r] {
    background: var(--surface);
}

tr.row-given th[b-9hctunao7r] {
    color: var(--ink-soft);
    border-radius: 0.25rem 0 0 0.25rem;
    box-shadow: inset 2px 0 0 var(--bad);
}

/* Qualified with tbody so the cell's own chip outranks the row background
   above, which would otherwise flatten it. */
tbody td.here[b-9hctunao7r] {
    color: var(--accent);
    font-weight: 700;
    background: var(--highlight);
    border-radius: 0.25rem;
}

tbody td.given[b-9hctunao7r] {
    color: var(--bad);
    font-weight: 700;
    background: var(--bad-bg);
    border-radius: 0.25rem;
}

.note[b-9hctunao7r] {
    font-size: 0.75rem;
    color: var(--muted);
    margin: 0.5rem 0 0;
}

tbody tr + tr[b-9hctunao7r] {
    border-top: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}
/* /Components/Paradigms/ParadigmView.razor.rz.scp.css */
.compare[b-12l5izewjq] {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--bad);
    margin: 0 0 0.6rem;
}

.missing[b-12l5izewjq] {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 0.8rem;
}

.credit[b-12l5izewjq] {
    font-size: 0.75rem;
    color: var(--muted);
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}