/* ============================================================
   ROOT VARIABLES
   Shared site-wide colors, spacing, sizing, and shadows.
   ============================================================ */

:root {
    --bg: #eef4fb;
    --panel: #f7f7f7;
    --border: #bbbbbb;
    --text: #111111;
    --muted: #555555;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --radius: 14px;
    --gap: 14px;
    --max: 1100px;
}


/* ============================================================
   GLOBAL PAGE RESET AND BODY
   Base box sizing, page background, typography, and container.
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    position: relative;
    isolation: isolate;

    min-height: 100vh;
    margin: 0;
    padding-top: 72px;

    color: var(--text);

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height: 1.35;

    background:
        radial-gradient(
            circle at 58% 28%,
            rgba(59, 130, 246, 0.14) 0%,
            rgba(59, 130, 246, 0.05) 30%,
            transparent 58%
        ),
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eef4fb 52%,
            #e7f5f7 100%
        );

    background-attachment: fixed;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(15, 23, 42, 0.32) 1px,
            transparent 1.5px
        );

    background-size: 28px 28px;
    opacity: 0.28;
}

a {
    color: inherit;
}

.container {
    max-width: var(--max);
    margin: 18px auto 40px;
    padding: 0 16px;
}

hr {
    margin: 20px 0;
}

emp {
    color: rgb(200, 0, 0);
    font-size: 1.1em;
    font-weight: 600;
}


/* ============================================================
   MAIN NAVIGATION
   Fixed top navigation, links, active state, and mobile menu.
   ============================================================ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    background:
        linear-gradient(
            to right,
            #2563eb,
            #1e3a8a
        );

    backdrop-filter: blur(8px);

    border-bottom:
        1px solid var(--border);
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: 14px;

    max-width: var(--max);
    margin: 0 auto;
    padding: 12px 16px;
}

.nav .brand {
    color: rgb(255, 225, 0);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-decoration: none;
    white-space: nowrap;
}

.navlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-left: auto;
}

.navlinks a {
    padding: 8px 10px;

    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;

    border:
        1px solid transparent;
    border-radius: 10px;
}

.navlinks a:hover {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.25);
}

.navlinks a.active {
    color: #111111;

    background: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.35);

    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.02);
}

.navlinks a.active:hover {
    color: #111111;

    border-color:
        rgba(0, 0, 0, 0.08);
}

.nav-toggle {
    display: none;

    margin-left: auto;
    padding: 8px 10px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid rgba(255, 255, 255, 0.35);

    border-radius: 10px;

    cursor: pointer;
}

@media (max-width: 800px) {
    .nav-inner {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navlinks {
        display: none;
        flex-direction: column;
        gap: 8px;

        width: 100%;
        margin-left: 0;
        padding: 10px 0 4px;
    }

    .navlinks.open {
        display: flex;
    }

    .navlinks a {
        width: fit-content;
    }
}


/* ============================================================
   SITE BRAND / LOGO
   DMO initials, orbit, and orbiting decorative dot.
   ============================================================ */

.site-brand {
    display: inline-flex;
    align-items: center;

    color: inherit;
    text-decoration: none;
}

.site-brand:hover {
    text-decoration: none;
}

.site-brand-logo {
    position: relative;

    display: grid;
    place-items: center;

    width: 86px;
    height: 48px;
}

.site-brand-initials {
    position: relative;
    z-index: 2;

    color: #ffe05b;

    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.055em;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.14);
}

.site-brand-orbit {
    position: absolute;
    z-index: 1;

    left: 50%;
    top: 50%;

    width: 78px;
    height: 32px;

    transform:
        translate(-50%, -50%)
        rotate(-17deg);

    border:
        1.4px solid rgba(255, 255, 255, 0.48);

    border-radius: 50%;

    pointer-events: none;
}

.site-brand-orbit-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 6px;
    height: 6px;

    margin-left: -3px;
    margin-top: -3px;

    background:
        rgba(255, 255, 255, 0.38);

    border-radius: 50%;

    box-shadow:
        0 0 3px rgba(255, 255, 255, 0.16);

    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .site-brand-orbit-dot {
        animation: none;
        offset-distance: 8%;
    }
}


/* ============================================================
   GENERAL GRID LAYOUTS
   Shared card and widget grid behavior.
   ============================================================ */

.grid {
    display: grid;
    gap: var(--gap);

    margin-top: 14px;
}

.grid.cards {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}

.grid.widgets {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    grid-auto-rows: 1fr;
    align-items: stretch;
}

.grid.widgets > .card {
    height: 100%;
}

