/* --------------------------------------------------------------------------------
   Delta's look: a cool blue-grey page, white panels, a pen-blue accent
   (graph paper and ink). Every color is a token defined twice: for light, and
   under [data-bs-theme="dark"], which js/theme.js sets on <html>. Bootstrap 5.3
   switches its own components with the same attribute; the --bs-* lines below
   point Bootstrap at our tokens, so buttons, cards and inputs match.
   Fonts: Atkinson Hyperlegible (designed for legibility) for text, JetBrains
   Mono for numbers. Loaded from Google Fonts in index.html.
   -------------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --d-bg: #f3f6f9;
    --d-panel: #ffffff;
    --d-fg: #1b2633;
    --d-muted: #5b6b7c;
    --d-line: #d3dce6;
    --d-accent: #1f5fbf;
    --d-on-accent: #ffffff;
    --d-good: #1e7b4a;
    --d-bad: #b3261e;
    --d-font: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
    --d-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

[data-bs-theme="dark"] {
    --d-bg: #111821;
    --d-panel: #18222e;
    --d-fg: #e3eaf2;
    --d-muted: #93a3b5;
    --d-line: #2c3a4a;
    --d-accent: #6ea2f0;
    --d-on-accent: #0d1520;
    --d-good: #5cc58e;
    --d-bad: #f08a80;
}

:root,
[data-bs-theme] {
    --bs-body-bg: var(--d-bg);
    --bs-body-color: var(--d-fg);
    --bs-body-font-family: var(--d-font);
    --bs-secondary-color: var(--d-muted);
    --bs-border-color: var(--d-line);
    --bs-link-color: var(--d-accent);
    --bs-link-hover-color: var(--d-accent);
    --bs-link-color-rgb: 31, 95, 191;
    --bs-card-bg: var(--d-panel);
    --bs-list-group-bg: var(--d-panel);
}

[data-bs-theme="dark"] {
    --bs-link-color-rgb: 110, 162, 240;
}

/* phones: no pull-to-refresh (it restarts the whole app and loses a typed
   answer) and no rubber-band bounce at the ends of the page */
html,
body {
    overscroll-behavior-y: none;
}

body {
    background: var(--d-bg);
    color: var(--d-fg);
    font-family: var(--d-font);
    font-size: 1.0625rem;
    line-height: 1.55;
}

h1, h2, h3 {
    text-wrap: balance;
}

h1 {
    font-size: 1.9rem;
    font-weight: 700;
}

h1:focus {
    outline: none;
}

.card,
.list-group-item {
    background: var(--d-panel);
    border-color: var(--d-line);
    color: var(--d-fg);
}

.form-control {
    background: var(--d-panel);
    border-color: var(--d-line);
    color: var(--d-fg);
    font-family: var(--d-mono);
}

.btn-primary {
    --bs-btn-bg: var(--d-accent);
    --bs-btn-border-color: var(--d-accent);
    --bs-btn-color: var(--d-on-accent);
    --bs-btn-hover-bg: var(--d-accent);
    --bs-btn-hover-border-color: var(--d-accent);
    --bs-btn-hover-color: var(--d-on-accent);
    --bs-btn-active-bg: var(--d-accent);
    --bs-btn-active-color: var(--d-on-accent);
    --bs-btn-disabled-bg: var(--d-accent);
    --bs-btn-disabled-border-color: var(--d-accent);
    --bs-btn-disabled-color: var(--d-on-accent);
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn:focus-visible, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--d-accent) 35%, transparent);
    border-color: var(--d-accent);
}

/* messages: say right or wrong in color and in words */
.text-muted-d { color: var(--d-muted); }
.msg-good { color: var(--d-good); }
.msg-bad { color: var(--d-bad); }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--d-good);
}

.invalid {
    outline: 1px solid var(--d-bad);
}

.validation-message {
    color: var(--d-bad);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* --------------------------------------------------------------------------------
   loading: the screen in index.html while the WebAssembly files download.
   Blazor sets --blazor-load-percentage on <html> as files arrive, so the bar
   shows real progress. theme.js has already set light or dark by then.
   -------------------------------------------------------------------------------- */
.boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 10vh;
}

.boot-name {
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
}

