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

@media (hover: hover) {
    .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;
}

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

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

@media (hover: hover) {
    .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%);
}

/* Guarded, because a touch browser holds :hover on the last thing tapped
   until something else is: an option left showing the accent border after the
   answer moved to another one reads as still chosen. */
@media (hover: hover) {
    .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.

   Green, in the same colour the tagged answer takes, because these were not
   mistakes and only one thing on a reveal should read as a mistake. The
   accent was the wrong ink for a verdict: it is the board's "you are here"
   colour rather than its "this passed" one, and in Modern Ink it is
   vermilion, so an allowed reading sat next to the struck-through miss
   looking like a second one. The dashed border is what keeps it apart from
   the parse the verse actually carries. */
.option.accepted[b-jwf23psry6] {
    border-color: var(--good);
    border-style: dashed;
    color: var(--good);
}

/* The allowed reading that was actually picked, against the ones that were
   merely open: filled in like the tagged answer, because the reader chose it
   and it passed, and bold on top so the two are not read as one. */
.option.accepted.picked[b-jwf23psry6] {
    background: var(--good-bg);
    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. */
.looking-back[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;
}

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

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

@media (hover: hover) {
    .looking-back .link:hover[b-jwf23psry6] {
        text-decoration: underline;
    }
}

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

/* The score, and walking back through the sitting ---------------------- */

/* The tally reads first and the arrows close the line, whichever way round
   the markup needs them: the numbers are what a reader glances down for, and
   the arrows are what they reach for. */
.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 .tally[b-jwf23psry6] {
    order: 1;
}

/* Older to the left, as the questions were asked. */
.history[b-jwf23psry6] {
    display: flex;
    gap: 0.3rem;
    order: 2;
}

.history button[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;
}

@media (hover: hover) {
    .history button:hover:not(:disabled)[b-jwf23psry6] {
        color: var(--ink);
        border-color: var(--accent);
    }
}

.history button:disabled[b-jwf23psry6] {
    opacity: 0.35;
    cursor: default;
}

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

@media (hover: hover) {
    .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;
}

/* Touch ---------------------------------------------------------------- */

/* A phone has no keys to press, so every badge naming one is describing an
   interface the reader does not have — and on the narrowest screens it is
   holding width the labels need. Only the advertising goes: the shortcuts
   still work, so a tablet with a keyboard attached drives the board exactly as
   before, it is simply no longer told about them. */
@media (hover: none) and (pointer: coarse) {
    .option .key[b-jwf23psry6],
    kbd[b-jwf23psry6] {
        display: none;
    }

    /* The room the badge was taking goes back into the padding rather than off
       the button, which would leave a fingertip aiming at the label alone. The
       history arrows keep almost nothing once their bracket goes, so they are
       given the most. */
    .option[b-jwf23psry6] {
        padding: 0.5rem 0.75rem;
    }

    .history button[b-jwf23psry6] {
        padding: 0.4rem 0.9rem;
    }
}

/* The verb's principal parts, one row per tense-system the New Testament
   writes. The row the word in front of the reader belongs to is marked: the
   panel's whole use is saying "you are in this one". */
.parts[b-jwf23psry6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
}

.parts li[b-jwf23psry6] {
    display: contents;
}

.part-name[b-jwf23psry6] {
    color: var(--muted);
    font-size: 0.85rem;
    align-self: baseline;
}

.parts li.here .part-name[b-jwf23psry6],
.parts li.here span[lang="grc"][b-jwf23psry6] {
    color: var(--text);
    font-weight: 600;
}

/* A part the text writes whose citation form we cannot spell. Not a dash:
   a dash would say the New Testament does not use it. */
.part-unknown[b-jwf23psry6] {
    color: var(--muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* Root to stem to word, printed as a grammar prints a derivation: the chain
   bare on a line of its own, then each step named and explained beneath it.

   The chain carries nothing but forms and arrows, and that is the point. An
   explanation standing in a column stretches that column — measured at 336px
   against 27px for the root — and a stretched column puts the last form half
   a screen from the one before it. Naming each step underneath instead means
   nothing can pull the chain out of line, however long an explanation runs.

   The entered data and the ending worked out here are told apart by nothing
   at all, which is deliberate: they are equally checkable, and the reader is
   being shown a derivation rather than a provenance. */
.chain[b-jwf23psry6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .55rem;
    font-size: 1.05rem;
}

.chain li + li[b-jwf23psry6]::before {
    content: "→";
    margin-right: .55rem;
    color: var(--muted);
    font-size: .85rem;
}

/* Each step named by the form, or by the arrow, that it is about. These sit
   inside .detail, whose own dt and dd match them at equal specificity, so
   they have to come after it in this file to win. */
.steps[b-jwf23psry6] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem .9rem;
    margin: .75rem 0 0;
}

.steps dt[b-jwf23psry6] {
    font-size: .95rem;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: normal;
    padding-top: 0;
    white-space: nowrap;
}

.steps dd[b-jwf23psry6] {
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
}

.steps .to[b-jwf23psry6] {
    color: var(--muted);
    font-size: .8rem;
    padding: 0 .1rem;
}

/* Every change is recorded at stem grain, so all of them belong to the one
   arrow this list hangs under. Where a form was typed after a step, the step
   carries its own small arrow too, beside its name rather than in a column
   of its own: an arrow per step is a link of the chain above, and is read
   with the name it belongs to. */
.did[b-jwf23psry6] {
    list-style: none;
    margin: .45rem 0 0;
    padding: 0;
    display: grid;
    gap: .35rem;
    max-width: 32rem;
}

.did-name[b-jwf23psry6] {
    display: block;
    font-weight: 600;
    color: var(--ink-soft);
}

.did-forms[b-jwf23psry6] {
    margin-left: .4rem;
    font-weight: 400;
    font-size: .95rem;
    white-space: nowrap;
}

.did-what[b-jwf23psry6] {
    display: block;
    line-height: 1.45;
}

/* The chain is bare and the labels are short, so both still read across on a
   phone. Only the two columns of the step list have to give way. */
@media (max-width: 34rem) {
    .steps[b-jwf23psry6] {
        grid-template-columns: 1fr;
        gap: .1rem;
    }

    .steps dt[b-jwf23psry6] {
        margin-top: .5rem;
    }
}

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

@media (hover: hover) {
    .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 is marked. */
tr.row-here th[b-9hctunao7r],
tr.row-here td[b-9hctunao7r] {
    background: var(--surface);
}

/* Green, against the red bar on the row the answer pointed at. A table only
   appears after a miss — the browser at /paradigms picks out no cell at all —
   so these two marks are never anything but the right place and the wrong
   one, and they should say so in the colours the chips above them use.

   This was the accent, on the argument that "you are here" should read the
   same way everywhere. It did not survive Modern Ink, where the accent is a
   vermilion close enough to the error red that the two marks were hard to
   tell apart at a glance — and telling them apart is the entire reason both
   are shown. */
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(--good);
}

/* 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(--good);
    font-weight: 700;
    background: var(--good-bg);
    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);
}