html, body {
    height: 100%;
}

h1:focus {
    outline: none;
}

/* Introductions and running text keep a readable measure (docs/lab-design-standards.md, section 3). */
.intro {
    max-width: 760px;
}

/* Theory pages and lessons: the standard theory pattern, with callouts for the one thing to remember. */
.lesson {
    max-width: 860px;
}

.lesson p, .lesson li {
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

.lesson ul {
    padding-left: 1.25rem;
}

.lesson .callout {
    border-left: 4px solid var(--mud-palette-primary);
    background: var(--mud-palette-background);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

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

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

/* Reconnect overlay. Blazor toggles the components-reconnect-* classes on #components-reconnect-modal. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    font-family: Roboto, "Segoe UI", sans-serif;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.reconnect-card {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 12px;
    padding: 2rem 2.25rem;
    max-width: 26rem;
    margin: 1rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.reconnect-title {
    font-size: 1.35rem;
    font-weight: 500;
    margin: 0.75rem 0 0.5rem;
}

.reconnect-text, .reconnect-failed-text {
    line-height: 1.55;
    margin: 0 0 1rem;
    color: var(--mud-palette-text-secondary);
}

.reconnect-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 4px solid var(--mud-palette-lines-default);
    border-top-color: var(--mud-palette-primary);
    border-radius: 50%;
    animation: reconnect-spin 0.9s linear infinite;
}

@keyframes reconnect-spin {
    to { transform: rotate(360deg); }
}

.reconnect-button {
    display: none;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border: 0;
    border-radius: 6px;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
}

.reconnect-failed-text { display: none; }

#components-reconnect-modal.components-reconnect-failed .reconnect-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-text,
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-failed-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed-text,
#components-reconnect-modal.components-reconnect-failed .reconnect-button,
#components-reconnect-modal.components-reconnect-rejected .reconnect-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Accessibility helpers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 3000;
    padding: 8px 14px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: top 0.15s;
}

.skip-link:focus {
    top: 8px;
}

:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

#main-content:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print: drop the chrome, widen the content, open collapsed panels. */
@media print {
    .mud-appbar, .mud-drawer, .mud-overlay, .no-print, #components-reconnect-modal,
    .mud-snackbar, .mud-popover, .skip-link, #blazor-error-ui {
        display: none !important;
    }

    .mud-main-content {
        padding-left: 0 !important;
        padding-top: 0 !important;
        margin-left: 0 !important;
    }

    .mud-container {
        max-width: none !important;
        padding: 0 !important;
    }

    .mud-paper {
        box-shadow: none !important;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .mud-expand-panel .mud-collapse-container {
        height: auto !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    html, body {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Small screens: keep everything reachable on a phone without horizontal scrolling. */
.mud-table-container, .mud-simple-table {
    overflow-x: auto;
}

@media (max-width: 600px) {
    .appbar-github, .appbar-icon {
        display: none;
    }

    .appbar-title {
        font-size: 1rem;
    }

    #main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .reconnect-card {
        padding: 1.25rem 1rem;
    }
}

/* Radio options stacked one per line, for answers that are full sentences. */
/* MudBlazor lays the group out as a row with a more specific rule, hence !important. */
.radio-stack .mud-radio-group, .mud-radio-group.radio-stack {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* The footer that ties the lab to the CloudWorrior blog. */
.lab-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 1.25rem 1rem 1.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.lab-footer a {
    color: var(--mud-palette-text-primary);
    text-decoration: underline;
}

/* Language menu: a flag beside each language's name. */
.language-option {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.language-option .flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* The language button: the current language's flag before its code. */
.language-menu .mud-button-label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 14px;
    margin-right: 8px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.language-menu.flag-en .mud-button-label::before { background-image: url("images/flags/en.svg"); }
.language-menu.flag-nl .mud-button-label::before { background-image: url("images/flags/nl.svg"); }
.language-menu.flag-pl .mud-button-label::before { background-image: url("images/flags/pl.svg"); }
.language-menu.flag-de .mud-button-label::before { background-image: url("images/flags/de.svg"); }

/* Explorers: the live chart, its readout and the code that gives the same number. */
.live-chart {
    min-height: 340px;
}

.readout {
    margin-top: 0.5rem;
}

.readout-main {
    font-variant-numeric: tabular-nums;
}

.code-equivalents {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.9rem;
}

.code-equivalents dt {
    color: var(--mud-palette-text-secondary);
}

.code-equivalents dd {
    margin: 0;
    min-width: 0;
}

/* Long calls wrap rather than scroll, so there is no scrolling box a keyboard could not reach. */
.code-equivalents code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .code-equivalents {
        grid-template-columns: 1fr;
    }
}

/* The explorers' controls, readout, summary and formulas. */
.explorer-controls .mud-slider {
    margin-top: 0.25rem;
}

.question-kinds {
    display: flex;
    flex-direction: column;
}

.question-kinds .mud-radio {
    margin: 0;
}

.expression {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.compare-answer {
    overflow-wrap: anywhere;
}

.compare-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--mud-palette-warning);
}

.table-scroll {
    overflow-x: auto;
    /* Visually hidden text in a wide table (.sr-only is absolutely positioned) stays inside the scroller rather than
       widening the page on a phone. */
    position: relative;
}

.stats {
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.stats th, .stats td {
    padding: 0.25rem 0.75rem 0.25rem 0;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.stats thead th {
    font-weight: 500;
}

.stats tbody th {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.preset {
    display: flex;
    flex-direction: column;
    max-width: 22rem;
    white-space: normal;
}

.preset-name {
    font-weight: 500;
}

.preset-text {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.formula {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0;
}

.try-this {
    margin: 0;
    padding-left: 1.25rem;
}

.try-this li {
    margin-bottom: 1rem;
}

.try-this li:last-child {
    margin-bottom: 0;
}

/* ---- Animations (the shared player in js/animation-player.js, copied from the Probability Lab; renderers join from M3) ---- */

.anim-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.anim-speed {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.anim-speed > span {
    margin-right: 4px;
    color: var(--mud-palette-text-secondary);
}

.anim-speed-button {
    min-width: 44px !important;
}

.anim-speed-button[aria-pressed="true"] {
    background: var(--mud-palette-primary-hover);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.anim-chart {
    width: 100%;
    overflow: hidden;
}

.anim svg {
    display: block;
    max-width: 100%;
    font-family: inherit;
}

.anim-readout {
    margin: 0.5rem 0 0;
    font-variant-numeric: tabular-nums;
    min-height: 1.5em;
}

.anim .anim-tick, .anim .anim-label {
    font-size: 11px;
    fill: var(--mud-palette-text-secondary);
}

.anim .anim-label {
    fill: var(--mud-palette-text-primary);
    paint-order: stroke;
    stroke: var(--mud-palette-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.anim .anim-title {
    font-size: 12px;
    fill: var(--mud-palette-text-primary);
}

.anim .anim-grid line {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

.anim .anim-axis {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1;
}

.anim .anim-line {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
    stroke-linejoin: round;
}

.anim .anim-target {
    stroke: var(--mud-palette-warning);
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

.anim .anim-dot {
    fill: var(--mud-palette-primary);
}

/* ---- Explorer embeds (/embed/explore/{slug}) and "Embed this" ----
   The embed sits in another site's iframe: no app bar or drawer, 12 px of padding, the parameters and question beside
   the chart from 600 px, stacked below that, down to 320 px without sideways scrolling. */
.embed-main {
    padding: 12px;
    min-height: 100vh;
    background: var(--mud-palette-background);
    overflow-x: hidden;
}

.embed-main:focus {
    outline: none;
}

.embed-explorer {
    background: var(--mud-palette-surface);
}

.embed-title {
    margin-bottom: 4px;
    line-height: 1.3;
}

/* The embed's chart is 250 px high (OneSampleTExplorer's ChartHeight), not the full page's 340. */
.embed-explorer .live-chart {
    min-height: 250px;
}

.embed-explorer .readout-main {
    font-size: 1.25rem;
}

.embed-attribution {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    text-align: right;
}

.embed-attribution a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.embed-dialog a {
    text-decoration: underline;
}

.embed-label {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 4px;
    color: var(--mud-palette-text-secondary);
}

.embed-snippet {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    word-break: break-all;
}

.embed-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.embed-options .embed-lang {
    min-width: 180px;
    max-width: 240px;
}

.embed-preview {
    display: block;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 4px;
    background: var(--mud-palette-background);
}

.embed-steps {
    padding-left: 1.5rem;
}

.embed-steps li {
    margin-bottom: 6px;
}

/* ---- The one-sample t explorer ---- */
.hypotheses {
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.25rem;
}

.verdict {
    margin-top: 0.25rem;
    max-width: 760px;
}

.reading-guide, .worked-steps {
    margin: 0;
    padding-left: 1.25rem;
}

.reading-guide li {
    margin-bottom: 0.35rem;
}

.worked-steps li {
    margin-bottom: 0.6rem;
}

.worked-working {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Several lines of code, wrapped rather than scrolled so there is no scrolling box a keyboard could not reach. */
.code-block {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Several lines of code need the width: each label above its block. */
.code-equivalents.code-stacked {
    grid-template-columns: 1fr;
}

.code-equivalents.code-stacked dd {
    margin-bottom: 0.5rem;
}

.code-equivalents .code-block code {
    font-size: 0.8125rem;
}

/* ---- The home page's picture: an SVG on the dark diagram card (docs/lab-design-standards.md, section 6). ---- */
.home-visual {
    margin: 0 0 1.25rem;
    max-width: 860px;
}

.home-visual svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.home-visual figcaption {
    margin-top: 0.5rem;
}

/* Not upper case, as the standard's titles are: here the title holds a symbol, and T is not t. */
.diagram .diagram-title {
    font-size: 13px;
    letter-spacing: 0.04em;
}

.diagram .diagram-tick, .diagram .diagram-note {
    font-size: 11px;
}

.diagram .diagram-label {
    font-size: 13px;
    font-weight: 600;
}

.diagram .diagram-legend text {
    font-size: 12px;
}

/* ---- Chapters, quizzes, exercises and the glossary (copied from the Probability Lab, M3 of this lab) ---- */
.code-equivalents {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.9rem;
}
.code-equivalents dt {
    color: var(--mud-palette-text-secondary);
}
.code-equivalents dd {
    margin: 0;
    min-width: 0;
}
/* Long calls wrap rather than scroll, so there is no scrolling box a keyboard could not reach. */
.code-equivalents code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.lesson-paper {
    max-width: 920px;
}
.lesson .lesson-heading {
    margin: 1.75rem 0 0.5rem;
}
.lesson .lesson-heading:first-child {
    margin-top: 0;
}
.lesson a, .exercise a, .quiz a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}
.lesson code, .exercise code, .quiz code, .expression code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 4px;
    overflow-wrap: anywhere;
}
.callout-label {
    margin-right: 0.25rem;
}
.code-table td code {
    white-space: pre-wrap;
    word-break: break-word;
}
.code-table th[scope="row"] {
    font-weight: 400;
    min-width: 10rem;
}
.lesson-table caption {
    caption-side: bottom;
    text-align: left;
    padding-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}
.code-note {
    margin-top: -0.25rem;
}
.try-it {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border-left: 4px solid var(--mud-palette-secondary);
    background: var(--mud-palette-background);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}
.try-it-label {
    display: block;
}
.chapter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.quiz-question, .drill-group {
    border: none;
    margin: 0 0 1rem;
    padding: 0;
    min-width: 0;
}
.quiz-question legend {
    margin-bottom: 0.25rem;
}
.exercise-list {
    display: grid;
    gap: 1rem;
    max-width: 920px;
}
.exercise-input {
    max-width: 240px;
}
.exercise-hints li, .exercise-solution li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}
.exercise-solution {
    border-left: 4px solid var(--mud-palette-success);
    padding-left: 1rem;
}
.radio-row .mud-radio-group, .mud-radio-group.radio-row {
    flex-wrap: wrap;
}
.anim .ci-mu {
    stroke: var(--mud-palette-text-primary);
    stroke-width: 1.5;
}
.anim .ci-line {
    stroke: var(--mud-palette-primary);
    stroke-width: 1.6;
}
.anim .ci-centre {
    fill: var(--mud-palette-primary);
}
.anim .ci-row.is-miss .ci-line {
    stroke: var(--mud-palette-error);
    stroke-width: 2.2;
    stroke-dasharray: 3 2;
}
.anim .ci-row.is-miss .ci-centre {
    fill: var(--mud-palette-error);
}
.anim .ci-cross {
    font-size: 10px;
    font-weight: 700;
    fill: var(--mud-palette-error);
}
.lesson-check {
    margin: 1rem 0 1.5rem;
}
.glossary-filter {
    max-width: 420px;
}
.glossary-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.glossary-letters a {
    color: var(--mud-palette-primary);
    font-weight: 500;
    text-decoration: underline;
    padding: 2px;
}
.glossary {
    max-width: 860px;
    margin: 0;
}
.glossary-entry {
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    scroll-margin-top: 80px;
}
.glossary-entry[hidden] {
    display: none;
}
.glossary-entry dt {
    font-weight: 500;
    font-size: 1.05rem;
}
.glossary-english {
    font-weight: 400;
    font-size: 0.85rem;
    margin-left: 8px;
}
.glossary-entry dd {
    margin: 4px 0 0 0;
}
.glossary-where {
    display: block;
    margin-top: 2px;
}

@media (max-width: 600px) {
    .code-equivalents {
        grid-template-columns: 1fr;
    }
}

/* The tutorial's own callouts: a titled box, quieter than the one "Remember" callout. */
.lesson .note-box {
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-secondary);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.note-title {
    display: block;
    margin-bottom: 0.25rem;
}

/* "Why this is true": collapsed on screen, printed open (app.js opens it before printing). */
.lesson .why-true {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
}

.why-true summary {
    cursor: pointer;
    font-weight: 500;
    padding: 0.25rem 0;
}

.why-true-label {
    color: var(--mud-palette-text-secondary);
}

/* ---- A chapter's visuals: the first block of every chapter (the first rule) ---- */
.chapter-visual {
    margin: 0 0 1.5rem;
    max-width: 900px;
    scroll-margin-top: 80px;
}

.lesson .chapter-visual:not(:first-child) {
    margin-top: 1.5rem;
}

.visual-title {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.lesson .visual-description {
    margin: 0.5rem 0 0;
    line-height: 1.55;
}

.lesson h2[id] {
    scroll-margin-top: 80px;
}

.figure-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin: 0 0 0.5rem;
    border: none;
    padding: 0;
    min-width: 0;
}

.figure-controls legend {
    padding: 0;
    color: var(--mud-palette-text-secondary);
}

.figure-sliders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.figure-slider {
    flex: 1 1 260px;
    min-width: 200px;
}

.figure-svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.lesson .figure-readout {
    margin: 0.5rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* Chapter 3's four misreadings: cards that turn over; both sides print. */
.flip-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.flip-card {
    all: unset;
    box-sizing: border-box;
    display: block;
    cursor: pointer;
    min-height: 150px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--mud-palette-warning);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
}

.flip-card.is-turned {
    border-top-color: var(--mud-palette-success);
    background: var(--mud-palette-background);
}

.flip-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.flip-card-side {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.flip-card-side[hidden] {
    display: none;
}

.flip-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.flip-card-hint {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: underline;
}

/* The null world (chapter 1). */
.anim .nw-bar, .nw-bar {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.55;
}

.anim .nw-bar.is-extreme, .nw-bar.is-extreme {
    fill: url(#null-world-hatch);
    fill-opacity: 1;
    stroke: var(--mud-palette-warning);
    stroke-width: 1;
}

.anim .nw-extreme-fill {
    fill: var(--mud-palette-warning);
    fill-opacity: 0.35;
}

.anim .nw-extreme-stripe {
    stroke: var(--mud-palette-warning);
    stroke-width: 3;
}

.anim .nw-latest {
    fill: var(--mud-palette-secondary);
}

.anim .nw-real {
    stroke: var(--mud-palette-warning);
    stroke-width: 3;
}

.anim .nw-real-swatch {
    fill: var(--mud-palette-warning);
}

/* Switching tails (chapter 2): dots differ by fill and outline, not colour alone. */
.anim .st-dot {
    fill: var(--mud-palette-text-secondary);
    fill-opacity: 0.35;
}

.anim .st-dot.is-peek {
    fill: none;
    stroke: var(--mud-palette-warning);
    stroke-width: 1.4;
}

.anim .st-dot.is-both {
    fill: var(--mud-palette-error);
    fill-opacity: 1;
}

.anim .st-cut {
    stroke: var(--mud-palette-error);
    stroke-width: 1.5;
}

.anim .st-cut.is-peek {
    stroke: var(--mud-palette-warning);
    stroke-dasharray: 5 3;
}

.anim .st-track {
    fill: var(--mud-palette-background);
    stroke: var(--mud-palette-lines-default);
}

.anim .st-bar {
    fill: var(--mud-palette-error);
}

.anim .st-bar.is-peek {
    fill: var(--mud-palette-warning);
}

@media print {
    .lesson-paper, .lesson-paper.mud-paper {
        break-inside: auto !important;
    }

    .chapter-visual, .note-box, .callout, .try-it, .flip-card {
        break-inside: avoid;
    }

    .flip-card-side[hidden] {
        display: flex !important;
    }

    .flip-card-hint, .anim-controls, .figure-controls {
        display: none !important;
    }

    .lesson a {
        color: #000 !important;
    }
}

/* Figure switches hold symbols (σ, α): MudBlazor's upper case would turn them into Σ and A. */
.figure-toggle {
    text-transform: none !important;
}

/* ---- Parts D and E (chapters 13-18) and their tools: the renderers' marks, told apart by shape and outline as well as
   colour (docs/lab-design-standards.md, section 7). ---- */

/* Between against within (chapter 13). */
.anim .an-dot { fill: var(--mud-palette-primary); fill-opacity: 0.75; }
.anim .an-within line { stroke: var(--mud-palette-info); stroke-width: 1; stroke-opacity: 0.7; }
.anim .an-between line { stroke: var(--mud-palette-warning); stroke-width: 5; }
.anim .an-mean { stroke: var(--mud-palette-text-primary); stroke-width: 3; }
.anim .an-grand { stroke: var(--mud-palette-warning); stroke-width: 2; stroke-dasharray: 8 4; }
.anim .an-track, .anim .st-track { fill: var(--mud-palette-background); stroke: var(--mud-palette-lines-default); }
.anim .an-bar-between { fill: var(--mud-palette-warning); }
.anim .an-bar-within { fill: var(--mud-palette-info); }
.anim .an-tail { fill: var(--mud-palette-warning); fill-opacity: 0.45; }
.anim .an-f { stroke: var(--mud-palette-error); stroke-width: 3; }

/* Shuffle the labels and values to ranks (chapter 14): office A filled, office B a ring. */
.anim .pm-dot.is-a { fill: var(--mud-palette-primary); }
.anim .pm-dot.is-b { fill: var(--mud-palette-surface); stroke: var(--mud-palette-warning); stroke-width: 2; }
.anim .pm-bar { fill: var(--mud-palette-primary); fill-opacity: 0.55; }
.anim .pm-bar.is-extreme { fill: var(--mud-palette-warning); fill-opacity: 0.9; stroke: var(--mud-palette-text-primary); stroke-width: 1; }
.anim .pm-real { stroke: var(--mud-palette-error); stroke-width: 3; }
.anim .rk-rank { font-size: 10px; fill: var(--mud-palette-text-secondary); }
.anim .rk-rank.is-a { fill: var(--mud-palette-text-primary); font-weight: 700; }

/* The chooser's path (chapter 15 and the test chooser). */
.tc-node rect { fill: var(--mud-palette-surface); stroke: var(--mud-palette-lines-default); stroke-width: 1.5; }
.tc-node.is-leaf rect { fill: var(--mud-palette-background); }
.tc-node.is-lit rect { stroke: var(--mud-palette-primary); stroke-width: 3; }
.tc-node.is-current rect { fill: var(--mud-palette-primary-hover); stroke-width: 4; }
.tc-node-label { font-size: 13px; fill: var(--mud-palette-text-primary); }
.tc-node.is-lit .tc-node-label { font-weight: 700; }
.tc-edge path { stroke: var(--mud-palette-lines-default); stroke-width: 1.5; }
.tc-edge.is-lit path { stroke: var(--mud-palette-primary); stroke-width: 4; }
.tc-edge-label { font-size: 11px; fill: var(--mud-palette-text-secondary); }
.tc-edge.is-lit .tc-edge-label { fill: var(--mud-palette-text-primary); font-weight: 700; }

/* The underpowered study (chapter 16): found filled, missed a ring. */
.anim .up-dot { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1.2; }
.anim .up-dot.is-found { fill: var(--mud-palette-success); stroke: none; }
.anim .up-bar { fill: var(--mud-palette-success); }

/* Forking paths and peeking (chapter 18 and the multiple-testing tool). */
.anim .fp-branch { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.anim .fp-leaf { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1; }
.anim .fp-leaf.is-win { fill: var(--mud-palette-warning); stroke: var(--mud-palette-text-primary); stroke-width: 2; }
.anim .fp-leaf.is-struck { fill-opacity: 0.55; stroke-dasharray: 3 2; }
.anim .pk-dot { fill: var(--mud-palette-primary); }
.anim .pk-dot.is-cross { fill: var(--mud-palette-error); }
.anim .pk-stop { fill: none; stroke: var(--mud-palette-error); stroke-width: 2.5; }
.anim .pk-bar { fill: var(--mud-palette-primary); }
.anim .pk-bar.is-peek { fill: var(--mud-palette-error); }

/* The test chooser's tree scrolls in its own box on a phone rather than shrinking out of reach. */
.chooser-tree {
    width: 100%;
    overflow-x: auto;
}

.chooser-tree svg {
    display: block;
    min-width: 900px;
    width: 100%;
    height: auto;
}

/* Assumptions at a glance (chapter 15): one card per test. */
.assumption-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.assumption-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--mud-palette-surface);
}

.assumption-card h3 {
    font-size: 1rem;
    margin: 0 0 6px;
}

.assumption-card dl {
    margin: 0;
}

.assumption-card dt {
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 6px;
}

.assumption-card dd {
    margin: 0;
    font-size: 0.9rem;
}

/* Tool pages: controls beside the picture on wide screens, stacked on phones. */
.tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 960px) {
    .tool-layout {
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    }
}

.tool-answer {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chooser-question legend {
    font-weight: 600;
    margin-bottom: 6px;
}

.chooser-leaf code, .tool-code code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- The capstones (chapters 19 and 20) ---- */

/* Where the source said otherwise: what it said beside what is right (docs/build-plan.md, section 2.1). */
.lesson .correction-box {
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-warning);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    break-inside: avoid;
}

.correction-label {
    display: block;
    margin-bottom: 0.4rem;
}

.correction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.25rem;
}

.correction-heading {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.correction-said > span:last-child {
    text-decoration: line-through;
    text-decoration-color: var(--mud-palette-warning);
    text-decoration-thickness: 1px;
}

@media (max-width: 600px) {
    .correction-grid {
        grid-template-columns: 1fr;
    }
}

/* A code listing: shown as written, scrolling in its own box on a phone. */
.lesson .listing {
    margin: 1rem 0;
}

.listing-scroll pre {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.listing figcaption {
    margin-top: 0.3rem;
}

/* The datasets and their downloads. */
.lesson .datasets {
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-secondary);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.datasets-title {
    font-weight: 500;
    margin: 0 0 0.25rem;
}

.datasets-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.datasets-list li {
    margin: 0.4rem 0;
}

.dataset-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.dataset-grain {
    display: block;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
}

/* The decision memo: a document inside the page, and alone on paper when "Print the memo" is used. */
.lesson .memo {
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--mud-palette-primary);
    border-radius: 6px;
    padding: 1rem 1.25rem 1.25rem;
    margin: 1.25rem 0;
    background: var(--mud-palette-surface);
}

.memo-toolbar {
    display: flex;
    justify-content: flex-end;
}

.memo-kind {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

.memo-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0.15rem 0 0.1rem;
}

.memo-subtitle {
    margin: 0 0 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.memo-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin: 1rem 0 0.35rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.memo-lines {
    margin: 0;
}

.memo-line {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 0.25rem 1rem;
    margin: 0.35rem 0;
}

.memo-line.memo-numbered {
    grid-template-columns: 2rem 1fr;
}

.memo-line dt {
    font-weight: 500;
}

.memo-line dd {
    margin: 0;
}

.memo-line dd.memo-full {
    grid-column: 1 / -1;
}

.memo-work-with-me {
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .memo-line {
        grid-template-columns: 1fr;
    }

    .memo-line.memo-numbered {
        grid-template-columns: 2rem 1fr;
    }
}

@media print {
    .lesson .memo {
        border: 1px solid #999;
        border-top: 3px solid #000;
        background: #fff !important;
        color: #000 !important;
        break-inside: auto;
    }

    .memo-section {
        break-inside: avoid;
    }

    .memo-subtitle, .memo-kind, .correction-heading {
        color: #333 !important;
    }

    /* "Print the memo": only the memo goes to paper. */
    html.print-memo-only #main-content > :not(.lesson-paper),
    html.print-memo-only .lesson-paper:not(:has(.memo.is-printing)),
    html.print-memo-only .lesson > :not(.memo.is-printing),
    html.print-memo-only .lab-footer {
        display: none !important;
    }

    html.print-memo-only .lesson-paper:has(.memo.is-printing) {
        border: none !important;
        padding: 0 !important;
    }
}

/* The pipeline: its stepper, and the steps as links. */
.pipeline-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pipeline-steps ol {
    columns: 2 16rem;
    margin: 0.5rem 0 0;
    padding-left: 1.5rem;
}

/* The A/B simulator's controls. */
.ab-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 1.5rem;
}

.ab-presets .mud-radio {
    margin: 0;
}

.ab-seed {
    max-width: 9rem;
}

.lesson .ab-description {
    margin: 0 0 0.5rem;
}

.ab-family {
    margin-top: 0.75rem;
}

.anim .ab-arm-a {
    fill: var(--mud-palette-secondary);
}

.anim .ab-arm-b {
    fill: var(--mud-palette-primary);
}

.anim .ab-zero {
    stroke: var(--mud-palette-text-primary);
    stroke-width: 1.5;
}

.anim .ab-threshold {
    stroke: var(--mud-palette-warning);
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

.anim .ab-band {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.25;
    stroke: var(--mud-palette-primary);
    stroke-opacity: 0.5;
}

.anim .ab-line {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2.5;
}

.anim .ab-dot {
    fill: var(--mud-palette-primary);
}

.anim .ab-halted {
    fill: var(--mud-palette-background);
    fill-opacity: 0.85;
}

.anim .ab-halted-label {
    fill: var(--mud-palette-error);
    font-size: 22px;
    font-weight: 700;
}

.anim .rr-standard {
    fill: none;
    stroke: var(--mud-palette-secondary);
    stroke-width: 2.5;
    stroke-dasharray: 7 4;
}

.anim .rr-telematics {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2.5;
}

.anim .mc-cell {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1.5;
}

.anim .mc-cell.is-discordant {
    stroke: var(--mud-palette-warning);
    stroke-width: 2.5;
}

.anim .mc-dot {
    fill: var(--mud-palette-text-secondary);
}

.anim .mc-dot.is-discordant {
    fill: var(--mud-palette-warning);
}

.anim .is-faded .mc-dot, .anim .is-faded .mc-cell {
    opacity: 0.3;
}

.anim .mc-hatch {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1.5;
}

.anim .mc-bar {
    fill: var(--mud-palette-primary);
    fill-opacity: 0.45;
}

.anim .mc-bar.is-extreme {
    fill: var(--mud-palette-warning);
    fill-opacity: 1;
}

.anim .mc-marker {
    stroke: var(--mud-palette-error);
    stroke-width: 2;
}

.anim .tost-band {
    fill: var(--mud-palette-success);
    fill-opacity: 0.15;
    stroke: var(--mud-palette-success);
    stroke-dasharray: 4 3;
}

.anim .tost-interval {
    stroke: var(--mud-palette-primary);
    stroke-width: 4;
    stroke-linecap: round;
}

.anim .tost-interval.is-equivalent {
    stroke: var(--mud-palette-success);
}

.anim .tost-interval.is-outside {
    stroke: var(--mud-palette-error);
    stroke-dasharray: 8 4;
}

.anim .tost-cap {
    stroke: var(--mud-palette-text-primary);
    stroke-width: 2;
}

.anim .tost-dot {
    fill: var(--mud-palette-background);
    stroke: var(--mud-palette-primary);
    stroke-width: 3;
}

/* A contingency table's residuals: tints by size and sign, with the number, a sign and a dot, never colour alone. */
.residual-grid td {
    text-align: center;
    min-width: 7rem;
}

.residual-grid td strong {
    font-size: 1.05rem;
}

.residual-counts {
    display: block;
    white-space: nowrap;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
}

.residual-pos-1 { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.residual-pos-2 { background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent); }
.residual-pos-3 { background: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
.residual-neg-1 { background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }
.residual-neg-2 { background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent); }
.residual-neg-3 { background: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent); }

.residual-material {
    outline: 2px solid var(--mud-palette-text-secondary);
    outline-offset: -3px;
}

@media print {
    .residual-counts {
        color: #333 !important;
    }
}

/* ---- M6: the lecture bar and the cheat sheet (copied from the Probability Lab) ---- */
/* The lecture bar sits at the bottom of the screen above everything but dialogs; the spacer keeps the page's end
   reachable above it. Long notes scroll inside the bar. */
.lecture-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.lecture-spacer {
    height: 110px;
}

.lecture-spacer.with-notes {
    height: 240px;
}

.lecture-text {
    flex: 1 1 320px;
    min-width: 0;
}

.lecture-notes {
    max-height: 22vh;
    overflow-y: auto;
    max-width: 860px;
}

.lecture-steps {
    padding-left: 1.4rem;
    margin: 0;
}

.lecture-steps li {
    margin-bottom: 4px;
}

.lecture-minutes {
    margin-left: 6px;
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .lecture-bar .mud-button {
        min-width: 0;
        padding: 4px 8px;
    }

    .lecture-controls {
        width: 100%;
    }

    .lecture-icon {
        display: none;
    }

    .lecture-notes {
        max-height: 18vh;
    }
}

.cheat-contents ul {
    padding-left: 1.2rem;
    margin: 4px 0 0 0;
}

.cheat-contents a, .cheat-where {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.cheat-entry {
    scroll-margin-top: 80px;
}

.cheat-formulas {
    margin: 8px 0;
}

.cheat-code {
    overflow-x: auto;
    max-width: 100%;
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    padding: 8px 12px;
}

.cheat-code pre {
    margin: 0;
    font-size: 0.85rem;
}

.cheat-table td code {
    white-space: nowrap;
}

.cheat-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 500;
}

@media print {
    .cheat-entry {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #999;
    }

    .cheat-table td code {
        white-space: normal;
        word-break: break-all;
    }
}

.cheat-excel-note {
    display: block;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    max-width: 280px;
}

/* Legal and Privacy: the provider's details and each processing item as label and value pairs; stacked on phones. */
.legal-provider,
.privacy-item {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1rem;
    margin: 0 0 1rem;
}
.legal-provider dt,
.privacy-item dt { font-weight: 500; }
.legal-provider dd,
.privacy-item dd { margin: 0; overflow-wrap: anywhere; }
.privacy h3 { font-size: 1.1rem; font-weight: 500; margin: 1.25rem 0 0.5rem; }
@media (max-width: 600px) {
    .legal-provider,
    .privacy-item { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .legal-provider dd,
    .privacy-item dd { margin-bottom: 0.5rem; }
}