.boot-bar {
    width: min(12rem, 60vw);
    height: 4px;
    border-radius: 2px;
    background: var(--d-line);
    overflow: hidden;
}

.boot-bar-fill {
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: var(--d-accent);
    border-radius: inherit;
    transition: width 0.15s ease-out;
}

/* content blocks (Pages/Instance.razor): figures sit centered in the column;
   text stays left-aligned for reading */
.content-image {
    display: block;
    max-width: 100%;
    max-height: 20rem;
    margin-inline: auto;
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* --------------------------------------------------------------------------------
   graphs (Components/Graph.razor, js/graph.js)
   The palette names match GraphColors in Delta.Contracts. graph.js reads these
   variables when it draws, and redraws when the theme changes, so this is the
   one place to change a graph color.
   -------------------------------------------------------------------------------- */
:root {
    --graph-blue: #1f5fbf;
    --graph-orange: #d9782b;
    --graph-green: #2e8b57;
    --graph-purple: #7b4fbf;
    --graph-red: #c2462b;
    --graph-gray: #6b7785;
    --graph-accent: #1f5fbf;
    --graph-muted: #5b6b7c;
    --graph-line: #e3e9f0;
}

[data-bs-theme="dark"] {
    --graph-blue: #6ea2f0;
    --graph-orange: #f0a35e;
    --graph-green: #5cc58e;
    --graph-purple: #b393f0;
    --graph-red: #f08a6c;
    --graph-gray: #93a3b5;
    --graph-accent: #6ea2f0;
    --graph-muted: #93a3b5;
    --graph-line: #223040;
}

.graph {
    max-width: 48rem;
    margin-inline: auto;
}

.graph-board {
    /* JSXGraph's labels and buttons have z-indexes of their own; isolate keeps
       them inside the board, so they can't show through the page's top bar */
    isolation: isolate;
    width: 100%;
    height: min(72vw, 26rem);
    border: 1px solid var(--d-line);
    border-radius: 6px;
    background: var(--d-panel);
}

.graph figcaption {
    color: var(--graph-muted);
    font-size: 0.9rem;
}

.graph-readout {
    font-family: var(--d-mono);
    font-variant-numeric: tabular-nums;
    white-space: pre;
    min-height: 1.5em;
    margin-top: 0.25rem;
}

.graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.graph-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.25rem;
    margin-right: 0.4rem;
    vertical-align: middle;
    border-radius: 2px;
}