@media (max-width: 1000px) {
    .grid.cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .grid.widgets {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   GENERAL CARDS AND BUTTONS
   Shared card appearance and standard button treatment.
   ============================================================ */

.card {
    display: flex;
    flex-direction: column;
    gap: 10px;

    min-height: 120px;
    padding: 14px;

    background: #ffffff;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.card h3 {
    margin: 0;

    font-size: 16px;
}

.card p {
    margin: 0;

    color: #000000;
    font-size: 14px;
}

.card .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: auto;

    color: var(--muted);
}

.btn {
    display: inline-block;

    padding: 9px 12px;

    color: #555555;
    text-decoration: none;

    background: #ffffff;

    border:
        1px solid var(--border);

    border-radius: 12px;

    cursor: pointer;
}

.btn:hover {
    background: #f3f3f3;
}

.pill {
    display: inline-block;

    margin-left: 8px;
    padding: 2px 10px;

    color: #223333;
    font-size: 12px;

    background: #eeeeff;

    border:
        1px solid #ddddee;

    border-radius: 999px;
}


/* ============================================================
   CLASS CARDS
   Course/class card header, body, hover, and focus states.
   ============================================================ */

.class-card {
    display: flex;
    flex-direction: column;

    min-height: 210px;
    padding: 0;

    overflow: hidden;

    cursor: pointer;

    transform-origin: center;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.class-card:hover {
    position: relative;
    z-index: 2;

    transform: scale(1.02);
}

.class-card:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

.class-card-header {
    padding: 14px 16px;

    color: #ffffff;
}

.class-card-title {
    margin: 0;

    font-size: 1.15rem;
    line-height: 1.2;
}

.class-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 14px 16px;
}

.class-card-body p {
    margin-top: 0;
}

.class-card-body .actions {
    margin-top: auto;
    padding-top: 18px;
}

/* ============================================================
   TABLE OF CONTENTS / UNIT LIST
   Course unit/subunit cards and responsive column layout.
   ============================================================ */

.toc {
    margin: 18px 0;
}

.section-title {
    margin: 18px 0 10px;

    font-size: 18px;
}

.toc-list {
    display: grid;
    gap: var(--gap);
}

.toc-list.cols-2 {
    grid-template-columns: 1fr;
}

.toc-item {
    display: block;

    padding: 14px;

    color: inherit;
    text-decoration: none;

    background: #ffffff;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.toc-item:hover {
    transform: scale(1.01);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.12);
}

.toc-item-title {
    margin-bottom: 6px;

    font-weight: 700;
}

.toc-item-desc {
    margin-bottom: 10px;

    color: var(--muted);
    font-size: 14px;
}

.toc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (min-width: 980px) {
    .toc-list.cols-2 {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   BREADCRUMBS
   Breadcrumb navigation and mobile wrapping behavior.
   ============================================================ */

.crumbs {
    margin-top: 14px;
    margin-bottom: 14px;
}

.crumbs-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    min-width: 0;
    max-width: 100%;

    padding: 8px 12px;

    background:
        rgba(255, 255, 255, 0.85);

    border:
        1px solid var(--border);

    border-radius: 999px;
}

.crumbs a {
    color:
        rgba(17, 17, 17, 0.72);

    text-decoration: none;
}

.crumbs a:hover {
    text-decoration: underline;
}

.crumbs .sep {
    opacity: 0.45;
}

.crumbs .current {
    color:
        rgba(17, 17, 17, 0.92);

    font-weight: 700;
}

.crumbs a,
.crumbs .current {
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .crumbs-inner {
        align-items: flex-start;
        gap: 6px 7px;

        padding: 10px 12px;

        border-radius: 12px;
    }
}


/* ============================================================
   TEXT AND INLINE CODE HELPERS
   Plain-text blocks, text grids, and inline monospace content.
   ============================================================ */

.q-textblock {
    display: block;

    width: fit-content;
    max-width: 100%;

    margin: 6px 0;
    padding: 10px 12px;

    overflow-x: auto;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    font-size: 15px;
    line-height: 1.35;

    white-space: pre;

    background: #f8f9fa;

    border:
        1px solid rgba(0, 0, 0, 0.08);

    border-radius: 8px;
}

.q-textgrid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;

    margin-top: 6px;
}

.q-textgrid .q-textblock {
    flex: 0 0 auto;
}

.q-textinline {
    padding: 1px 0;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    white-space: pre;

    border-radius: 6px;
}

code.prism-inline {
    display: inline;

    padding: 0 !important;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 0.95em;

    white-space: pre;

    background:
        transparent !important;

    border:
        none !important;

    border-radius:
        0 !important;
}

code.prism-inline * {
    background:
        transparent !important;
}


/* ============================================================
   QUESTION CODE BLOCKS
   Code blocks appearing inside stems and question content.
   ============================================================ */

pre.q-codeblock {
    padding: 0.6rem 0.8rem;

    background:
        rgb(244, 242, 240);

    border-radius: 12px;
}

pre.q-codeblock > code,
pre.q-codeblock q-codeline > code,
pre.q-codeblock-ln > code,
pre.q-codeblock-ln code {
    background:
        transparent !important;
}

.q-lnum {
    color: #777777;
}

pre.q-codeblock-ln {
    width: fit-content;
    max-width: 100%;

    border:
        1px solid #000000;
}

.q-codeblock {
    font-size:
        0.95em !important;
}

.q-codegrid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;

    margin: 10px 0;
}

.q-codegrid .q-codeblock {
    width: fit-content;
    max-width: 100%;

    margin: 0;
}


/* ============================================================
   GENERAL CODE BLOCKS
   addCode(), standalone code panes, and accent-strip styling.
   ============================================================ */

.code-block {
    position: relative;

    display: inline-block;

    width: auto;
    max-width: 100%;

    margin: 0;
    padding: 12px 14px;

    overflow: auto;

    font-size:
        0.85rem !important;

    line-height: 1.35;

    background:
        #f9f9f9 !important;

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.code-block::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 6px;

    background:
        var(--course-accent);
}

.code-block > code {
    display: block;

    padding-left: 10px;

    line-height: 1.35;
}

