/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui .dismiss[b-pel5lp6b2o] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.sign-out button[b-pel5lp6b2o] {
    font: inherit;
    padding: 0;
    color: var(--muted);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-r7r5jibbgy],
.components-reconnect-repeated-attempt-visible[b-r7r5jibbgy],
.components-reconnect-failed-visible[b-r7r5jibbgy],
.components-pause-visible[b-r7r5jibbgy],
.components-resume-failed-visible[b-r7r5jibbgy],
.components-rejoining-animation[b-r7r5jibbgy] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-r7r5jibbgy],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-r7r5jibbgy],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-r7r5jibbgy],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-r7r5jibbgy],
#components-reconnect-modal.components-reconnect-retrying[b-r7r5jibbgy],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-r7r5jibbgy],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-r7r5jibbgy],
#components-reconnect-modal.components-reconnect-failed[b-r7r5jibbgy],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-r7r5jibbgy] {
    display: block;
}


#components-reconnect-modal[b-r7r5jibbgy] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-r7r5jibbgy 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-r7r5jibbgy 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-r7r5jibbgy 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-r7r5jibbgy]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-r7r5jibbgy 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-r7r5jibbgy {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-r7r5jibbgy {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-r7r5jibbgy {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-r7r5jibbgy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-r7r5jibbgy] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-r7r5jibbgy] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-r7r5jibbgy] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-r7r5jibbgy] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-r7r5jibbgy] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-r7r5jibbgy] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-r7r5jibbgy 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-r7r5jibbgy] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-r7r5jibbgy {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AccountPage.razor.rz.scp.css */
/* A reading measure rather than the 62rem the paradigm browser and the data
   editor use. Those are tables and want the width; this is four paragraphs
   and one field, and prose set that wide is hard to read. */
.account[b-ailm4gpbc7] {
    max-width: 38rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.page[b-ailm4gpbc7] {
    font-size: 2.1rem;
    margin: 0 0 0.4rem;
    letter-spacing: -0.045em;
}

.lede[b-ailm4gpbc7] {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin: 0 0 1.5rem;
}

/* The small print under each step: true, worth saying once, and not what
   anybody came here to read. */
.aside[b-ailm4gpbc7] {
    font-size: 0.875rem;
    color: var(--muted);
    margin: 1rem 0 0;
}

/* Both outcomes are a panel rather than a line of coloured text, because
   each is the answer to something the reader just did and has to be findable
   after the page reloads under them. */
.sent[b-ailm4gpbc7],
.wrong[b-ailm4gpbc7] {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-control);
    border: 1px solid;
}

.sent[b-ailm4gpbc7] {
    color: var(--good);
    background: var(--good-bg);
    border-color: var(--good);
}

.wrong[b-ailm4gpbc7] {
    color: var(--bad);
    background: var(--bad-bg);
    border-color: var(--bad);
}

.gate[b-ailm4gpbc7] {
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
}

label[b-ailm4gpbc7] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ink-soft);
    font-weight: 600;
}

input[b-ailm4gpbc7] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 0.6rem 0.75rem;
    color: var(--ink);
    background: var(--page);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
}

button[b-ailm4gpbc7] {
    font: inherit;
    margin-top: 1rem;
    padding: 0.6rem 1.25rem;
    color: var(--on-accent);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    cursor: pointer;
}

/* Signing out is not the thing this page is for, and a filled accent button
   sitting alone under "Signed in as…" reads as the next step to take. */
form[action$="sign-out"] button[b-ailm4gpbc7] {
    margin-top: 0;
    color: var(--ink-soft);
    background: var(--surface);
    border-color: var(--rule);
}

form[action$="sign-out"] button:hover[b-ailm4gpbc7] {
    background: var(--highlight);
}
/* /Components/Pages/DataEditor.razor.rz.scp.css */
/* The same measure as the panel below it, so the heading lines up with the
   search box rather than floating over it. */