.graph-sliders {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.graph-slider {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr 4rem;
    align-items: center;
    gap: 0.75rem;
}

.graph-slider output {
    font-family: var(--d-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* JSXGraph's own stylesheet, trimmed to what Delta uses (copied from 1.13.3) */
.jxgbox { position: relative; overflow: hidden; margin: 0; -ms-touch-action: none; }
.jxgbox svg text { cursor: default; user-select: none; -webkit-user-select: none; }
.JXGtext { font-family: var(--d-mono); background-color: transparent; padding: 0; margin: 0; }
.JXGinfobox { border: none; }
.JXG_navigation { position: absolute; right: 5px; bottom: 5px; z-index: 100; padding: 2px; font-size: 16px; cursor: pointer; }
.JXG_navigation_button { color: var(--graph-muted); padding: 0 3px; }
.JXG_navigation_button:hover { border-radius: 2px; background: var(--graph-line); }
.JXG_navigation_button svg { top: 0.2em; position: relative; padding: 0; }

.lede {
    font-size: 1.15rem;
    color: var(--d-muted);
    max-width: 36rem;
}

/* text that may contain $math$ (Components/RichText.razor): spaced like a
   paragraph; a div, since display math inside it is a block */
.text-block {
    margin-bottom: 1rem;
}

/* a revealed solution (Components/SolutionView.razor): a tinted panel with an
   accent edge; calculation lines aligned left, like a worked page */
.solution {
    border-left: 3px solid var(--d-accent);
    padding: 0.25rem 0 0.25rem 1rem;
}

.solution-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.solution-steps {
    margin: 0;
    padding-left: 1.25rem;
}

.solution-steps > li + li {
    margin-top: 0.75rem;
}

.solution-steps .equation {
    margin: 0.25rem 0 !important;
}

/* KaTeX centers the inner .katex too, not only the display box */
.solution-steps .katex-display,
.solution-steps .katex-display > .katex {
    text-align: left;
    margin: 0;
}

/* the walkthrough (Components/Walkthrough.razor): the solution panel, with
   each step's prompt above its work, a hint box, and a short verdict */
.walk-prompt {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.walk-prompt.text-muted-d {
    font-weight: 400;
}

.walk-hint {
    border: 1px dashed var(--d-line);
    border-radius: 6px;
    background: var(--d-bg);
    padding: 0.4rem 0.75rem;
    margin: 0.4rem 0;
}

.walk-verdict {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* the warning before revealing an open question */
.reveal-confirm {
    border: 1px solid var(--d-line);
    border-radius: 6px;
    background: var(--d-bg);
    padding: 0.75rem 1rem;
}

/* a wide equation scrolls sideways in its own box instead of widening the page */
.equation {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

/* on a phone, a slider's label gets its own line above the slider */
@media (max-width: 640.98px) {
    .graph-slider {
        grid-template-columns: 1fr 4rem;
        gap: 0 0.75rem;
    }

    .graph-slider label {
        grid-column: 1 / -1;
    }
}

/* practice modules (Pages/Practice.razor) */
.module-list {
    display: grid;
    gap: 0.75rem;
    max-width: 48rem;
}

/* a practice session (Pages/PracticeSession.razor): the problem list beside
   the problem on a wide screen, a strip above it on a phone */
.session-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    max-width: 56rem;
    margin-bottom: 1rem;
}

/* the problem list on the right (docs/specs/polish.md §5); on a phone, a strip of
   numbers above the problem */
.session-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    grid-template-areas: "main list";
    gap: 1.25rem;
    align-items: start;
}

.session-list {
    grid-area: list;
    position: sticky;
    top: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
}

.session-main {
    grid-area: main;
    min-width: 0;
}

.session-problem {
    scroll-margin-top: 4.5rem;
}

/* one chip per problem; its edge says how it's going */
.session-chip {
    border: 1px solid var(--d-line);
    border-left: 4px solid var(--d-line);
    border-radius: 6px;
    background: var(--d-panel);
    color: var(--d-fg);
    padding: 0.3rem 0.5rem;
    text-align: left;
    font-size: 0.9rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.chip-number {
    flex: none;
    min-width: 1.25rem;
    white-space: nowrap;
    font-weight: 700;
}

.chip-title {
    font-size: 0.85rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.session-chip.here {
    background: color-mix(in srgb, var(--d-accent) 18%, var(--d-panel));
    border-color: var(--d-accent);
    font-weight: 700;
}

/* outcome colors, shared by the chips and the summary's badges */
.outcome-correct { --outcome: var(--d-good); }
.outcome-partial { --outcome: color-mix(in srgb, var(--d-good) 50%, var(--d-bad)); }
.outcome-notCorrect { --outcome: var(--d-bad); }
.outcome-unanswered { --outcome: var(--d-muted); }
/* a test in progress: answered, result hidden; a neutral color that says nothing */
.outcome-answered { --outcome: var(--d-accent); }

.session-chip[class*="outcome-"]:not(.outcome-open) {
    border-left-color: var(--outcome);
}

.outcome-badge {
    display: inline-block;
    min-width: 7.5rem;
    margin-right: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--outcome, var(--d-muted));
}

.session-summary li + li {
    margin-top: 0.35rem;
}

.btn-link.marked {
    font-weight: 600;
}

@media (max-width: 640.98px) {
    .session-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "list" "main";
        gap: 0.75rem;
    }

    .session-list {
        top: 3.25rem;
        z-index: 5;
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
        padding: 0.4rem 0;
        background: var(--d-bg);
    }

    .chip-title {
        display: none;
    }
}

/* flashcards (Components/FlashcardRunner.razor): one large card, the answer
   box framed green or red; the message under it says the same in words */
.flashcard-progress {
    max-width: 36rem;
    margin-bottom: 0.75rem;
}

.flashcard-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--d-line);
    overflow: hidden;
    margin-top: 0.25rem;
}

.flashcard-bar > div {
    height: 100%;
    background: var(--d-accent);
    transition: width 0.3s;
}

.flashcard {
    max-width: 36rem;
}

.flashcard .content-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 14rem;
}

.flashcard-question {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.75rem 0;
}

.flashcard-input.is-right {
    border-color: var(--d-good);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--d-good) 30%, transparent);
}