pre.code-block {
    position: relative;

    display: inline-block;

    width: auto;
    max-width: 100%;

    margin: 0 !important;
    padding: 12px 14px !important;

    overflow: auto;

    font-size: 0.85rem;
    line-height: 1.35;

    white-space: pre;

    background: #ffffff;

    border:
        1px solid var(--border);

    border-radius: 12px;
}

pre.code-block[class*="language-"] {
    margin: 0 !important;
    padding:
        4px 12px 4px 8px !important;
}

.code-output .code-block,
.code-output pre.code-block {
    display: block;

    width: 100%;
}


/* ============================================================
   CONTENT CARDS
   Main instructional content card, heading, and body.
   ============================================================ */

.content-card {
    position: relative;

    margin-top: 0;
    margin-bottom: 20px;
    padding: 0 0 10px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom right,
            #ffffff 0%,
            var(--course-accent-light) 100%
        );

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.content-card-title {
    margin: 0;
    padding: 10px 18px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;

    background:
        var(--course-accent);

    border-bottom:
        1px solid var(--border);
}

.content-card-body {
    padding: 10px 20px;

    color: #000000;
    font-size: 16px;
}


/* ============================================================
   QUESTION CONTAINER
   Shared shell, spacing, stem block, and actions for all types.
   ============================================================ */