.page[b-ukzjlqoyc1],
.lede[b-ukzjlqoyc1],
.tabs[b-ukzjlqoyc1] {
    max-width: 62rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.page[b-ukzjlqoyc1] {
    font-size: 2.1rem;
    margin-top: 2rem;
    margin-bottom: 0.4rem;
    letter-spacing: -0.045em;
}

.lede[b-ukzjlqoyc1] {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* The three tables ----------------------------------------------------- */

.tabs[b-ukzjlqoyc1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 2rem;
}

.tabs a[b-ukzjlqoyc1] {
    padding: 0.45rem 0.9rem;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    text-decoration: none;
}

.tabs a:hover[b-ukzjlqoyc1] {
    background: var(--highlight);
}

.tabs .here[b-ukzjlqoyc1] {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

/* Shared by the panels ------------------------------------------------- */

/* What the two newer panels added: a coverage bar, a queue picker, select
   boxes, paired fields, the sticky source and the status chips. The base the
   three of them share follows further down. */

/* How far the work has got. A bar rather than only a number, because the
   figure it shows is a share of the text rather than a count of rows, and a
   share is what a bar is for. */
[b-ukzjlqoyc1] .bar {
    height: 0.5rem;
    margin-top: 0.75rem;
    max-width: 34rem;
    background: var(--rule);
    border-radius: 0.25rem;
    overflow: hidden;
}

[b-ukzjlqoyc1] .bar span {
    display: block;
    height: 100%;
    background: var(--accent);
}

[b-ukzjlqoyc1] .picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

[b-ukzjlqoyc1] .picker button {
    font: inherit;
    padding: 0.4rem 0.85rem;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    cursor: pointer;
}

[b-ukzjlqoyc1] .picker .picked {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

[b-ukzjlqoyc1] select {
    width: 100%;
    max-width: 24rem;
    box-sizing: border-box;
    font: inherit;
    padding: 0.5rem 0.7rem;
    color: var(--ink);
    background: var(--page);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
}

[b-ukzjlqoyc1] select:disabled {
    opacity: 0.5;
}

/* Two fields that are read as a pair — a stem and the root it is built on,
   a preposition and the verb it sits in front of. */
[b-ukzjlqoyc1] .field.two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.9rem;
    max-width: 24rem;
}

/* The sticky source. Beside the field rather than under the hint, because it
   is about the field and not about the advice. */
[b-ukzjlqoyc1] .keep {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

[b-ukzjlqoyc1] .keep input {
    width: auto;
    margin: 0;
}

/* What the row already says about itself. */
[b-ukzjlqoyc1] .chip {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin-right: 0.4rem;
    border-radius: 0.35rem;
    background: var(--good-bg);
    color: var(--good);
    font-size: 0.75rem;
}

[b-ukzjlqoyc1] .chip.quiet,
[b-ukzjlqoyc1] .byhand.weak {
    background: var(--highlight);
    color: var(--ink-soft);
}

[b-ukzjlqoyc1] .chip.bad {
    background: var(--bad-bg);
    color: var(--bad);
}

/* An offer rather than an instruction: the inheritance the page worked out,
   and the confirmation it is about to record. */
[b-ukzjlqoyc1] .offer {
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    background: var(--highlight);
    border-radius: var(--radius-control);
}

[b-ukzjlqoyc1] .standing-note {
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

/* One click, and the commonest one on the page: separated from Correct so
   that agreeing with the data does not look like changing it. */
[b-ukzjlqoyc1] .confirm {
    margin-right: 0.35rem;
}

/* A list of words scrolls rather than pushing --------------------------- */

/* A worklist is fifty verbs and a search returns twenty, and every section
   under one of them starts that much further down the page. Capped and
   scrolled in place, the page stays the same length whatever the list is
   doing, and the list is still as long as it was. */
[b-ukzjlqoyc1] .matches,
[b-ukzjlqoyc1] .worklist {
    max-height: 20rem;
    overflow-y: auto;
    /* Room for the scrollbar, so it sits beside the buttons rather than over
       the count on their right. */
    padding-right: .35rem;
}

/* The corrections log is the same complaint on a table: it only grows, and
   everything it is read beside is above it. */
[b-ukzjlqoyc1] .done .scrolls {
    max-height: 22rem;
    overflow-y: auto;
}

/* Which is only usable while the headings stay put. */
[b-ukzjlqoyc1] .done .log thead th {
    position: sticky;
    top: 0;
    background: var(--page);
}

/* The changes between a root and a stem. Nineteen of them, which is a
   closed list rather than a long one, so they are ticked in place and the box
   scrolls rather than the form growing to hold them all. */
[b-ukzjlqoyc1] .changes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.15rem 0.9rem;
    max-height: 13rem;
    overflow-y: auto;
    padding: 0.5rem 0.6rem;
    background: var(--page);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
}

[b-ukzjlqoyc1] .tick {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
}

[b-ukzjlqoyc1] .tick input {
    width: auto;
    margin: 0;
    flex: none;
}

[b-ukzjlqoyc1] .tick .eg {
    color: var(--muted);
    font-size: 0.8rem;
}

/* The form after each step, laid out as the chain it becomes: the root at the
   head, the stem at the foot, and a box for every step between, each beside
   the name of the step it follows and the arrows that move it. */
[b-ukzjlqoyc1] .walk {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    max-width: 28rem;
}

[b-ukzjlqoyc1] .walk li {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
}

[b-ukzjlqoyc1] .walk .move {
    display: flex;
    gap: 0.25rem;
}

[b-ukzjlqoyc1] .walk .move button {
    padding: 0.25rem 0.55rem;
    line-height: 1;
    color: var(--ink-soft);
    background: var(--surface);
    border-color: var(--rule);
}

[b-ukzjlqoyc1] .walk .move button:hover:not(:disabled) {
    background: var(--highlight);
}

[b-ukzjlqoyc1] .walk .walk-step {
    margin: 0;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

[b-ukzjlqoyc1] .walk input {
    padding: 0.35rem 0.6rem;
}

/* A heading is a verb, then what it costs, then where in the queue it is —
   three things, and the markup puts them in three spans with no text between,
   so the gap is set here rather than with a space nobody can see in a diff. */
[b-ukzjlqoyc1] .entry h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

/* Shared by the three panels ------------------------------------------- */

/* ::deep, because these style the panels' markup rather than this component's.
   They lived in PartEditorPanel.razor.css until there were three panels to
   style; a scoped stylesheet reaches one component, so keeping them there
   would have meant three copies of one appearance and three places for it to
   drift. The page wraps all three in .data, which is what gives these
   selectors something to descend from.

   Everything below is that sheet, unchanged apart from the prefix. */

/* One column at the same measure as the rest of the site. Nothing here is
   arranged side by side: the three sections are used in order, and reading
   order is the order they are needed in. */
[b-ukzjlqoyc1] .editor {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1rem 4rem;
    display: grid;
    /* minmax(0, 1fr) rather than the implicit auto column. A grid track sized
       auto is at least as wide as its widest item's minimum, so the 24rem
       search box and the six-column table each pushed the whole page wider
       than a phone and everything scrolled sideways together. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

[b-ukzjlqoyc1] section {
    margin: 0;
    min-width: 0;
}

[b-ukzjlqoyc1] h2 {
    font-size: 1.15rem;
    margin: 0 0 .35rem;
}

[b-ukzjlqoyc1] h3 {
    font-size: 1rem;
    margin: 0 0 .9rem;
}

[b-ukzjlqoyc1] .hint {
    font-size: .875rem;
    color: var(--muted);
    margin: .35rem 0 0;
    max-width: 40rem;
}

[b-ukzjlqoyc1] .quiet, [b-ukzjlqoyc1] .none {
    color: var(--muted);
}

/* The serif stack comes from app.css, off lang="grc". Only the size is set
   here: Greek is the content on this page and reads small beside the UI. */
[b-ukzjlqoyc1] :where([lang="grc"]) {
    font-size: 1.05rem;
}

/* Finding a verb ------------------------------------------------------- */

[b-ukzjlqoyc1] label {
    display: block;
    margin-bottom: .4rem;
    color: var(--ink-soft);
    font-weight: 600;
}

[b-ukzjlqoyc1] input {
    width: 100%;
    max-width: 24rem;
    box-sizing: border-box;
    font: inherit;
    padding: .55rem .7rem;
    color: var(--ink);
    background: var(--page);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
}

[b-ukzjlqoyc1] .matches, [b-ukzjlqoyc1] .worklist {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: grid;
    gap: .25rem;
    max-width: 34rem;
}

[b-ukzjlqoyc1] .matches button, [b-ukzjlqoyc1] .worklist button {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .9rem;
    align-items: baseline;
    width: 100%;
    font: inherit;
    text-align: left;
    padding: .45rem .65rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    cursor: pointer;
}

[b-ukzjlqoyc1] .matches button:hover, [b-ukzjlqoyc1] .worklist button:hover {
    background: var(--highlight);
}

[b-ukzjlqoyc1] .matches .picked {
    border-color: var(--accent);
    background: var(--highlight);
}

[b-ukzjlqoyc1] .mask {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    color: var(--muted);
    letter-spacing: .1em;
}

[b-ukzjlqoyc1] .count, [b-ukzjlqoyc1] .which {
    font-size: .8rem;
    color: var(--muted);
}

/* The six slots -------------------------------------------------------- */

/* Six rows of Greek, a note and two buttons do not fit a phone, and the
   alternative to scrolling one table is scrolling the whole page sideways. */
[b-ukzjlqoyc1] .scrolls {
    overflow-x: auto;
    margin-top: .9rem;
}

[b-ukzjlqoyc1] table {
    width: 100%;
    border-collapse: collapse;
}

[b-ukzjlqoyc1] th, [b-ukzjlqoyc1] td {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: baseline;
}

[b-ukzjlqoyc1] thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 600;
}

[b-ukzjlqoyc1] tbody th {
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
}

[b-ukzjlqoyc1] .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

/* A part the text does not write is not a gap, and should not read as one. */
[b-ukzjlqoyc1] .absent {
    opacity: .5;
}

[b-ukzjlqoyc1] .dash, [b-ukzjlqoyc1] .unknown {
    color: var(--muted);
}

[b-ukzjlqoyc1] .unknown {
    font-style: italic;
    font-size: .9rem;
}

[b-ukzjlqoyc1] .source {
    font-size: .85rem;
}

[b-ukzjlqoyc1] .byhand {
    display: inline-block;
    padding: .05rem .4rem;
    margin-right: .4rem;
    border-radius: .35rem;
    background: var(--good-bg);
    color: var(--good);
    font-size: .75rem;
}

[b-ukzjlqoyc1] .note {
    color: var(--ink-soft);
}

/* What a correction replaced, kept visible so it can be judged. */
[b-ukzjlqoyc1] .was {
    display: block;
    color: var(--muted);
    font-size: .8rem;
}

[b-ukzjlqoyc1] .act {
    text-align: right;
    white-space: nowrap;
}

/* Entering one -------------------------------------------------------- */

[b-ukzjlqoyc1] button {
    font: inherit;
    padding: .4rem .85rem;
    color: var(--on-accent);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    cursor: pointer;
}

[b-ukzjlqoyc1] button:disabled {
    opacity: .5;
    cursor: default;
}

[b-ukzjlqoyc1] .act button, [b-ukzjlqoyc1] .undo, [b-ukzjlqoyc1] .blank, [b-ukzjlqoyc1] .cancel {
    color: var(--ink-soft);
    background: var(--surface);
    border-color: var(--rule);
}

[b-ukzjlqoyc1] .act button:hover, [b-ukzjlqoyc1] .undo:hover, [b-ukzjlqoyc1] .blank:hover, [b-ukzjlqoyc1] .cancel:hover {
    background: var(--highlight);
}

[b-ukzjlqoyc1] .entry {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    max-width: 34rem;
}

[b-ukzjlqoyc1] .field {
    margin-bottom: 1rem;
}

[b-ukzjlqoyc1] .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

[b-ukzjlqoyc1] .wrong {
    margin: .75rem 0 0;
    color: var(--bad);
}

/* The worklist and the log -------------------------------------------- */

[b-ukzjlqoyc1] .worklist {
    counter-reset: hole;
    max-width: 38rem;
}

[b-ukzjlqoyc1] .log td {
    font-size: .875rem;
}

[b-ukzjlqoyc1] .log .note {
    color: var(--muted);
}

[b-ukzjlqoyc1] .when {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    white-space: nowrap;
}

/* A lemma in the log jumps to it; it is navigation, not a control. */
[b-ukzjlqoyc1] .link {
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 1.05rem;
    cursor: pointer;
}

[b-ukzjlqoyc1] .download {
    display: inline-block;
    margin: .5rem 0;
    padding: .45rem .9rem;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: var(--radius-control);
    text-decoration: none;
}

[b-ukzjlqoyc1] .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 40rem) {
    /* The token count is the first thing to go: the ordering already says
       what it says, and the number is a tie-break. */
    [b-ukzjlqoyc1] .log .when, [b-ukzjlqoyc1] .slots .num {
        display: none;
    }

    [b-ukzjlqoyc1] th, [b-ukzjlqoyc1] td {
        padding: .5rem .4rem;
    }

    /* A source citation is the widest thing in either table and the least
       urgent on a phone: it is read when a correction is being judged, which
       is not something done one-handed. */
    [b-ukzjlqoyc1] .slots .note, [b-ukzjlqoyc1] .log .note {
        display: inline-block;
        max-width: 9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}
/* /Components/Pages/Paradigms.razor.rz.scp.css */
/* The same measure as the browser below it, so the heading lines up with the
   toolbar rather than floating over it. */
.page[b-ll5uxq03ia],
.lede[b-ll5uxq03ia] {
    max-width: 62rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.page[b-ll5uxq03ia] {
    font-size: 2.1rem;
    margin-top: 2rem;
    margin-bottom: 0.4rem;
    letter-spacing: -0.045em;
}

.lede[b-ll5uxq03ia] {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin-top: 0;
    margin-bottom: 1.75rem;
}
/* /Components/Pages/SignIn.razor.rz.scp.css */
.gate[b-ffc6u2vdf2] {
    max-width: 22rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
}

label[b-ffc6u2vdf2] {
    display: block;
    margin-bottom: .5rem;
    color: var(--ink-soft);
}

input[type="password"][b-ffc6u2vdf2] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: .6rem .75rem;
    color: var(--ink);
    background: var(--page);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
}

.wrong[b-ffc6u2vdf2] {
    margin: .75rem 0 0;
    color: var(--bad);
}

button[b-ffc6u2vdf2] {
    font: inherit;
    margin-top: 1rem;
    padding: .6rem 1.25rem;
    color: var(--on-accent);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    cursor: pointer;
}
/* /Components/Readiness/NextToDrill.razor.rz.scp.css */
.next[b-y7251pctdf] {
    margin: 2rem 0;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    background: var(--surface);
}

.next h2[b-y7251pctdf] {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.help[b-y7251pctdf] {
    margin: 0 0 0.8rem;
    font-size: 0.88rem;
    color: var(--muted);
    max-width: 36rem;
}

.picks[b-y7251pctdf] {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.picks li[b-y7251pctdf] {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.3rem 0.8rem;
}

.kind[b-y7251pctdf] {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.title[b-y7251pctdf] {
    font-size: 0.95rem;
    font-weight: 600;
}

/* The grounds for the suggestion, on the line under it: the reader should be
   able to disagree with it without opening another page. */
.why[b-y7251pctdf] {
    grid-column: 2;
    font-size: 0.82rem;
    color: var(--muted);
}

.drill[b-y7251pctdf] {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
}

.drill:disabled[b-y7251pctdf] {
    opacity: 0.45;
    cursor: default;
}

.link[b-y7251pctdf] {
    font-size: 0.85rem;
    color: var(--muted);
    text-underline-offset: .2em;
}

@media (max-width: 30rem) {
    .picks li[b-y7251pctdf] {
        grid-template-columns: 1fr auto;
    }

    .picks .kind[b-y7251pctdf] {
        grid-column: 1;
    }

    .picks .title[b-y7251pctdf], .picks .why[b-y7251pctdf] {
        grid-column: 1;
    }

    .picks .drill[b-y7251pctdf] {
        grid-row: 1 / span 3;
        grid-column: 2;
    }
}
/* /Components/Readiness/ReadinessPanel.razor.rz.scp.css */
.panel[b-uf18kj4ixe] {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    background: var(--surface);
}

.panel h2[b-uf18kj4ixe] {
    margin: 0 0 0.7rem;
    font-size: 1.05rem;
}

.help[b-uf18kj4ixe] {
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
    max-width: 38rem;
}

.suggestions[b-uf18kj4ixe] {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tally[b-uf18kj4ixe] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.count[b-uf18kj4ixe] {
    font-size: 0.88rem;
}

.count strong[b-uf18kj4ixe] {
    font-size: 1.25rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin-right: 0.25rem;
}

.count.muted[b-uf18kj4ixe], .count.muted strong[b-uf18kj4ixe] {
    color: var(--muted);
}

/* The standings ---------------------------------------------------------- */

.standings[b-uf18kj4ixe] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
}

.standings li[b-uf18kj4ixe] {
    display: grid;
    grid-template-columns: minmax(9rem, 1.1fr) 7.5rem minmax(0, 1.6fr) auto;
    align-items: baseline;
    gap: 0.6rem 0.9rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule);
}

.standings li:last-child[b-uf18kj4ixe] {
    border-bottom: 0;
}

.what .title[b-uf18kj4ixe] {
    font-size: 0.94rem;
}

.what .subtitle[b-uf18kj4ixe] {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
}

.state[b-uf18kj4ixe] {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* Only the two readings that ask for something get a colour. Holding is the
   quiet one on purpose: it is not an award. */
.holding .state[b-uf18kj4ixe] {
    color: var(--good);
}

.practice .state[b-uf18kj4ixe] {
    color: var(--bad);
}

.unmet .what .title[b-uf18kj4ixe], .unmet .evidence[b-uf18kj4ixe] {
    color: var(--muted);
}

.evidence[b-uf18kj4ixe] {
    font-size: 0.82rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.drill[b-uf18kj4ixe], .suggestion .drill[b-uf18kj4ixe] {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
}

.drill:disabled[b-uf18kj4ixe] {
    opacity: 0.45;
    cursor: default;
}

.drill-none[b-uf18kj4ixe] {
    color: var(--muted);
    text-align: center;
}

@media (max-width: 34rem) {
    .standings li[b-uf18kj4ixe] {
        grid-template-columns: 1fr auto;
        gap: 0.35rem 0.9rem;
    }

    .standings .evidence[b-uf18kj4ixe] {
        grid-column: 1 / -1;
    }

    /* On its own row, but still a button rather than a banner. */
    .standings .drill[b-uf18kj4ixe], .standings .drill-none[b-uf18kj4ixe] {
        grid-column: 1;
        justify-self: start;
    }
}
/* /Components/Readiness/ReadinessSuggestionCard.razor.rz.scp.css */
/* A column so the two cards' buttons line up whatever length their reasons
   run to: they are the same action and should read as one row. */
.suggestion[b-f0y05nfm3f] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    background: var(--highlight);
}

.kind[b-f0y05nfm3f] {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.title[b-f0y05nfm3f] {
    font-weight: 600;
    font-size: 0.98rem;
}

.subtitle[b-f0y05nfm3f] {
    display: block;
    font-size: 0.9rem;
    color: var(--muted);
}

.why[b-f0y05nfm3f] {
    margin: 0.45rem 0 0;
    font-size: 0.88rem;
}

.scale[b-f0y05nfm3f] {
    margin: 0.2rem 0 0.7rem;
    flex: 1;
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.drill[b-f0y05nfm3f] {
    align-self: flex-start;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: var(--radius-control);
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
}

.drill:disabled[b-f0y05nfm3f] {
    opacity: 0.45;
    cursor: default;
}
/* /Components/Review/ReviewPanel.razor.rz.scp.css */
.settings[b-vu39y9xf2i], .report[b-vu39y9xf2i] {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    background: var(--surface);
}

.settings h2[b-vu39y9xf2i], .report h2[b-vu39y9xf2i] {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.help[b-vu39y9xf2i] {
    margin: 0 0 0.9rem;
    font-size: 0.88rem;
    color: var(--muted);
    max-width: 34rem;
}

.dial[b-vu39y9xf2i] {
    margin: 1.3rem 0;
}

.dial > label[b-vu39y9xf2i], .dial > .label[b-vu39y9xf2i] {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
}

.dial .help[b-vu39y9xf2i] {
    margin: 0.4rem 0 0;
}

.dial-control[b-vu39y9xf2i] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.slider[b-vu39y9xf2i] {
    flex: 1;
    min-width: 9rem;
    max-width: 20rem;
    margin: 0;
    accent-color: var(--accent);
}

.dial-control input[type="number"][b-vu39y9xf2i], .dial-control select[b-vu39y9xf2i] {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    background: var(--page);
    color: var(--ink);
}

.dial-control input[type="number"][b-vu39y9xf2i] {
    width: 6rem;
    font-variant-numeric: tabular-nums;
}

.value[b-vu39y9xf2i] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.unit[b-vu39y9xf2i] {
    font-size: 0.88rem;
    color: var(--muted);
}

.opt[b-vu39y9xf2i] {
    font: inherit;
    font-size: 0.88rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
}

.opt:disabled[b-vu39y9xf2i], .dial-control input:disabled[b-vu39y9xf2i], .dial-control select:disabled[b-vu39y9xf2i] {
    opacity: 0.45;
    cursor: default;
}

/* Holds its line whether or not there is anything to say, so saving a setting
   does not shunt the dial below it up and down the page. */
.feedback[b-vu39y9xf2i] {
    min-height: 1.2rem;
    margin: 1rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}
/* /Components/Review/ReviewReportView.razor.rz.scp.css */
.report[b-cuwxzatdzi] {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    background: var(--surface);
}

.report h2[b-cuwxzatdzi] {
    margin: 0 0 0.7rem;
    font-size: 1.05rem;
}

.report h3[b-cuwxzatdzi] {
    margin: 1.3rem 0 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.help[b-cuwxzatdzi] {
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
    max-width: 36rem;
}

.counts[b-cuwxzatdzi] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.count[b-cuwxzatdzi] {
    font-size: 0.88rem;
}

.count strong[b-cuwxzatdzi] {
    font-size: 1.25rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin-right: 0.25rem;
}

.count.muted[b-cuwxzatdzi], .count.muted strong[b-cuwxzatdzi] {
    color: var(--muted);
}

/* Forecast ---------------------------------------------------------------- */

.forecast[b-cuwxzatdzi] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.forecast li[b-cuwxzatdzi] {
    display: grid;
    grid-template-columns: 6.5rem 1fr 2.5rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.forecast .when[b-cuwxzatdzi] {
    color: var(--muted);
}

.forecast .bar[b-cuwxzatdzi] {
    height: 0.7rem;
    border-radius: 999px;
    background: var(--highlight);
    overflow: hidden;
}

.forecast .bar > span[b-cuwxzatdzi] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.forecast .n[b-cuwxzatdzi] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The weekly record, laid out like the forecast with the recall rate added:
   the count beside the rate is the point, since a light week swings on one
   answer. */
.weeks[b-cuwxzatdzi] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.weeks li[b-cuwxzatdzi] {
    display: grid;
    grid-template-columns: 4.5rem 1fr 2.5rem 3rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.weeks .when[b-cuwxzatdzi] {
    color: var(--muted);
}

.weeks .bar[b-cuwxzatdzi] {
    height: 0.7rem;
    border-radius: 999px;
    background: var(--highlight);
    overflow: hidden;
}

.weeks .bar > span[b-cuwxzatdzi] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.weeks .n[b-cuwxzatdzi], .weeks .rate[b-cuwxzatdzi] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.weeks .rate[b-cuwxzatdzi] {
    color: var(--muted);
}

/* Figures ----------------------------------------------------------------- */

.figures[b-cuwxzatdzi] {
    margin: 0;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.figures dt[b-cuwxzatdzi] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.figures dd[b-cuwxzatdzi] {
    margin: 0.15rem 0 0;
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The count behind every figure, kept beside it rather than in a footnote. */
.figures .sample[b-cuwxzatdzi] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--muted);
}

/* The log ----------------------------------------------------------------- */

.scroll[b-cuwxzatdzi] {
    overflow-x: auto;
}

.log[b-cuwxzatdzi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.log th[b-cuwxzatdzi] {
    text-align: left;
    padding: 0 0.6rem 0.35rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.log td[b-cuwxzatdzi] {
    padding: 0.45rem 0.6rem 0.45rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.log tr:last-child td[b-cuwxzatdzi] {
    border-bottom: 0;
}

.log .when[b-cuwxzatdzi], .log .next[b-cuwxzatdzi] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.log .greek[b-cuwxzatdzi] {
    font-size: 1.05rem;
}

.log .lemma[b-cuwxzatdzi], .log .state[b-cuwxzatdzi] {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
}

.rating[b-cuwxzatdzi] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Again is the only rating worth colouring: it is the one that changed the
   card's story. The other three all mean the word was recalled. */
.rating.again[b-cuwxzatdzi] {
    color: var(--bad);
    border-color: color-mix(in srgb, var(--bad) 35%, var(--rule));
    background: var(--bad-bg);
}
/* /Components/Settings/ProgressBackup.razor.rz.scp.css */
.backup[b-m4ffu32oal] { padding: 1.5rem; margin: 1.5rem 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); }
h2[b-m4ffu32oal] { margin-top: 0; font-size: 1.2rem; }
p[b-m4ffu32oal] { color: var(--ink-soft); }
label[b-m4ffu32oal] { display: block; margin: 1rem 0 .5rem; }
button[b-m4ffu32oal] { font: inherit; border: 1px solid var(--rule); background: var(--highlight); color: var(--accent); padding: .6rem 1rem; border-radius: var(--radius-control); cursor: pointer; margin: .5rem .5rem .5rem 0; }
button:disabled[b-m4ffu32oal] { opacity: .5; cursor: default; }
.preview[b-m4ffu32oal] { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.backup[b-m4ffu32oal]  input { max-width: 100%; color: var(--ink-soft); }
/* /Components/Settings/ThemePicker.razor.rz.scp.css */
.hint[b-2svmm81why], .description[b-2svmm81why], .saved[b-2svmm81why] { color: var(--muted); font-size: 0.85rem; }
.hint[b-2svmm81why] { margin: 0 0 1.5rem; }
.themes[b-2svmm81why] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.theme[b-2svmm81why] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    text-align: left;
    padding: 0.65rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    font: inherit;
    cursor: pointer;
}
@media (hover: hover) { .theme:hover[b-2svmm81why] { border-color: var(--accent); } }
.theme.selected[b-2svmm81why] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-preview[b-2svmm81why] {
    display: block;
    padding: 1rem;
    border-radius: var(--radius-control);
    background: var(--page);
    color: var(--ink);
    border: 1px solid var(--rule);
}
.sample-label[b-2svmm81why] { display: block; font-size: 0.55rem; letter-spacing: 0.12em; color: var(--muted); }
.sample-word[b-2svmm81why] { display: block; font-size: 2rem; margin: 0.6rem 0; line-height: 1.3; }
.sample-options[b-2svmm81why] { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.65rem; }
.sample-options span[b-2svmm81why] { padding: 0.3rem 0.5rem; border-radius: 0.4rem; border: 1px solid var(--rule); }
.sample-options span:first-child[b-2svmm81why] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.swatches[b-2svmm81why] { display: flex; gap: 0.35rem; margin-top: 1rem; }
.swatches i[b-2svmm81why] { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--accent); }
.swatches i:nth-child(2)[b-2svmm81why] { background: var(--muted); }
.swatches i:nth-child(3)[b-2svmm81why] { background: var(--ink); }
.theme-caption[b-2svmm81why] { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin: 0.75rem 0.3rem 0.25rem; }
.theme-caption strong[b-2svmm81why] { font-size: 0.9rem; }
.selection[b-2svmm81why] { color: var(--muted); font-size: 0.7rem; }
.selected .selection[b-2svmm81why] { color: var(--accent); font-weight: 600; }
.description[b-2svmm81why] { display: block; margin: 0 0.3rem 0.4rem; font-size: 0.75rem; }
.saved[b-2svmm81why] { min-height: 1.5em; }
.return-links[b-2svmm81why] { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.85rem; margin-top: 1rem; }
@media (max-width: 480px) { .themes[b-2svmm81why] { grid-template-columns: 1fr; } }
/* /Components/Setup/DrillSetup.razor.rz.scp.css */
.setup[b-dzj649ysrd] {
    margin: 2rem 0;
}

h2[b-dzj649ysrd] {
    font-size: 1.25rem;
    margin: 0 0 1rem;
}

.drill-types[b-dzj649ysrd] {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.drill-type[b-dzj649ysrd] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.25rem;
    border: 1px solid var(--rule);
    background: var(--surface);
    border-radius: var(--radius-panel);
    box-shadow: inset 3px 0 0 var(--accent), var(--shadow-panel);
}

.drill-type input[b-dzj649ysrd] {
    accent-color: var(--accent);
    margin-top: 0.3rem;
}

.drill-type strong[b-dzj649ysrd] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
}

.help[b-dzj649ysrd] {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}

p.help[b-dzj649ysrd] {
    margin: 0 0 0.75rem;
}

fieldset[b-dzj649ysrd] {
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0 0 1.25rem;
    margin: 0 0 1.25rem;
}

legend[b-dzj649ysrd] {
    padding: 0;
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: capitalize;
}

.group[b-dzj649ysrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.opt[b-dzj649ysrd] {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--muted);
    border-radius: var(--radius-control);
    cursor: pointer;
    font-weight: 500;
}

.opt.on[b-dzj649ysrd] {
    color: var(--accent);
    background: var(--highlight);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

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

button:focus-visible[b-dzj649ysrd], input:focus-visible[b-dzj649ysrd] {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.selection-tools[b-dzj649ysrd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.reset[b-dzj649ysrd] {
    background: none;
    border: 0;
    padding: 0.25rem 0;
    color: var(--accent);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.feedback[b-dzj649ysrd] {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0.75rem 0;
}

.feedback:empty[b-dzj649ysrd] {
    margin: 0;
}

.launch[b-dzj649ysrd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    margin-top: 1.5rem;
    border-radius: var(--radius-panel);
    background: var(--surface);
    box-shadow: var(--shadow-panel);
    border: 1px solid var(--rule);
}

.launch strong[b-dzj649ysrd] {
    font-variant-numeric: tabular-nums;
}

.launch .help[b-dzj649ysrd] {
    margin-top: 0.25rem;
    max-width: 21rem;
    font-size: 0.8rem;
}

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

.start:disabled[b-dzj649ysrd] {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 480px) {
    .launch .start[b-dzj649ysrd] {
        width: 100%;
    }
}

@media (hover: hover) {
    .start:hover:not(:disabled)[b-dzj649ysrd] {
        background: color-mix(in srgb, var(--accent) 90%, var(--ink));
    }
}

/* Session length. The stops are unevenly spaced in words but evenly spaced on
   the track: the slider measures how long a sitting is, not how many words. */
.length[b-dzj649ysrd] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Slider and scale share this box, so the captions span the track and not the
   whole fieldset. The readout is outside it. */
.length-track[b-dzj649ysrd] {
    flex: 1;
    min-width: 0;
}

.length-slider[b-dzj649ysrd] {
    display: block;
    width: 100%;
    margin: 0;
    accent-color: var(--accent);
    height: 1.6rem;
    cursor: pointer;
}

/* Wide enough for the longest label, so the track does not shrink and the
   whole scale shift when the readout goes from "10 words" to "Open practice". */
.length-value[b-dzj649ysrd] {
    flex: 0 0 auto;
    min-width: 7rem;
    padding-top: .3rem;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* A thumb's centre stops half a thumb short of each end of the track, so the
   captions are laid out across that inset range rather than the full width.
   The margin does the insetting: percentage offsets on the absolutely
   positioned captions resolve against the padding box, which padding would not
   shrink. */
.length-scale[b-dzj649ysrd] {
    --thumb: 1rem;
    position: relative;
    height: 1em;
    margin: .15rem calc(var(--thumb) / 2) .6rem;
    font-size: .7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.length-scale span[b-dzj649ysrd] {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.length-scale .here[b-dzj649ysrd] {
    color: var(--accent);
    font-weight: 600;
}

/* The captions crowd on a narrow screen; the readout already names the stop. */
@media (max-width: 30rem) {
    .length-scale[b-dzj649ysrd] { display: none; }
}
/* /Components/Setup/ScheduledReview.razor.rz.scp.css */
.scheduled[b-01emeorevi] {
    margin: 2rem 0;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-panel);
    background: var(--surface);
}

.scheduled h2[b-01emeorevi] {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.help[b-01emeorevi] {
    margin: 0 0 0.8rem;
    font-size: 0.88rem;
    color: var(--muted);
}

.counts[b-01emeorevi] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-bottom: 0.7rem;
}

.count[b-01emeorevi] {
    font-size: 0.88rem;
}

.count strong[b-01emeorevi] {
    font-size: 1.25rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin-right: 0.25rem;
}

.count.muted[b-01emeorevi], .count.muted strong[b-01emeorevi] {
    color: var(--muted);
}

.row[b-01emeorevi] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.start[b-01emeorevi] {
    font: inherit;
    font-weight: 600;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-control);
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.opt[b-01emeorevi] {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
}

a.link[b-01emeorevi] {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: .2em;
    font-size: 0.85rem;
}

.link[b-01emeorevi] {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

.start:disabled[b-01emeorevi], .opt:disabled[b-01emeorevi], .link:disabled[b-01emeorevi] {
    opacity: 0.45;
    cursor: default;
}