/* Learning extras: theme picker, lesson tools (bookmarks, read aloud, print, offline), glossary, Open Badges, course handout.
   Colours come from the theme tokens in app.css (:root and :root[data-theme="dark"]). */

/* ---------- Dark theme: what tokens alone do not cover ---------- */
:root[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.94); }
:root[data-theme="dark"] .certview img { filter: none; }
:root[data-theme="dark"] ::selection { background: #3b3f8f; color: #fff; }
:root[data-theme="dark"] .btn--solid:disabled { opacity: .55; }
:root[data-theme="dark"] .mathview, :root[data-theme="dark"] .katex { color: var(--ink); }
:root[data-theme="dark"] .cplay__pdf { background: #fff; }

/* ---------- Theme picker (user menu and profile) ---------- */
.r3theme { border: 0; margin: 0; padding: 0; min-width: 0; }
.r3theme__legend { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; float: none; width: auto; padding: 0; }
.r3panel .r3theme__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r3theme__seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.r3theme__opt { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; margin: 0; }
.r3theme__opt:hover { background: var(--surface-3); }
.r3theme__opt--on, .r3theme__opt--on:hover { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 3px rgba(17, 17, 40, .16); }
.r3theme__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.r3theme__opt:has(input:focus-visible), .r3theme__opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.r3theme .fld__hint { margin-top: 8px; }
.r3theme--menu { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.r3theme--menu .r3theme__label { font-size: 12px; font-weight: 700; color: var(--muted); }
.r3theme--menu .r3theme__opt { padding: 5px 8px; font-size: 12.5px; }
.r3panel__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13.5px; }
.favpage__head .r3panel__links { margin-top: 8px; }

/* ---------- Lesson tools above a chapter ---------- */
.r3tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 18px; }
.r3tools__btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.r3tools__btn:hover { border-color: var(--tint-brand-line); background: var(--surface-2); }
.r3tools__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.r3tools__btn--on { background: var(--tint-brand); border-color: var(--tint-brand-line); color: var(--brand-ink); }
.r3tools__speed { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.r3tools__speed select { border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font: inherit; color: var(--ink); background: var(--surface); }
.r3tools__status { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.r3tools__status--ok { color: var(--success-ink); }
.r3tools__note { margin: -8px 0 14px; font-size: 13px; color: var(--muted); }
.r3tools__note--ok { color: var(--success-ink); }
.r3bm-form { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin: -6px 0 18px; max-width: 560px; }
.r3bm-form .fld { margin-bottom: 10px; }
.r3bm-form__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.r3offline-banner { background: var(--tint-warn); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }

/* Read aloud: the paragraph being read */
.r3-reading { background: var(--tint-brand); box-shadow: 0 0 0 4px var(--tint-brand); border-radius: 4px; transition: background .2s; }
@media (prefers-reduced-motion: reduce) { .r3-reading { transition: none; } }

/* Glossary terms in the lesson text and their definition */
.r3-term { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: help; border-bottom: 1.5px dotted var(--brand-ink); line-height: inherit; text-align: inherit; }
.r3-term:hover, .r3-term[aria-expanded="true"] { color: var(--brand-ink); }
.r3-term:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.r3-termpop { position: absolute; z-index: 1200; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }
.r3-termpop strong { display: block; margin-bottom: 4px; }
.r3-termpop p { margin: 0; color: var(--ink-2); }

/* ---------- Player side panel: bookmarks and glossary ---------- */
.r3bm, .r3gl { padding: 4px 18px 18px; overflow-y: auto; min-height: 0; }
.r3bm__empty, .r3gl__empty { color: var(--muted); font-size: 13.5px; line-height: 1.5; padding: 10px 0; }
.r3bm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.r3bm__item { display: flex; align-items: stretch; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.r3bm__open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; border: 0; background: transparent; padding: 9px 11px; font: inherit; color: var(--ink); cursor: pointer; text-decoration: none; border-radius: 10px; }
.r3bm__open:hover { background: var(--surface-2); }
.r3bm__label { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.r3bm__meta { font-size: 12px; color: var(--muted); }
.r3bm__time { margin-left: 6px; font-weight: 700; color: var(--brand-ink); }
.r3bm__x { border: 0; background: transparent; color: var(--muted); padding: 0 12px; cursor: pointer; border-radius: 0 10px 10px 0; font-size: 13px; }
.r3bm__x:hover { color: var(--danger-ink); background: var(--tint-danger); }
.r3gl__search { margin: 4px 0 12px; }
.r3gl__list { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.r3gl__entry { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.r3gl__entry dt { font-weight: 700; font-size: 14px; color: var(--ink); }
.r3gl__entry dd { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- Course manage: glossary editor ---------- */
.r3gled__opt { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 14px; font-size: 13.5px; }
.r3gled__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.r3gled__row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.r3gled__row .fld { margin: 0; }
.r3gled__x { margin-top: 24px; }
.r3gled__actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .r3gled__row { grid-template-columns: 1fr; } .r3gled__x { margin-top: 0; justify-self: end; } }

/* ---------- My bookmarks, downloaded courses ---------- */
.r3bmc { margin-bottom: 14px; }
.r3bmc__title { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.r3bm__date { margin-left: 4px; }
.r3page--bare { max-width: 980px; margin: 0 auto; padding: 24px 20px 40px; min-height: 100vh; }
.r3page__back { display: inline-block; margin-bottom: 14px; font-size: 13.5px; }
.r3dl__actions { white-space: nowrap; text-align: right; }
.r3dl__actions .btn { margin-left: 6px; }
.r3dl__total { margin-top: 10px; }

/* ---------- Open Badges on the achievements page ---------- */
.r3ob { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: center; }
.cert__actions .r3ob { margin-top: 0; }
.r3ob .btn { font-size: 12px; }

/* ---------- Course handout (printable page) ---------- */
.handout { max-width: 820px; margin: 0 auto; padding: 24px 28px 60px; background: var(--surface); color: var(--ink); min-height: 100vh; line-height: 1.6; }
.handout__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.handout__head { margin-bottom: 18px; }
.handout__kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); margin: 0; }
.handout__title { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 4px 0; }
.handout__meta { font-size: 12.5px; color: var(--muted); margin: 0; }
.handout__sec { font-size: 20px; font-weight: 800; margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.handout__chapter { margin: 18px 0 24px; }
.handout__ch { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.handout__text { font-size: 14.5px; }
.handout__fig { margin: 14px 0; text-align: center; break-inside: avoid; }
.handout__fig img { max-width: 100%; height: auto; border-radius: 8px; }
.handout__fig figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.handout__callout { break-inside: avoid; }
.handout__cards { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.handout__card { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; break-inside: avoid; }
.handout__card dt { font-weight: 600; }
.handout__card dd { margin: 4px 0 0; color: var(--ink-2); }
.handout__q { font-weight: 800; color: var(--brand-ink); margin-right: 4px; }
.handout__scenario, .handout__practice { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 12px 0; break-inside: avoid; }
.handout__scenario ol { margin: 6px 0 0; padding-left: 22px; }
.handout__scenario ul { margin: 4px 0 8px; padding-left: 18px; }
.handout__end { font-weight: 700; color: var(--muted); }
.handout__feedback { color: var(--muted); font-style: italic; }
.handout__label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 6px 0 0; }
.handout__answer { min-height: 80px; border-bottom: 1px dashed var(--line-strong); color: var(--muted); font-size: 12.5px; }
.handout__online { font-size: 13.5px; margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--tint-brand-line); background: var(--surface-2); }
.handout__url { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.handout__locked { color: var(--muted); font-style: italic; }
.handout__links ol { padding-left: 22px; font-size: 13px; }

/* ---------- Printing: always on white paper, whatever the screen theme ---------- */
@media print {
    :root, :root[data-theme="dark"] {
        --bg: #fff; --surface: #fff; --surface-2: #fafafc; --surface-3: #f3f3f8; --surface-4: #e5e7eb;
        --ink: #16161f; --ink-2: #374151; --ink-3: #4b5563; --muted: #5b6270; --faint: #9ca3af; --faint-2: #c4c4cf;
        --line: #ececf1; --line-strong: #d4d4de; --brand-ink: #4b4fe0;
        --tint-brand: #eceafe; --tint-brand-2: #e0ddfb; --tint-brand-line: #c9c7f7;
        --tint-success: #e7f7ee; --success-ink: #047857; --success-line: #a7f3d0;
        --tint-danger: #fef2f2; --danger-ink: #b91c1c; --danger-line: #fecaca;
        --tint-warn: #fff7ed; --warn-ink: #92400e; --warn-line: #fde68a;
        --tint-info: #eff6ff; --info-ink: #1e3a8a; --info-line: #bfdbfe;
        --tint-pink: #fdf2f8; --pink-ink: #be185d; --pink-line: #fbcfe8; --purple-ink: #6b21a8;
        color-scheme: light;
    }
    html, body { background: #fff !important; }
    :root[data-theme="dark"] img { filter: none; }
    .no-print, .r3tools, .r3bm-form, .r3tools__note, .r3offline-banner, #blazor-error-ui, .r3-termpop { display: none !important; }
    .handout { max-width: none; padding: 0; min-height: 0; }
    .handout__chapter { break-inside: auto; }
    .handout__ch, .handout__sec { break-after: avoid; }
    .handout a { color: inherit; text-decoration: none; }
    .r3-reading { background: none; box-shadow: none; }
    .r3-term { border-bottom: 0; }

    /* The player printed as it is (Ctrl+P): the lesson only. */
    .cplay { position: static; display: block; }
    .cplay__panel, .cplay__nav, .cplay__maintop, .cplay__gate, .cplay__req { display: none !important; }
    .cplay__main, .cplay__content { overflow: visible !important; height: auto !important; padding: 0 !important; }
    .flipcard__back { position: static !important; transform: none !important; display: block; }
    .flipcard__inner { transform: none !important; }
}

/* Form fields no stylesheet styles (the browser's own) follow the theme too; any styled field keeps its own look (no specificity). */
:where(:root[data-theme="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
    background-color: var(--surface);
    color: var(--ink);
}