.qbox {
    --q-inset1: 28px;
    --q-inset2: 14px;

    position: relative;

    margin: 14px 0 8px;
    padding: 10px;

    background:
        var(--course-accent-light);

    border:
        2px solid var(--course-accent);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.qbox .q-choices,
.qbox .q-mo-wrap,
.qbox .q-mi-workspace,
.qbox .q-ms-blanks {
    padding-left: var(--q-inset1);
    padding-right: var(--q-inset1);
}

.qbox .q-actions {
    padding-left: var(--q-inset2);
    padding-right: var(--q-inset2);
}

.q-stem-block {
    margin-bottom: 12px;
    padding: 2px 14px;

    background:
        var(--course-accent-medium);

    border-radius: 12px;
}

.q-stem {
    margin: 10px 0;
}

.qbox .q-stem-block pre[class*="language-"] {
    display: block;
    clear: both;

    width: fit-content;
    max-width: 100%;

    margin: 10px 0;
    padding: 5px 10px !important;

    font-size: 1em;

    border:
        1px solid #555555;

    border-radius: 7px;
}

.q-actions {
    display: flex;
    gap: 10px;

    margin-top: 20px;
}

.q-actions .btn {
    padding: 6px 10px;

    color: #555555;
    font-size: 0.85em;

    background: transparent;

    border-radius: 5px;

    transition:
        background-color 200ms ease,
        color 200ms ease,
        border-color 200ms ease,
        opacity 200ms ease;
}

.q-actions .btn:hover {
    color: #ffffff;

    background: #777777;
}

.q-actions .btn:hover:not(:disabled) {
    color: #333333;
    background: #f3f3f3;
    border-color: #999999;
}

.q-actions .btn:disabled {
    color: #555555;

    background: transparent;

    border-color:
        var(--border);

    opacity: 0.45;

    cursor: not-allowed;
}

.q-actions .btn:disabled:hover {
    color: #555555;

    background: transparent;
}


/* ============================================================
   MC / MP QUESTION CHOICES
   Choice grids, radio/checkbox rows, wrapping, and highlighting.
   ============================================================ */

.q-choices {
    display: grid;
    justify-content: start;
    gap: 0;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 10px 0 6px;
}

.q-choices.cols-1 {
    grid-template-columns:
        minmax(0, 1fr);
}

.q-choices.cols-2 {
    grid-template-columns:
        fit-content(calc((100% - 14px) / 2))
        fit-content(calc((100% - 14px) / 2));

    column-gap: 14px;
}

.q-choices.cols-3 {
    grid-template-columns:
        fit-content(calc((100% - 28px) / 3))
        fit-content(calc((100% - 28px) / 3))
        fit-content(calc((100% - 28px) / 3));

    column-gap: 14px;
}

.q-choice-row {
    display: flex;
    align-items: baseline;
    gap: 10px;

    min-width: 0;
    max-width: 100%;

    margin-left: 5px;
}

.q-choice-row input[type="radio"],
.q-choice-row input[type="checkbox"] {
    display: inline-block;
    flex: 0 0 auto;

    margin: 0 8px 0 0;

    transform: scale(1.35);
    transform-origin: left center;
}

.q-choice {
    display: block;
    flex: 1 1 auto;

    min-width: 0;
    max-width: 100%;

    padding: 2px 5px;

    line-height: 1.35;

    white-space: normal;
    overflow-wrap: break-word;

    border-radius: 5px;
}

.qbox:not(.q-locked)
.q-choice-row:hover
.q-choice {
    background-color: #dddddd;
}

.q-choice.correct-highlight {
    margin: 0;
    padding: 1px 5px;

    background:
        rgba(22, 163, 74, 0.10);

    border:
        1px solid #16a34a;

    border-radius: 5px;
}



/* ============================================================
   QUESTION CORRECT / INCORRECT FEEDBACK
   Flash animation applied after checking an answer.
   ============================================================ */

@keyframes q_correct_flash {
    0% {
        background-color:
            rgba(0, 155, 0, 0.35);
    }

    100% {
        background-color:
            var(--course-accent-light);
    }
}

@keyframes q_wrong_flash {
    0% {
        background-color:
            rgba(155, 0, 0, 0.35);
    }

    100% {
        background-color:
            var(--course-accent-light);
    }
}

@keyframes stem_correct_flash {
    0% {
        background-color:
            rgba(0, 155, 0, 0.35);
    }

    100% {
        background-color:
            var(--course-accent-medium);
    }
}

@keyframes stem_wrong_flash {
    0% {
        background-color:
            rgba(155, 0, 0, 0.35);
    }

    100% {
        background-color:
            var(--course-accent-medium);
    }
}

.qbox.q-correct {
    animation:
        q_correct_flash
        5000ms
        ease-out
        both;
}

.qbox.q-wrong {
    animation:
        q_wrong_flash
        5000ms
        ease-out
        both;
}

.qbox.q-correct .q-stem-block {
    animation:
        stem_correct_flash
        5000ms
        ease-out
        both;
}

.qbox.q-wrong .q-stem-block {
    animation:
        stem_wrong_flash
        5000ms
        ease-out
        both;
}


/* ============================================================
   QUESTION CORRECT / INCORRECT FEEDBACK
   Strong flash for the question, softer flash for the stem.
   ============================================================ 

@keyframes q_correct_flash {
    0% {
        background-color:
            rgba(0, 170, 0, 0.38);
    }

    100% {
        background-color:
            rgba(0, 170, 0, 0);
    }
}

@keyframes q_wrong_flash {
    0% {
        background-color:
            rgba(190, 0, 0, 0.38);
    }

    100% {
        background-color:
            rgba(190, 0, 0, 0);
    }
}

@keyframes stem_correct_flash {
    0% {
        background-color:
            rgba(0, 170, 0, 0.14);
    }

    100% {
        background-color:
            rgba(0, 170, 0, 0);
    }
}

@keyframes stem_wrong_flash {
    0% {
        background-color:
            rgba(190, 0, 0, 0.14);
    }

    100% {
        background-color:
            rgba(190, 0, 0, 0);
    }
}


/*
 * Strong flash across the entire question.
 

.qbox.q-correct::after,
.qbox.q-wrong::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 20;

    border-radius:
        calc(var(--radius) - 2px);

    pointer-events: none;
}

.qbox.q-correct::after {
    animation:
        q_correct_flash
        5000ms
        ease-out
        both;
}

.qbox.q-wrong::after {
    animation:
        q_wrong_flash
        5000ms
        ease-out
        both;
}


/*
 * Keep the stem above the strong flash.
 

.q-stem-block {
    position: relative;
    z-index: 21;
}


/*
 * Then give the stem its own softer flash.
 

.qbox.q-correct .q-stem-block::after,
.qbox.q-wrong .q-stem-block::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    border-radius: inherit;

    pointer-events: none;
}

.qbox.q-correct .q-stem-block::after {
    animation:
        stem_correct_flash
        5000ms
        ease-out
        both;
}

.qbox.q-wrong .q-stem-block::after {
    animation:
        stem_wrong_flash
        5000ms
        ease-out
        both;
}

*/


/* ============================================================
   MS QUESTIONS
   Dropdown blanks and answer feedback.
   ============================================================ */

.q-blank-select {
    padding: 2px 6px;

    font-size: 0.95em;

    background:
        rgba(255, 255, 255, 0.65);

    border:
        1px solid rgba(0, 0, 0, 0.25);

    border-radius: 6px;
}

.q-blank-result {
    display: inline-block;

    padding: 1px 6px;

    line-height: 1.25;
    vertical-align: baseline;

    border:
        1px solid transparent;

    border-radius: 6px;
}

.q-blank-result.ok {
    background:
        rgba(22, 163, 74, 0.10);

    border-color: #16a34a;
}

.q-blank-result.bad {
    background:
        rgba(220, 38, 38, 0.10);

    border-color: #dc2626;
}

.q-blank-wrongtext {
    margin-right: 6px;

    text-decoration: line-through;

    opacity: 0.8;
}

.q-blank-correcttext {
    font-weight: 700;
}

.q-ms-code {
    margin: 10px 0 0;
    padding: 10px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    font-size: 1em;
    line-height: 1.35;

    white-space: pre-wrap;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 10px;
}


/* ============================================================
   MO QUESTIONS
   Draggable ordering rows and shared reorder line appearance.
   ============================================================ */

.q-reorder {
    display: grid;
    gap: 0;

    margin: 0;
}

.qbox .q-reorder {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
}

.q-mo-list {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.q-reorder > .q-mo-program-zone {
    padding-left: var(--q-inset1);
    padding-right: var(--q-inset1);
}

.q-mo-workspace .q-mi-not-needed-zone {
    margin-top: 18px;
}

.q-line {
    display: inline-flex;
    align-items: center;

    padding: 0 2px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.75);

    border:
        1px solid rgba(0, 0, 0, 0.20);

    border-radius: 8px;

    cursor: grab;
}

.qbox .q-reorder .q-line {
    width: 100%;
}

.q-line-code {
    display: inline-block;

    width: auto;

    margin: 0 !important;
    padding: 2px 6px !important;

    overflow: auto;

    line-height: 1.2;

    white-space: pre;

    background:
        transparent !important;

    border: 0;
}

.qbox .q-reorder .q-line-code {
    width: 100%;

    margin: 0;
}

.q-line-code[class*="language-"] {
    margin: 0 !important;
    padding: 2px 6px !important;
}

.q-line-placeholder {
    min-height: 2.1em;
    margin: 0;

    background:
        rgba(0, 0, 0, 0.03);

    border:
        2px dashed rgba(0, 0, 0, 0.35);

    border-radius: 8px;
}

.q-line.drag-hidden {
    display: none;
}

.q-line.dragging {
    opacity: 0.55;

    cursor: grabbing;
}

.q-line.drag-over {
    outline:
        2px dashed rgba(0, 0, 0, 0.35);

    outline-offset: 2px;
}

.q-reorder.locked .q-line {
    cursor: default;
}

.q-hint {
    margin-right: 6px;

    font-weight: 700;

    white-space: nowrap;
}

.q-hint-ok {
    color: #16a34a;
}

.q-hint-bad {
    color: #dc2626;
}


/* ============================================================
   MI QUESTIONS
   Reorder + indentation + Not Needed zones.
   ============================================================ */

.q-mi-workspace {
    margin: 0;
}

.q-mi-zone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.q-mi-zone + .q-mi-zone {
    margin-top: 18px;
}

.q-mi-heading {
    margin-bottom: 5px;

    font-weight: 700;
}

.q-mi-list {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;

    min-width: 240px;
    min-height: 2.1em;
}

.q-mi-program-list {
    max-width: 100%;

    margin-left: var(--q-inset1);

    overflow-x: auto;
}

.q-mi-line {
    --mi-indent: 0;

    width:
        calc(
            100% -
            var(--mi-indent) * 32px
        );

    margin-left:
        calc(
            var(--mi-indent) * 32px
        );

    transition:
        margin-left 90ms ease,
        width 90ms ease,
        opacity 120ms ease;
}

.q-mi-list .q-line {
    box-sizing: border-box;
}

.q-mi-list .q-line-code {
    width: 100%;

    margin: 0;
}

.q-mi-placeholder {
    --mi-indent: 0;

    width:
        calc(
            100% -
            var(--mi-indent) * 32px
        );

    margin-left:
        calc(
            var(--mi-indent) * 32px
        );
}

.q-mi-not-needed-list {
    min-width: 240px;
    min-height: 3.2em;

    padding: 5px;

    background:
        rgba(255, 255, 255, 0.20);

    border:
        1px dashed rgba(0, 0, 0, 0.30);

    border-radius: 8px;
}

.q-mi-not-needed-list:empty::before {
    content:
        attr(data-empty-text);

    display: block;

    padding: 7px 10px;

    color: var(--muted);
    font-size: 0.85em;

    opacity: 0.7;
}

.q-mi-list.q-mi-drop-active {
    background:
        rgba(255, 255, 255, 0.35);
}

.q-mi-not-needed-list .q-mi-line,
.q-mi-not-needed-list .q-mi-placeholder {
    width: 100%;

    margin-left: 0;
}

.q-mi-line-correct {
    border-color: #16a34a;
}

.q-mi-line-incorrect {
    border-color: #dc2626;
}

.q-mi-workspace.locked .q-line {
    cursor: default;
}


/* ============================================================
   QUESTION METADATA
   Description and difficulty/rating pills.
   ============================================================ */

.q-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-bottom: 8px;
}