.flashcard-input.is-wrong {
    border-color: var(--d-bad);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--d-bad) 30%, transparent);
}

.flashcard-message {
    min-height: 1.5rem;
    margin: 0.5rem 0 0;
}

/* choice questions (Components/ProblemView.razor, FlashcardRunner.razor):
   one row per option; once closed, the right one ticked and a wrong choice
   crossed out (mark and words, not color alone) */
.choice-list {
    display: grid;
    gap: 0.4rem;
    max-width: 36rem;
}

.choice-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--d-line);
    border-radius: 6px;
    background: var(--d-panel);
    color: var(--d-fg);
    padding: 0.45rem 0.7rem;
    text-align: left;
    width: 100%;
}

.choice-option .form-check-input {
    margin: 0;
    flex: none;
}

.choice-text {
    flex: 1;
}

.choice-option.is-chosen {
    border-color: var(--d-accent);
    background: color-mix(in srgb, var(--d-accent) 14%, var(--d-panel));
}

.choice-option.is-right {
    border-color: var(--d-good);
    background: color-mix(in srgb, var(--d-good) 14%, var(--d-panel));
}

.choice-option.is-wrong {
    border-color: var(--d-bad);
    background: color-mix(in srgb, var(--d-bad) 12%, var(--d-panel));
}

.choice-mark {
    font-weight: 700;
}

.is-right > .choice-mark { color: var(--d-good); }
.is-wrong > .choice-mark { color: var(--d-bad); }

.choice-key {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--d-line);
    border-radius: 4px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--d-muted);
}

.flashcard-choices:focus {
    outline: 2px solid color-mix(in srgb, var(--d-accent) 50%, transparent);
    outline-offset: 4px;
    border-radius: 6px;
}

/* the sign-in card and the landing page (docs/specs/polish.md §4) */
.signin-wrap {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
}

.signin-card {
    width: 100%;
    max-width: 24rem;
    background: var(--d-panel);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    padding: 2rem 1.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.signin-brand {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: var(--d-accent);
    margin-bottom: 0.5rem;
}

@media (max-width: 640.98px) {
    .signin-wrap {
        padding: 1rem 0;
    }

    .signin-card {
        padding: 1.5rem 1.25rem;
    }
}

.landing {
    padding: 3rem 0;
}

/* Preferences */
.prefs-card {
    max-width: 36rem;
    background: var(--d-panel);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    padding: 1.5rem;
}

.prefs-name {
    flex: 1;
    min-width: 12rem;
}

/* a problem (docs/specs/polish.md §5): the one card on the page, with a
   header bar; inside it everything is flat (questions split by a line), so
   the card alone marks where a problem starts. used by the session pages
   and the single problem page; ProblemView renders the body. */
.problem-card {
    background: var(--d-panel);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.session-problem + .session-problem {
    margin-top: 2.5rem;
}

.problem-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--d-line);
    border-left: 5px solid var(--outcome, var(--d-accent));
    background: color-mix(in srgb, var(--d-accent) 6%, var(--d-panel));
}

.problem-card-position {
    color: var(--d-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

.problem-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    flex: 1 1 12rem;
}

.problem-card-outcome {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--outcome, var(--d-muted));
    white-space: nowrap;
}

.problem-card-body {
    padding: 1.25rem;
}

.problem-content {
    margin-bottom: 0.5rem;
}

.question-block {
    border-top: 1px solid var(--d-line);
    padding: 1.25rem 0 0.25rem;
    margin-top: 1rem;
}

@media (max-width: 640.98px) {
    .problem-card-head {
        padding: 0.65rem 1rem;
    }

    .problem-card-body {
        padding: 1rem;
    }
}

/* a module's start options (Pages/Practice.razor; docs/specs/session-options.md §1) */
.start-options {
    border-top: 1px solid var(--d-line);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.start-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.6rem;
}

.start-label {
    min-width: 5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.start-count {
    width: 5rem;
}