.q-description-pill,
.q-rating-pill {
    display: inline-flex;
    align-items: center;

    min-height: 24px;
    padding: 3px 10px;

    font-size: 0.82rem;
    line-height: 1;

    border-radius: 999px;

    transition:
        background-color 0.18s ease-out;
}

.q-description-pill {
    color: #334155;

    background:
        rgba(80, 110, 150, 0.12);
}

.q-rating-pill {
    justify-content: center;
    gap: 4px;

    min-width: 42px;

    color: #6b4e16;

    background:
        rgba(180, 130, 40, 0.14);
}

.q-rating-pill.copied {
    background:
        rgba(180, 130, 40, 0.22);
}

.q-rating-dot {
    width: 6px;
    height: 6px;

    background: currentColor;

    border-radius: 50%;

    opacity: 0.75;
}


/* ============================================================
   QUESTION STUDENT PICKER
   Random student picker shown above questions on desktop.
   Hidden completely on mobile.
   ============================================================ */

.q-student-picker {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-left: auto;
}

.q-student-window {
    width: 252px;
    height: 26px;

    overflow: hidden;

    background:
        rgba(15, 23, 42, 0.06);

    border-radius: 999px;

    box-shadow:
        inset 0 0 0 1px
        rgba(15, 23, 42, 0.08);
}

.q-student-track {
    display: flex;
    align-items: center;

    height: 26px;

    transform:
        translateX(0);
}

.q-student-name {
    display: inline-flex;
    flex: 0 0 84px;
    align-items: center;
    justify-content: center;

    height: 22px;
    margin: 2px 0;

    color:
        rgba(51, 65, 85, 0.65);

    font-size: 0.78rem;
    font-weight: 600;

    white-space: nowrap;

    background: transparent;

    border-radius: 999px;
}

.q-student-name.active {
    color: #3730a3;
    font-weight: 800;

    background:
        rgba(99, 102, 241, 0.18);
}

.q-student-name.final {
    animation:
        student-final-pop
        0.35s
        ease-out;
}

.q-period-pill {
    min-height: 24px;
    padding: 3px 9px;

    color: #334155;
    font-size: 0.78rem;
    line-height: 1;

    background:
        rgba(100, 116, 139, 0.13);

    border: none;
    border-radius: 999px;

    cursor: pointer;
}

.q-period-pill:hover {
    background:
        rgba(100, 116, 139, 0.24);
}

@keyframes student-final-pop {
    0% {
        transform: scale(0.95);
    }

    60% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}


/* ============================================================
   MOBILE QUESTION LAYOUT
   Question-specific phone behavior:
   - reduced insets
   - student picker hidden
   - MC/MP forced to one column
   - long choices scroll horizontally
   - MO/MI rows remain inside question
   - long MO/MI code scrolls inside its draggable row
   ============================================================ */

@media (max-width: 700px) {

    .qbox {
        --q-inset1: 10px;
        --q-inset2: 8px;
    }

    .q-student-picker {
        display: none;
    }

    /* MC / MP always become one column. */

    .q-choices.cols-2,
    .q-choices.cols-3 {
        grid-template-columns:
            minmax(0, 1fr);

        column-gap: 0;
    }

    /*
     * Keep radio / checkbox visible while the choice label
     * becomes the horizontal scrolling viewport.
     */

    .q-choice-row {
        min-width: 0;
        max-width: 100%;
    }

    .q-choice {
        flex: 1 1 0;

        width: 0;
        min-width: 0;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;

        -webkit-overflow-scrolling: touch;
    }

    /*
     * ci() / inline code keeps its natural width so the
     * label scrolls rather than wrapping the code.
     */

    .q-choice code.prism-inline,
    .q-choice code.inline-code {
        display: inline-block;

        width: max-content;
        max-width: none;

        white-space: pre;
        overflow-wrap: normal;
        word-break: normal;
    }

    /*
     * MO / MI outer containers are constrained to the
     * available question width.
     */

    .qbox .q-reorder,
    .qbox .q-mo-wrap,
    .qbox .q-mo-list,
    .qbox .q-mi-workspace,
    .qbox .q-mi-zone,
    .qbox .q-mi-list,
    .qbox .q-mi-program-list {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /*
     * helpersQRuntime.js gives MI's program list an inline
     * width:max-content value. Override that only on mobile.
     */

    .qbox .q-mi-program-list {
        width: 100% !important;

        margin-left: 0;
    }

    /*
     * Draggable row itself never becomes wider than the
     * question container.
     */

    .qbox .q-line {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /*
     * Long code scrolls INSIDE the white draggable row.
     */

    .qbox .q-line-code {
        display: block;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        white-space: pre;

        -webkit-overflow-scrolling: touch;
    }

    .qbox .q-line-code > code {
        display: inline-block;

        min-width: max-content;

        white-space: pre;
    }

    /*
     * MI indentation remains usable on mobile but uses
     * a smaller horizontal step.
     */

    .q-mi-line {
        width:
            calc(
                100% -
                var(--mi-indent) * 22px
            );

        margin-left:
            calc(
                var(--mi-indent) * 22px
            );
    }

    .q-mi-placeholder {
        width:
            calc(
                100% -
                var(--mi-indent) * 22px
            );

        margin-left:
            calc(
                var(--mi-indent) * 22px
            );
    }

    /*
     * The Not Needed list should still occupy the full
     * available width rather than its desktop minimum.
     */

    .q-mi-not-needed-list {
        width: 100%;
        min-width: 0;
    }
}


/* ============================================================
   FIREWORKS / CONFETTI OVERLAY
   Full-screen non-interactive p5 effects canvas.
   ============================================================ */

.fx-canvas {
    position: fixed;

    left: 0;
    top: 0;
    z-index: 9999;

    width: 100vw;
    height: 100vh;

    pointer-events: none;
}


/* ============================================================
   TABLES
   Shared responsive tables, headers, hover effects, and groups.
   ============================================================ */

.ui-table-wrap {
    display: flex;
    justify-content: center;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

.ui-table {
    display: inline-table;

    width: auto;

    table-layout: auto;
    border-collapse: collapse;
}

.ui-table th,
.ui-table td {
    padding: 6px 10px;

    vertical-align: top;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;

    background-color: #ffffff;

    border:
        1px solid var(--border);
}

.ui-table thead th {
    background:
        var(--course-accent-medium);
}

.ui-table td code.prism-inline,
.ui-table td code.inline-code,
.ui-table thead th > code.inline-code,
.ui-table thead th code {
    display: inline-block;
}

.ui-table thead th > code.inline-code {
    width: auto;

    text-align: inherit;
}

.ui-table tbody tr td {
    transition:
        background-color 0.12s ease;
}

.ui-table tbody tr:hover > td,
.ui-table tbody tr:hover > th {
    background-color:
        rgba(240, 240, 240, 1)
        !important;
}

.ui-table-plain thead th {
    color: #000000;
    font-weight: 600;

    background: #f2f3f5;

    border-bottom:
        2px solid #d0d3d8;
}

.ui-table-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;

    width: 100%;
    margin: 0.6em 0;
}

.ui-table-group-item {
    flex: 0 1 auto;

    min-width: 0;
    max-width: 100%;
}

.ui-table-group-item .ui-table-wrap {
    width: fit-content;
    max-width: 100%;

    margin: 0;
}


/* ============================================================
   PSEUDOCODE ALERT
   Expandable informational alert for AP CSP pseudocode.
   ============================================================ */

.ui-pseudocodealert {
    margin: 10px 0;
    padding: 10px 12px;

    background:
        rgb(248, 249, 230);

    border-left:
        5px solid #6b63c7;

    border-radius: 10px;
}

.ui-pseudocodealert-head {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 6px;

    font-weight: 700;
}

.ui-pseudocodealert-icon {
    width: auto;
    height: 18px;
}

.ui-pseudocodealert-label {
    color: #403a8f;
}

.ui-pseudocodealert-summary {
    margin: 2px 0;

    font-weight: 700;

    cursor: pointer;
}

.ui-pseudocodealert-summary:hover {
    text-decoration: underline;
}

.ui-pseudocodealert-content {
    margin-top: 6px;
}

.ui-pseudocodealert-text {
    margin: 8px 0;
}

.ui-pseudocodealert-hr {
    margin: 8px 0;

    border: 0;
    border-top:
        1px solid rgba(64, 58, 143, 0.28);
}

.ui-pseudocodealert-pre {
    display: inline-block;

    width: fit-content;
    max-width: 100%;

    margin: 8px 0 0;
    padding: 10px 14px !important;

    overflow-x: auto;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    font-size: 0.9rem;
    line-height: 1.4;

    white-space: pre;

    background:
        #ffffff !important;

    border:
        1px solid rgba(64, 58, 143, 0.28);

    border-radius: 8px;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.08);
}

.ui-pseudocodealert-pre > code {
    display: block;
}

.ui-pseudocodealert
.ui-pseudocodealert-pre,
.ui-pseudocodealert
.ui-pseudocodealert-pre[class*="language-"] {
    background:
        #ffffff !important;
}

.ui-pseudocodealert
.ui-pseudocodealert-pre code,
.ui-pseudocodealert
.ui-pseudocodealert-pre code[class*="language-"] {
    background:
        transparent !important;
}

@media (max-width: 700px) {
    .ui-pseudocodealert {
        padding: 9px 10px;
    }

    .ui-pseudocodealert-pre {
        width: 100%;
    }
}


/* ============================================================
   ALGORITHM ALERT
   Expandable algorithm/code informational alert.
   ============================================================ */

.ui-algoalert {
    margin: 10px 0;
    padding: 10px 12px;

    background:
        rgb(248, 249, 230);

    border-left:
        5px solid rgb(247, 208, 70);

    border-radius: 10px;
}

.ui-algoalert-head {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 6px;

    font-weight: 700;
}

.ui-algoalert-icon {
    width: auto;
    height: 18px;
}

.ui-algoalert-summary {
    margin: 2px 0;

    font-weight: 700;

    cursor: pointer;
}

.ui-algoalert-content {
    margin-top: 6px;
}

.ui-algoalert-text {
    margin: 8px 0;
}

.ui-algoalert-pre {
    display: inline-block;

    width: fit-content;
    max-width: 100%;

    margin: 8px 0 0;
    padding:
        0 0 0 15px !important;

    overflow-x: auto;

    white-space: pre;
}

.ui-algoalert-pre > code {
    display: block;
}

.ui-algoalert .ui-algoalert-pre,
.ui-algoalert
.ui-algoalert-pre[class*="language-"],
.ui-algoalert
.ui-algoalert-pre code,
.ui-algoalert
.ui-algoalert-pre code[class*="language-"] {
    background:
        transparent !important;
}


/* ============================================================
   ONE-COLUMN / TWO-COLUMN CONTENT LAYOUTS
   add1Col() and add2Col() helper layouts.
   ============================================================ */

.onecol {
    margin: 12px 0;
}

.onecol
.panel-code
pre.code-block {
    align-self: flex-start;

    display: inline-block;

    width: auto;
    max-width: 100%;
    height: auto;
}

.twocol {
    display: grid;
    gap: 14px;

    margin: 12px 0;
}

.twocol.cols-2 {
    grid-template-columns: 1fr;
}

.twocol-left,
.twocol-right {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.twocol-panel {
    min-width: 0;
}

.twocol-panel > .panel {
    height: 100%;
}

.twocol
.panel-code
pre.code-block {
    display: block;

    width: 100%;
}

@media (min-width: 900px) {
    .twocol.cols-2 {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}


/* ============================================================
   PANELS
   Shared code, console, and p5 panel sizing behavior.
   ============================================================ */

.panel {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.panel-code pre.code-block {
    width: 100%;
    height: 100%;

    margin: 0;
}

.panel-console pre.terminal-block {
    width: 100%;
    height: 100%;

    margin: 0;
}

.panel-p5 .p5-stage {
    position: relative;

    display: block;
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.panel-p5 canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;
}


/* ============================================================
   TERMINAL / CONSOLE OUTPUT
   Dark monospace terminal appearance.
   ============================================================ */

.terminal-block {
    margin: 0;
    padding: 12px 14px;

    overflow: auto;

    color: #f5f5f5;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 0.85rem;
    line-height: 1.35;

    white-space: pre;

    background: #0b0b0b;

    border:
        1px solid rgba(0, 0, 0, 0.25);

    border-radius: 12px;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.06);
}


/* ============================================================
   MATRIX DISPLAY
   Centered numeric/text matrices and optional captions.
   ============================================================ */

.matrix-wrap {
    display: table;

    margin:
        1.1rem auto 1.3rem;

    padding: 0;
}

.matrix-caption {
    margin-bottom: 0.45rem;

    color: #334155;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

.matrix-table {
    overflow: hidden;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 0.95rem;

    background: #ffffff;

    border:
        1px solid #cbd5e1;

    border-collapse: separate;
    border-spacing: 0;

    border-radius: 10px;

    box-shadow:
        0 2px 7px rgba(15, 23, 42, 0.08);
}

.matrix-table td {
    min-width: 2.6em;
    padding: 0.45em 0.7em;

    text-align: center;

    background: #ffffff;

    border-right:
        1px solid #e2e8f0;

    border-bottom:
        1px solid #e2e8f0;
}

.matrix-table
tr:nth-child(even)
td {
    background: #f8fafc;
}

.matrix-table td:last-child {
    border-right: none;
}

.matrix-table
tr:last-child
td {
    border-bottom: none;
}


/* ============================================================
   MONOSPACE DISPLAY PANEL
   Plain preformatted text windows used by helper functions.
   ============================================================ */

.panel-mono {
    margin: 0;
}

.mono-block {
    margin: 0;
    padding: 14px 16px;

    overflow-x: auto;

    color: var(--text);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    font-size: 0.95rem;
    line-height: 1.45;

    white-space: pre-wrap;

    background: #f8fafc;

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.onecol-mono,
.onecol-mono .panel-mono,
.onecol-mono .mono-block {
    width: fit-content;
    max-width: 100%;
}


/* ============================================================
   VIDEO EMBEDS
   Responsive 16:9 embedded video container.
   ============================================================ */

.video-wrap {
    position: relative;

    width: 100%;
    max-width: 760px;

    margin: 18px auto;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000000;

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.video-frame {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* ============================================================
   FUNCTION DIAGRAMS
   Visual input → function → output diagrams.
   ============================================================ */

.function-diagram {
    display: grid;
    grid-template-rows:
        auto auto auto;

    justify-content: center;

    margin: 1.5rem 0;

    font-family: monospace;
}

.function-diagram-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 0;
}

.function-diagram-middle {
    display: grid;

    grid-template-columns:
        minmax(5rem, 1fr)
        2rem
        auto
        2rem
        minmax(5rem, 1fr);

    align-items: center;
}

.function-diagram-top {
    justify-content: flex-end;
}

.function-diagram-bottom {
    justify-content: flex-start;
}

.function-diagram-label {
    font-size: 0.95rem;
}

.function-diagram-left-label {
    text-align: right;
}

.function-diagram-right-label {
    text-align: left;
}

.function-diagram-arrow {
    font-family: sans-serif;
    font-size: 1.35rem;
    line-height: 1;
    text-align: center;
}

.function-diagram-horizontal-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.function-diagram-box {
    padding: 0.6rem 1rem;

    color: #ffffff;
    font-weight: 600;
    text-align: center;

    white-space: nowrap;

    border-radius: 0.4rem;

    box-shadow:
        0 0.15rem 0.35rem
        rgba(0, 0, 0, 0.18);
}

.function-diagram-primary {
    background: #0d6efd;
}

.function-diagram-secondary {
    background: #198754;
}


/* ============================================================
   SHARED INTERACTIVE FORMS
   Text areas, buttons, status messages, and generated output.
   ============================================================ */

.ui-form {
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: min(720px, 100%);

    margin: 16px auto;
    padding: 16px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--course-accent-medium) 100%
        );

    border:
        1px solid var(--course-accent);

    border-radius: 12px;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.07);
}

.ui-form-label,
.ui-form-output-label {
    color:
        var(--course-accent-dark);

    font-size: 0.9rem;
    font-weight: 700;
}

.ui-form-input {
    width: 100%;
    min-height: 90px;

    padding: 10px 12px;

    color: var(--text);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    font-size: 0.9rem;
    line-height: 1.4;

    resize: vertical;

    background: #ffffff;

    border:
        1px solid var(--course-accent);

    border-radius: 8px;
}

.ui-form-input:focus {
    outline:
        2px solid var(--course-accent);

    outline-offset: 2px;

    border-color:
        var(--course-accent-dark);
}

.ui-form-button {
    align-self: flex-start;

    margin-top: 4px;
    padding: 7px 14px;

    color: #ffffff;

    font-size: 0.9rem;
    font-weight: 700;

    background:
        var(--course-accent);

    border:
        1px solid var(--course-accent-dark);

    border-radius: 7px;

    box-shadow:
        0 2px 5px
        rgba(0, 0, 0, 0.12);

    cursor: pointer;

    transition:
        filter 150ms ease,
        transform 100ms ease,
        opacity 150ms ease;
}

.ui-form-button:hover:not(:disabled) {
    filter: brightness(0.92);
}

.ui-form-button:active:not(:disabled) {
    transform: translateY(1px);
}

.ui-form-button:disabled {
    opacity: 0.55;

    cursor: wait;
}

.ui-form-message {
    margin-top: 2px;

    color: #b42318;

    font-size: 0.85rem;
    font-weight: 600;
}

.ui-form-output-label {
    margin-top: 8px;
}

.ui-form-output {
    padding: 10px 12px;

    color: var(--text);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    font-size: 0.9rem;
    line-height: 1.45;

    overflow-wrap: anywhere;
    word-break: break-word;

    background:
        var(--course-accent-light);

    border:
        1px solid var(--course-accent);

    border-radius: 8px;
}

@media (max-width: 700px) {
    .ui-form {
        width: 100%;

        padding: 12px;
    }
}