/* ==========================================================================
   SE311 — standalone-page design system  ("Blueprint Spec")

   Shared by every hand-written page under
   /academics/software-engineering/se311/ — the ten chapter breakdowns, the
   eight quiz banks, the two cheat sheets, the mind map and the UML guide.

   Theme is a single source of truth: html[data-theme="light|dark"], which the
   site toggle sets. Every colour resolves from a token so both directions
   work, with no !important anywhere and no @media (prefers-color-scheme)
   fighting the toggle.

   The visual language borrows from requirements documentation itself:
   a faint blueprint grid, monospaced clause numbering, thin rules,
   spec-teal as the primary and signature amber for anything examinable.
   ========================================================================== */

:root {
    color-scheme: light;

    --bg: #f3f6f6;
    --bg-grid: rgba(15, 68, 66, 0.045);
    --bg-tint-a: rgba(13, 125, 120, 0.10);
    --bg-tint-b: rgba(191, 126, 26, 0.07);

    --surface: #ffffff;
    --surface2: #eef3f2;
    --surface3: #e2ebe9;
    --inset: #f7faf9;

    --text: #0f1a1c;
    --text2: #435457;
    --text3: #64797c;
    --muted: #7d9092;
    --text-muted: #7d9092;

    --border: #e0e8e7;
    --border2: #c9d8d6;

    --accent: #0d7d78;
    --accent-ink: #0a625e;
    --accent-soft: rgba(13, 125, 120, 0.09);
    --accent-line: rgba(13, 125, 120, 0.28);
    --on-accent: #ffffff;

    --accent2: #bf7e1a;
    --accent2-ink: #96620f;
    --accent2-soft: rgba(191, 126, 26, 0.12);
    --accent2-line: rgba(191, 126, 26, 0.32);

    --accent3: #2f6fd0;
    --accent4: #7a4fd4;
    --accent5: #c0395a;

    --green: #12855a;
    --green-ink: #0c6845;
    --green-soft: rgba(18, 133, 90, 0.10);
    --green-line: rgba(18, 133, 90, 0.30);

    --red: #cc3a4c;
    --red-ink: #a92a3a;
    --red-soft: rgba(204, 58, 76, 0.09);
    --red-line: rgba(204, 58, 76, 0.28);

    --gold: #bf7e1a;
    --amber: #bf7e1a;
    --gold-ink: #96620f;
    --gold-soft: rgba(191, 126, 26, 0.12);
    --gold-line: rgba(191, 126, 26, 0.32);

    --blue: #2f6fd0;
    --blue-ink: #2557a8;
    --blue-soft: rgba(47, 111, 208, 0.09);
    --blue-line: rgba(47, 111, 208, 0.28);

    --violet: #7a4fd4;
    --violet-ink: #6039b8;
    --violet-soft: rgba(122, 79, 212, 0.10);
    --violet-line: rgba(122, 79, 212, 0.28);

    --teal: #0d7d78;
    --teal-ink: #0a625e;
    --teal-soft: rgba(13, 125, 120, 0.09);
    --teal-line: rgba(13, 125, 120, 0.28);

    --pink: #c0395a;
    --pink-ink: #a12a48;
    --pink-soft: rgba(192, 57, 90, 0.09);
    --pink-line: rgba(192, 57, 90, 0.28);

    --yellow: #a8710a;
    --purple: #7a4fd4;

    --correct: #12855a;
    --wrong: #cc3a4c;
    --partial: #bf7e1a;

    --code-bg: #f4f8f7;
    --code-color: #24373a;
    --code-keyword: #7a4fd4;
    --code-string: #0c6845;
    --code-comment: #7d9092;
    --code-type: #96620f;
    --code-function: #2557a8;

    --shadow-sm: 0 1px 2px rgba(10, 30, 30, 0.05);
    --shadow: 0 6px 20px -8px rgba(10, 30, 30, 0.16), 0 2px 6px -2px rgba(10, 30, 30, 0.06);
    --shadow-lg: 0 24px 60px -24px rgba(10, 30, 30, 0.26), 0 6px 18px -10px rgba(10, 30, 30, 0.10);
    --shadow-accent: 0 12px 28px -14px rgba(13, 125, 120, 0.45);

    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 13px;
    --r-lg: 18px;
    --r-xl: 26px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 220ms;

    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --font-mono: var(--mono);

    --page-w: 1000px;
    --topbar-h: 52px;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #060f0f;
    --bg-grid: rgba(120, 220, 210, 0.045);
    --bg-tint-a: rgba(46, 190, 178, 0.13);
    --bg-tint-b: rgba(226, 168, 82, 0.08);

    --surface: #0e1a1a;
    --surface2: #142323;
    --surface3: #1c2f2e;
    --inset: #101d1d;

    --text: #e6f1ef;
    --text2: #a4b8b6;
    --text3: #8ba09e;
    --muted: #7c918f;
    --text-muted: #7c918f;

    --border: #1e3231;
    --border2: #2b4443;

    --accent: #4fd1c5;
    --accent-ink: #7fe3d8;
    --accent-soft: rgba(79, 209, 197, 0.13);
    --accent-line: rgba(79, 209, 197, 0.32);
    --on-accent: #04201e;

    --accent2: #e8b165;
    --accent2-ink: #f3c98f;
    --accent2-soft: rgba(232, 177, 101, 0.14);
    --accent2-line: rgba(232, 177, 101, 0.34);

    --accent3: #79aaf5;
    --accent4: #b79bfa;
    --accent5: #f4788f;

    --green: #3fcf8e;
    --green-ink: #74e6b3;
    --green-soft: rgba(63, 207, 142, 0.13);
    --green-line: rgba(63, 207, 142, 0.32);

    --red: #ff6f83;
    --red-ink: #ff9aa8;
    --red-soft: rgba(255, 111, 131, 0.13);
    --red-line: rgba(255, 111, 131, 0.30);

    --gold: #e8b165;
    --amber: #e8b165;
    --gold-ink: #f3c98f;
    --gold-soft: rgba(232, 177, 101, 0.14);
    --gold-line: rgba(232, 177, 101, 0.34);

    --blue: #79aaf5;
    --blue-ink: #a2c5fb;
    --blue-soft: rgba(121, 170, 245, 0.13);
    --blue-line: rgba(121, 170, 245, 0.30);

    --violet: #b79bfa;
    --violet-ink: #cdbaff;
    --violet-soft: rgba(183, 155, 250, 0.13);
    --violet-line: rgba(183, 155, 250, 0.30);

    --teal: #4fd1c5;
    --teal-ink: #7fe3d8;
    --teal-soft: rgba(79, 209, 197, 0.13);
    --teal-line: rgba(79, 209, 197, 0.32);

    --pink: #f4788f;
    --pink-ink: #ffa0b0;
    --pink-soft: rgba(244, 120, 143, 0.13);
    --pink-line: rgba(244, 120, 143, 0.30);

    --yellow: #e8b165;
    --purple: #b79bfa;

    --correct: #3fcf8e;
    --wrong: #ff6f83;
    --partial: #e8b165;

    --code-bg: #0a1616;
    --code-color: #cfe0dd;
    --code-keyword: #c9b0ff;
    --code-string: #7fe3b4;
    --code-comment: #6f8583;
    --code-type: #f0c682;
    --code-function: #92bcfa;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.72), 0 2px 6px -2px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.88), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
    --shadow-accent: 0 12px 30px -14px rgba(79, 209, 197, 0.5);
}

/* ---------------------------------------------------------------- base -- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + 18px);
}

body {
    margin: 0;
    padding: 0 0 clamp(52px, 8vw, 104px);
    min-height: 100vh;
    background-color: var(--bg);
    /* Blueprint grid + two soft washes. The grid is the whole identity of the
       course — a spec sheet — and it is the only decorative layer. */
    background-image:
        linear-gradient(var(--bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
        radial-gradient(60rem 40rem at 8% -12%, var(--bg-tint-a), transparent 62%),
        radial-gradient(48rem 34rem at 96% 0%, var(--bg-tint-b), transparent 60%);
    background-size: 34px 34px, 34px 34px, auto, auto;
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 650;
    color: var(--text);
}

h1 {
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    font-weight: 700;
}

h2 {
    font-size: 1.35rem;
}

h3 {
    font-size: 1.08rem;
}

h4 {
    font-size: 0.96rem;
}

h5,
h6 {
    font-size: 0.88rem;
}

p {
    margin: 0 0 0.85em;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0 0 0.85em;
    padding-left: 1.35em;
}

ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

li {
    margin: 0.3em 0;
}

li::marker {
    color: var(--accent);
}

/* A list item that carries its own numbered chip does not also need the
   list's marker. */
li:has(> .step-number)::marker,
li:has(> .step-num)::marker,
li:has(> .num)::marker {
    content: "";
}

strong,
b {
    font-weight: 660;
    color: var(--text);
}

em {
    color: var(--text2);
}

a {
    color: var(--accent-ink);
    text-decoration: none;
    transition: color 160ms var(--ease);
}

a:hover {
    color: var(--accent);
}

hr {
    height: 1px;
    margin: 26px 0;
    border: 0;
    background: var(--border);
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

::selection {
    background: var(--accent-soft);
    color: var(--text);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.shoug-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    border-radius: 0 0 var(--r-sm) 0;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 650;
}

.shoug-skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------- shell -- */

.container,
.main-wrap,
main,
.content,
.quiz-content,
.quiz-wrap,
.tree-container {
    width: 100%;
    max-width: var(--page-w);
    margin-inline: auto;
    padding-inline: clamp(14px, 3.4vw, 26px);
}

/* Nested wrappers must not stack their padding. */
.container .content,
.container .quiz-content,
main .content,
.main-wrap main {
    padding-inline: 0;
    max-width: none;
}

.container {
    padding-top: clamp(18px, 3vw, 30px);
}

/* Full-bleed bars (topbar, sticky progress) keep their background edge to
   edge while their contents stay on the same rail as the page body. */
.topbar,
body>header:not(.topbar):not(:has(h1)):not(:has(h2)),
body>.progress-wrap,
body>.progress-bar-wrap {
    padding-inline: max(clamp(14px, 3.4vw, 26px), calc((100% - var(--page-w)) / 2));
}

/* Page header — every family gets the same masthead treatment. */
body>header,
.container>header,
.main-wrap>header,
.hero,
.header,
.header-inner,
.header-content {
    position: relative;
}

.container>header,
body>header:not(.topbar):is(:has(h1), :has(h2)),
body>.hero,
.header {
    margin-bottom: clamp(20px, 3vw, 32px);
    padding: clamp(26px, 4.4vw, 44px) clamp(20px, 3.4vw, 34px);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background:
        linear-gradient(135deg, var(--accent-soft), transparent 58%),
        var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
    overflow: hidden;
    animation: se-rise 520ms var(--ease-out) both;
}

/* Full-bleed masthead on the pages whose header sits directly on <body>. */
body>header:not(.topbar):is(:has(h1), :has(h2)),
body>.hero {
    width: min(100%, var(--page-w));
    margin-inline: auto;
    margin-top: clamp(18px, 3vw, 30px);
}

.container>header::after,
body>header:not(.topbar):is(:has(h1), :has(h2))::after,
body>.hero::after,
.header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent2), transparent);
}

.container>header h1,
body>header:not(.topbar) h1,
body>.hero h1,
body>.hero h2,
.header h1 {
    margin: 0 0 0.35em;
    font-size: clamp(1.55rem, 3.6vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.container>header p,
body>header:not(.topbar) p,
body>.hero p,
.header p,
.hero-sub,
.subtitle {
    margin: 0;
    max-width: 62ch;
    color: var(--text2);
    font-size: 1rem;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.header-text {
    min-width: 0;
}

.course-tag,
.course-label,
.hero-chip,
.hero-badge,
.eyebrow,
.logo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 4px 11px;
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

footer {
    max-width: var(--page-w);
    margin: clamp(34px, 6vw, 58px) auto 0;
    padding: 24px clamp(14px, 3.4vw, 26px) 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.84rem;
    text-align: center;
}

footer p {
    margin: 0.2em 0;
}

footer strong {
    color: var(--text2);
}

/* A heading-less <header> behaves as a topbar. */
body>header:not(.topbar):not(:has(h1)):not(:has(h2)) {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    min-height: var(--topbar-h);
    padding-block: 8px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The reading-progress rail that some pages put in that bar. */
.progress-bar-wrap>[id="readingProgress"] {
    display: block;
    width: 0;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: width 120ms linear;
}

.header-right .progress-bar-wrap {
    width: min(220px, 34vw);
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: var(--surface3);
}

/* ----------------------------------------------------------- topbar/nav -- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    width: 100%;
    min-height: var(--topbar-h);
    padding-block: 8px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.topbar h1,
.topbar h2 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: -0.005em;
}

.topbar-brand,
.topbar-left {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text2);
}

.topbar-brand::before,
.topbar-left::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.topbar-nav,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
}

.topbar-nav::-webkit-scrollbar {
    display: none;
}

.topbar-nav a {
    padding: 5px 10px;
    border-radius: var(--r-xs);
    color: var(--text2);
    font-size: 0.8rem;
    font-weight: 550;
    white-space: nowrap;
    transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.topbar-nav a:hover,
.topbar-nav a.active {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* Anchor lists used as a table of contents. */
.toc,
.quick-nav,
.nav-tabs {
    margin: 0 0 clamp(20px, 3vw, 30px);
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.toc h2,
.toc h3,
.toc h4,
.quick-nav h4 {
    margin: 0 0 12px;
    color: var(--text2);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.toc ul,
.toc ol,
.quick-nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: se-toc;
}

/* The numbered contents lists keep their numbering as a mono prefix. */
.toc ol>li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    counter-increment: se-toc;
}

.toc ol>li::before {
    content: counter(se-toc, decimal-leading-zero);
    flex: 0 0 auto;
    padding-left: 11px;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
}

.toc ol>li>a {
    flex: 1;
    min-width: 0;
    padding-left: 0;
}

.toc ul>li {
    margin: 0;
}

.toc a,
.quick-nav a,
.nav-tabs a,
.nav-tab {
    display: block;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    color: var(--text2);
    font-size: 0.87rem;
    transition: background-color 160ms var(--ease), color 160ms var(--ease),
        border-color 160ms var(--ease), transform 160ms var(--ease);
}

.toc a:hover,
.quick-nav a:hover,
.nav-tab:hover,
.toc a.active,
.nav-tab.active {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-ink);
    transform: translateX(2px);
}

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nav-tab {
    cursor: pointer;
}

/* ------------------------------------------------------------ sections -- */

.section,
section.section,
.page-section,
.subsec {
    position: relative;
    margin: 0 0 clamp(18px, 2.8vw, 28px);
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.section:hover,
.page-section:hover {
    border-color: var(--border2);
}

.subsec {
    margin-bottom: 16px;
    padding: 18px;
    background: var(--inset);
}

.section>h2:first-child,
.page-section>h2:first-child {
    margin-top: 0;
}

.section h2,
.page-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 1.28rem;
    letter-spacing: -0.02em;
}

.section h3,
.page-section h3 {
    margin: 24px 0 10px;
    color: var(--accent-ink);
    font-size: 1.05rem;
}

.section h4 {
    margin: 18px 0 8px;
    color: var(--text2);
}

/* Numbered section headers (chapters 7–10, UML guide, quizzes). */
.section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.section-header h2,
.section-header h3,
.section-title,
.section-header-text {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.22rem;
    letter-spacing: -0.02em;
}

.section-header>.section-num,
.section-header>.sec-num,
.section-header>.section-number {
    align-self: flex-start;
}

.section-num,
.sec-num,
.section-number,
.chapter-num,
.step-num,
.step-number,
.sidebar .num,
.toc-section .num,
.q-num,
.question-number,
.rb-num {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border: 1px solid var(--accent-line);
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0;
}

.section-body {
    margin: 0;
}

/* Standalone section titles used as plain headings. */
.section-title,
.quick-ref-title,
.chapter-title,
.box-title,
.card-title,
.callout-title,
.diagram-title,
.quiz-q,
.fb-title,
.procon-title {
    font-weight: 660;
    color: var(--text);
}

.divider {
    height: 1px;
    margin: 20px 0;
    border: 0;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* ------------------------------------------------------------ callouts -- */
/* One shape, one anatomy, six colour roles. Every legacy box class in the
   course maps onto it, so the pages read as one document. */

.callout,
.definition-box,
.definition,
.truth-box,
.example-box,
.example,
.example-block,
.exam-example,
.exam-question,
.exam-box,
.past-exam,
.past-exam-box,
.exam-section,
.tip,
.tip-box,
.exam-tip,
.warning,
.warning-box,
.error-box,
.highlight-box,
.key-point,
.key-concept,
.memory-trick,
.mnemonic,
.acronym,
.formula,
.formula-box,
.template-box,
.diagram-box,
.quote,
.box,
.info-box,
.instruction,
.instructions,
.quiz-info,
.total-marks,
.scenario,
.diagram-note,
.model-answer,
.mock-answer,
.answer-box,
.answer-section,
.keyword-hint,
.rule-box,
.code-block {
    position: relative;
    margin: 16px 0;
    padding: 16px 18px 16px 20px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    background: var(--inset);
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.62;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.callout:first-child,
.box:first-child {
    margin-top: 0;
}

.callout>*:last-child,
.box>*:last-child {
    margin-bottom: 0;
}

/* Only the callouts that actually carry an icon get the icon rail; the rest
   are plain blocks, or a bare inline label would be laid out as a column. */
.callout:has(> .callout-icon) {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-left: 16px;
}

.callout-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent-soft);
    font-size: 0.98rem;
    line-height: 1;
}

.callout-body {
    min-width: 0;
    flex: 1;
}

.callout-title,
.box-title {
    display: block;
    margin-bottom: 5px;
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* — colour roles — */

.callout-blue,
.definition-box,
.definition,
.key-concept,
.truth-box,
.box-blue,
.box.info,
.info-box,
.diagram-box,
.quote {
    border-left-color: var(--blue);
    background: var(--blue-soft);
    border-color: var(--blue-line);
}

.callout-blue .callout-icon,
.box.info .callout-icon {
    background: var(--blue-soft);
}

.callout-blue .callout-title,
.definition-box strong:first-child,
.definition strong:first-child,
.box.info .box-title,
.box-blue .box-title {
    color: var(--blue-ink);
}

.callout-green,
.example-box,
.example,
.example-block,
.exam-example,
.box-green,
.card-green,
.good,
.pro {
    border-left-color: var(--green);
    border-color: var(--green-line);
    background: var(--green-soft);
}

.callout-green .callout-icon {
    background: var(--green-soft);
}

.callout-green .callout-title,
.box-green .box-title,
.example-box>strong:first-child {
    color: var(--green-ink);
}

.callout-gold,
.callout-amber,
.tip,
.tip-box,
.exam-tip,
.memory-trick,
.mnemonic,
.acronym,
.box-yellow,
.box.tip,
.exam-question,
.exam-box,
.past-exam,
.past-exam-box,
.exam-section,
.keyword-hint {
    border-left-color: var(--gold);
    border-color: var(--gold-line);
    background: var(--gold-soft);
}

.callout-gold .callout-icon {
    background: var(--gold-soft);
}

.callout-gold .callout-title,
.box.tip .box-title,
.box-yellow .box-title {
    color: var(--gold-ink);
}

.callout-red,
.warning,
.warning-box,
.error-box,
.box-red,
.box.warn,
.bad,
.con,
.neg {
    border-left-color: var(--red);
    border-color: var(--red-line);
    background: var(--red-soft);
}

.callout-red .callout-icon,
.box.warn .callout-icon {
    background: var(--red-soft);
}

.callout-red .callout-title,
.box.warn .box-title,
.box-red .box-title {
    color: var(--red-ink);
}

.callout-purple,
.callout-violet,
.card-purple,
.box-purple,
.template-box {
    border-left-color: var(--violet);
    border-color: var(--violet-line);
    background: var(--violet-soft);
}

.callout-purple .callout-icon {
    background: var(--violet-soft);
}

.callout-purple .callout-title,
.box-purple .box-title {
    color: var(--violet-ink);
}

.callout-teal,
.card-teal,
.key-point,
.rule-box,
.scenario,
.highlight-box {
    border-left-color: var(--teal);
    border-color: var(--teal-line);
    background: var(--teal-soft);
}

.callout-teal .callout-icon {
    background: var(--teal-soft);
}

.callout-teal .callout-title {
    color: var(--teal-ink);
}

.callout-note,
.callout-info,
.instruction,
.instructions,
.quiz-info,
.diagram-note,
.box.hl,
.box.hl2 {
    border-left-color: var(--accent);
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

/* Formulas and code get the mono treatment. */
.formula,
.formula-box,
.code-block,
pre,
code,
kbd,
samp,
.mono,
.frac {
    font-family: var(--mono);
}

.formula,
.formula-box {
    border-left-color: var(--violet);
    border-color: var(--violet-line);
    background: var(--code-bg);
    font-size: 0.9rem;
}

.code-block,
pre {
    overflow-x: auto;
    border-left-color: var(--border2);
    border-color: var(--border);
    background: var(--code-bg);
    color: var(--code-color);
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

code:not(pre code):not(.code-block code) {
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--code-bg);
    color: var(--code-color);
    font-size: 0.88em;
}

pre code {
    padding: 0;
    border: 0;
    background: none;
}

.quote {
    font-style: italic;
    color: var(--text2);
}

/* Inline emphasis */
.highlight,
.hl,
.kw-pill,
mark {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--gold-soft);
    box-shadow: inset 0 -1px 0 var(--gold-line);
    color: var(--text);
    font-weight: 600;
}

.hl2 {
    background: var(--accent-soft);
    box-shadow: inset 0 -1px 0 var(--accent-line);
}

/* ------------------------------------------------------- cards & grids -- */

.card,
.type-card,
.topic-card,
.characteristic-card,
.qa-card,
.letter-card,
.mem-card,
.stat-card,
.summary-card,
.solution-card,
.nfr-item,
.results-card,
.score-card,
.symbol-card,
.chapter-card,
.procon-box,
.vis-box,
.qr-item,
.audience-item,
.tip-item,
.bp-item,
.opt-item,
.rb-item,
.legend-item,
.def-item {
    position: relative;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.card:hover,
.type-card:hover,
.topic-card:hover,
.characteristic-card:hover,
.qa-card:hover,
.letter-card:hover,
.mem-card:hover,
.summary-card:hover,
.nfr-item:hover,
.symbol-card:hover,
.chapter-card:hover,
.vis-box:hover,
.qr-item:hover,
.audience-item:hover,
.tip-item:hover,
.bp-item:hover,
.opt-item:hover,
.def-item:hover {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    box-shadow: var(--shadow);
}

.card-title,
.box-title,
.qr-term,
.audience-role,
.tip-label,
.procon-title,
.symbol-name,
.vis-name {
    display: block;
    margin: 0 0 7px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 660;
    letter-spacing: -0.01em;
}

.qr-def,
.audience-desc,
.tip-text,
.desc,
.symbol-description,
.card-title+p {
    color: var(--text2);
    font-size: 0.88rem;
}

/* Accent stripes on the coloured card variants. */
.card-accent,
.card-blue,
.card-green,
.card-gold,
.card-purple,
.card-teal {
    border-top: 2px solid var(--accent);
}

.card-accent {
    border-top-color: var(--accent);
}

.card-blue {
    border-top-color: var(--blue);
}

.card-green {
    border-top-color: var(--green);
}

.card-gold {
    border-top-color: var(--gold);
}

.card-purple {
    border-top-color: var(--violet);
}

.card-teal {
    border-top-color: var(--teal);
}

.card-accent .card-title {
    color: var(--accent-ink);
}

.card-blue .card-title {
    color: var(--blue-ink);
}

.card-green .card-title {
    color: var(--green-ink);
}

.card-gold .card-title {
    color: var(--gold-ink);
}

.card-purple .card-title {
    color: var(--violet-ink);
}

.card-teal .card-title {
    color: var(--teal-ink);
}

.card-grid,
.types-grid,
.nfr-grid,
.characteristic-grid,
.qa-grid,
.mem-grid,
.tips-grid,
.qr-grid,
.audience-grid,
.bp-grid,
.opt-grid,
.kp-grid,
.def-list,
.grid-2,
.grid2,
.vis-grid,
.leaf-grid,
.score-panel,
.results-breakdown,
.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 14px;
    margin: 16px 0;
}

.grid-2,
.grid2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.qr-grid,
.kp-grid,
.def-list,
.leaf-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 10px;
}

.hero-stats,
.score-panel,
.results-breakdown {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}

/* Stat tiles */
.hero-stats>div,
.score-card,
.rb-item {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: center;
}

.stat-num,
.score-card .num,
.score-panel .num,
.score-big,
.results-score,
.rb-num {
    display: block;
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.stat-label,
.lbl,
.score-label,
.results-label,
.rb-label,
.sd-label {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Badges, tags and pills */
.badge,
.tag,
.qa-tag,
.topic-tag,
.exam-badge,
.tip-badge,
.question-badge,
.generated-tag,
.exam-tag,
.question-type,
.points,
.question-marks,
.pts,
.marks,
.chapter-pill,
.hero-badge,
.score-pill,
.grade,
.grade-badge,
.fb-score-tag,
.label,
.emoji,
.chapter-num,
.diagram-type,
.lo,
.kw-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text2);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-key,
.badge-exam,
.exam-badge,
.exam-tag,
.tag.exam,
.tag.past,
.past,
.badge-amber,
.badge.gold {
    border-color: var(--gold-line);
    background: var(--gold-soft);
    color: var(--gold-ink);
}

.badge-blue,
.badge.blue,
.question-badge {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--blue-ink);
}

.badge-green,
.badge.green,
.badge-opt {
    border-color: var(--green-line);
    background: var(--green-soft);
    color: var(--green-ink);
}

.badge-red,
.badge.red {
    border-color: var(--red-line);
    background: var(--red-soft);
    color: var(--red-ink);
}

.badge-purple,
.badge.purple {
    border-color: var(--violet-line);
    background: var(--violet-soft);
    color: var(--violet-ink);
}

.badge-teal,
.badge.teal {
    border-color: var(--teal-line);
    background: var(--teal-soft);
    color: var(--teal-ink);
}

.chapter-pill {
    padding: 5px 12px;
    text-transform: none;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 160ms var(--ease), background-color 160ms var(--ease),
        color 160ms var(--ease), border-color 160ms var(--ease);
}

.chapter-pill:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.chapter-pills,
.hero-badges,
.tags,
.q-badges,
.question-badges,
.toggle-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0 0;
}

/* -------------------------------------------------------------- tables -- */

.table-wrap,
.tbl-wrap,
.sg-table-scroll,
.diagram-scroll,
.page-table-container {
    overflow-x: auto;
    margin: 16px 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.tbl-wrap table,
.sg-table-scroll table {
    margin: 0;
    border: 0;
    border-radius: 0;
}

table,
.comparison-table,
.kano-table {
    width: 100%;
    margin: 16px 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    overflow: hidden;
    font-size: 0.89rem;
}

th,
td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--surface2);
    color: var(--text2);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background-color 140ms var(--ease);
}

tbody tr:hover td {
    background: var(--accent-soft);
}

/* ------------------------------------------------------- process flows -- */

.process-flow,
.process-diagram,
.steps,
.flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background:
        linear-gradient(var(--bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
        var(--inset);
    background-size: 22px 22px, 22px 22px, auto;
}

.process-step,
.pf-step,
.flow-step {
    padding: 9px 15px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text2);
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 180ms var(--ease), border-color 180ms var(--ease),
        background-color 180ms var(--ease), color 180ms var(--ease);
}

.process-step:hover,
.pf-step:hover,
.flow-step:hover {
    transform: translateY(-2px);
    border-color: var(--accent-line);
    color: var(--text);
}

.pf-step.done,
.flow-step.done {
    border-color: var(--green-line);
    background: var(--green-soft);
    color: var(--green-ink);
}

.pf-step.active,
.flow-step.active,
.process-step.active {
    border-color: transparent;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-accent);
}

.arrow,
.pf-arrow,
.flow-arrow,
.uc-dash {
    color: var(--accent);
    font-size: 1rem;
    line-height: 1;
    opacity: 0.75;
}

/* Numbered steps */
.step,
.numbered-step,
.rb-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.step:hover,
.numbered-step:hover {
    transform: translateX(3px);
    box-shadow: var(--shadow-sm);
}

.step-content {
    min-width: 0;
    flex: 1;
}

.num-teal {
    border-color: var(--teal-line);
    background: var(--teal-soft);
    color: var(--teal-ink);
}

.num-blue {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--blue-ink);
}

.num-green {
    border-color: var(--green-line);
    background: var(--green-soft);
    color: var(--green-ink);
}

.num-amber {
    border-color: var(--gold-line);
    background: var(--gold-soft);
    color: var(--gold-ink);
}

.num-purple {
    border-color: var(--violet-line);
    background: var(--violet-soft);
    color: var(--violet-ink);
}

/* Pros & cons columns */
.procon,
.comparison-column,
.before,
.after {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 14px;
    margin: 16px 0;
}

.procon-box.pro,
.comparison-column.good {
    border-color: var(--green-line);
    background: var(--green-soft);
}

.procon-box.con,
.comparison-column.bad {
    border-color: var(--red-line);
    background: var(--red-soft);
}

.procon-box.pro .procon-title {
    color: var(--green-ink);
}

.procon-box.con .procon-title {
    color: var(--red-ink);
}

/* Styled lists */
ul.styled,
ol.styled-ol,
.checklist,
.key-points,
.practice-list,
.requirements-list {
    margin: 12px 0;
    padding-left: 0;
    list-style: none;
}

ul.styled li,
.checklist li,
.key-points li,
.practice-list li,
.requirements-list li {
    position: relative;
    margin: 7px 0;
    padding-left: 22px;
}

ul.styled li::before,
.checklist li::before,
.key-points li::before,
.practice-list li::before,
.requirements-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent);
}

ul.styled.green li::before {
    background: var(--green);
}

ul.styled.blue li::before {
    background: var(--blue);
}

ul.styled.gold li::before {
    background: var(--gold);
}

ul.styled.purple li::before {
    background: var(--violet);
}

ul.styled.teal li::before {
    background: var(--teal);
}

ol.styled-ol {
    counter-reset: se-ol;
}

ol.styled-ol>li {
    position: relative;
    margin: 8px 0;
    padding-left: 30px;
    counter-increment: se-ol;
}

ol.styled-ol>li::before {
    content: counter(se-ol);
    position: absolute;
    left: 0;
    top: 0.15em;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
}

/* Key-point rows on the final cheat sheet */
.kp {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.87rem;
    transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}

.kp:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
}

.kp-icon {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ==========================================================================
   Quiz banks
   ========================================================================== */

/* ------------------------------------------------------------ progress -- */

.progress-wrap,
.progress-bar-wrap {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 0 20px;
    padding: 12px 0;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Inside a hero card the bar is part of that card, not page chrome. */
.hero .progress-wrap,
.hero .progress-bar-wrap,
header .progress-wrap,
header .progress-bar-wrap {
    position: static;
    margin: 16px 0 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.progress-info,
.progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.progress-bar,
.progress-bar-wrap:has(> .progress-bar-fill) {
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: var(--surface3);
}

/* That wrapper is a track, so it drops the sticky-bar chrome. */
.progress-bar-wrap:has(> .progress-bar-fill) {
    position: static;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.progress-fill,
.progress-bar-fill {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: width 480ms var(--ease-out);
}

/* ------------------------------------------------------- question card -- */

.question,
.question-block,
.q-card {
    position: relative;
    margin: 0 0 16px;
    padding: clamp(16px, 2.6vw, 24px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.question:hover,
.question-block:hover,
.q-card:hover {
    border-color: var(--border2);
    box-shadow: var(--shadow);
}

.question.correct,
.question-block.correct,
.q-card.correct {
    border-color: var(--green-line);
}

.question.incorrect,
.question-block.incorrect,
.q-card.incorrect {
    border-color: var(--red-line);
}

.question-header,
.q-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
}

.question-text,
.q-text,
.q-scenario {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 550;
    line-height: 1.55;
}

.q-body,
.q-footer {
    margin: 0;
}

.q-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-top: 12px;
}

.section-divider {
    margin: 26px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------- options -- */

.options,
.true-false-options,
.tf-options,
.mcq-options {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.option,
.mcq-option,
.opt,
.tf-btn,
.option-btn,
.answer-option,
.options>label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: transform 160ms var(--ease), border-color 160ms var(--ease),
        background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.option:hover,
.mcq-option:hover,
.opt:hover,
.tf-btn:hover,
.option-btn:hover,
.answer-option:hover,
.options>label:hover {
    transform: translateX(3px);
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

.option input[type="radio"],
.option input[type="checkbox"],
.options input {
    margin-top: 0.3em;
    accent-color: var(--accent);
}

/* The option's text sometimes sits in its own <label for>; it fills the row
   rather than becoming a box of its own. */
.option>label {
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.opt-letter {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 1px solid var(--border2);
    border-radius: 7px;
    background: var(--surface2);
    color: var(--text2);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    transition: background-color 160ms var(--ease), color 160ms var(--ease),
        border-color 160ms var(--ease);
}

.opt-text,
.option span:not(.opt-letter) {
    min-width: 0;
    flex: 1;
}

/* selected / locked / graded states */
.option.selected,
.mcq-option.selected,
.opt.selected,
.tf-btn.selected,
.option.active,
.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-line);
}

.option.selected .opt-letter,
.opt.selected .opt-letter {
    border-color: transparent;
    background: var(--accent);
    color: var(--on-accent);
}

.option.correct,
.mcq-option.correct,
.opt.correct,
.option.correct-ans,
.opt.correct-ans,
.tf-btn.correct-ans,
.correct-answer {
    border-color: var(--green);
    background: var(--green-soft);
}

.option.correct .opt-letter,
.opt.correct-ans .opt-letter {
    border-color: transparent;
    background: var(--green);
    color: #fff;
}

.option.incorrect,
.mcq-option.incorrect,
.opt.incorrect,
.option.wrong-ans,
.opt.wrong-ans,
.tf-btn.wrong-ans,
.incorrect-answer,
.wrong {
    border-color: var(--red);
    background: var(--red-soft);
}

.option.wrong-ans .opt-letter,
.opt.wrong-ans .opt-letter {
    border-color: transparent;
    background: var(--red);
    color: #fff;
}

.option.disabled,
.opt.disabled,
.locked .option,
.locked .opt,
.submitted .option,
.submitted .opt {
    cursor: default;
}

.option.disabled:hover,
.opt.disabled:hover,
.locked .option:hover,
.submitted .option:hover {
    transform: none;
}

/* ------------------------------------------------------- written input -- */

.written-area,
.write-area,
textarea,
input[type="text"],
input[type="search"],
select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border2);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

textarea {
    min-height: 108px;
    resize: vertical;
}

textarea:focus,
input:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

::placeholder {
    color: var(--muted);
}

.write-hint,
.write-meta,
.keyword-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.79rem;
}

.keyword-found {
    padding: 2px 8px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 650;
}

.keyword-found.hit {
    border-color: var(--green-line);
    background: var(--green-soft);
    color: var(--green-ink);
}

.keyword-found.miss {
    border-color: var(--border2);
    background: var(--surface2);
    color: var(--muted);
}

/* ------------------------------------------------------------ feedback -- */

.feedback,
.explanation,
.mock-answer,
.model-answer,
.answer-section,
.mock-answer-wrap,
.results-panel,
.result,
.score-display,
.results-card {
    display: none;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    background: var(--inset);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Everything the scripts reveal uses one of these hooks. */
.feedback.show,
.explanation.show,
.mock-answer.show,
.model-answer.show,
.answer-section.show,
.mock-answer-wrap.visible,
.results-panel.show,
.result.show,
.score-display.show,
.feedback.visible,
.explanation.visible,
.feedback.correct,
.feedback.incorrect,
.feedback.partial {
    display: block;
    animation: se-reveal 320ms var(--ease-out) both;
}

.feedback.correct {
    border-left-color: var(--green);
    border-color: var(--green-line);
    background: var(--green-soft);
}

.feedback.incorrect {
    border-left-color: var(--red);
    border-color: var(--red-line);
    background: var(--red-soft);
}

.feedback.partial {
    border-left-color: var(--gold);
    border-color: var(--gold-line);
    background: var(--gold-soft);
}

.feedback-header,
.fb-title,
.model-answer-label,
.fb-score-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text2);
}

.feedback.correct .fb-title,
.feedback.correct .feedback-header {
    color: var(--green-ink);
}

.feedback.incorrect .fb-title,
.feedback.incorrect .feedback-header {
    color: var(--red-ink);
}

.feedback.partial .fb-title,
.feedback.partial .feedback-header {
    color: var(--gold-ink);
}

.feedback-icon {
    font-size: 0.95rem;
}

.fb-body {
    color: var(--text2);
}

/* Answer reveals that live inline and are toggled by a button. */
.answer-section,
.mock-answer,
.model-answer {
    border-left-color: var(--violet);
    border-color: var(--violet-line);
    background: var(--violet-soft);
}

/* ------------------------------------------------------------- buttons -- */

button,
.btn,
.submit-btn,
.submit-all-btn,
.check-btn,
.restart-btn,
.retry-btn,
.nav-btn,
.toggle-answer-btn,
.toggle-mock,
.mock-toggle,
.answer-toggle,
.toggle-btn,
.lang-toggle,
.expand,
.close-btn,
.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--border2);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 620;
    line-height: 1.3;
    cursor: pointer;
    transition: transform 160ms var(--ease), border-color 160ms var(--ease),
        background-color 160ms var(--ease), color 160ms var(--ease),
        box-shadow 160ms var(--ease);
}

button:hover,
.btn:hover,
.toggle-btn:hover,
.lang-toggle:hover,
.toggle-answer-btn:hover,
.toggle-mock:hover,
.mock-toggle:hover,
.answer-toggle:hover,
.expand:hover,
.nav-btn:hover,
.check-btn:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-ink);
}

button:active,
.btn:active {
    transform: translateY(0);
}

.submit-btn,
.submit-all-btn,
.nav-finish,
.restart-btn,
.retry-btn,
.toggle-btn.active,
.lang-toggle.active {
    border-color: transparent;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 650;
    box-shadow: var(--shadow-accent);
}

.submit-btn:hover,
.submit-all-btn:hover,
.nav-finish:hover,
.restart-btn:hover,
.retry-btn:hover {
    background: var(--accent-ink);
    color: var(--on-accent);
    box-shadow: var(--shadow-accent);
}

.submit-all-wrap,
.quiz-nav,
.actions,
.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
}

.quiz-nav {
    justify-content: flex-end;
}

/* ------------------------------------------------------------- results -- */

.results-panel,
.result,
.score-display,
.score-panel,
.results-card {
    border-left-width: 1px;
    border-color: var(--accent-line);
    background:
        linear-gradient(135deg, var(--accent-soft), transparent 60%),
        var(--surface);
    box-shadow: var(--shadow);
}

.score-panel {
    display: grid;
}

.score-card.s-correct .num {
    color: var(--green-ink);
}

.score-card.s-wrong .num {
    color: var(--red-ink);
}

.score-card.s-total .num {
    color: var(--accent-ink);
}

.sd-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}

.sd-line:last-child {
    border-bottom: 0;
}

.grade,
.grade-badge {
    padding: 4px 12px;
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 0.78rem;
}

.results-score,
.score-big {
    font-size: 2.2rem;
}

/* ==========================================================================
   Disclosure — chapter cards, topics, collapsibles
   Everything animates on grid-template-rows so no height has to be measured.
   ========================================================================== */

.chapter-card,
.chapter,
.topic,
.collapsible-wrap,
.quiz-block {
    margin: 0 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.chapter-card:hover,
.chapter:hover {
    border-color: var(--border2);
}

.chapter-card.open,
.chapter.open {
    box-shadow: var(--shadow);
}

.chapter:not(:has(> .chapter-header)) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.topic {
    margin: 10px 0;
    border-radius: var(--r-md);
    background: var(--inset);
    box-shadow: none;
}

.chapter-header,
.topic-header,
.collapsible-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background-color 160ms var(--ease);
}

.chapter-header:hover,
.topic-header:hover,
.collapsible-header:hover {
    background: var(--accent-soft);
}

.chapter-header>div:not([class]),
.topic-header>div:not([class]),
.chapter-title,
.topic-title,
.collapsible-header {
    flex: 1;
    min-width: 0;
    font-weight: 650;
    color: var(--text);
}

.chapter-title {
    font-size: 1.02rem;
}

.topic-title {
    font-size: 0.93rem;
}

.chapter-subtitle {
    color: var(--text2);
    font-size: 0.82rem;
    font-weight: 450;
}

.ch-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 700;
}

.chevron,
.collapsible-icon {
    flex: 0 0 auto;
    display: inline-block;
    color: var(--muted);
    font-size: 0.72rem;
    transition: transform 260ms var(--ease), color 160ms var(--ease);
}

.chapter-card.open>.chapter-header .chevron,
.chapter.open>.chapter-header .chevron,
.topic.open>.topic-header .chevron,
.collapsible-header.open .collapsible-icon {
    transform: rotate(90deg);
    color: var(--accent);
}

/* These panels hold an arbitrary number of children, so the one-child
   grid-template-rows: 0fr trick does not apply; max-height with a cap well
   above any real panel is what actually collapses them. */
.chapter-body,
.leaves,
.collapsible-body,
.det-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 380ms var(--ease-out), opacity 220ms var(--ease),
        padding 380ms var(--ease-out);
}

.chapter-card.open>.chapter-body,
.chapter.open>.chapter-body,
.topic.open>.leaves,
.collapsible-body.open,
.det-body.open {
    max-height: 12000px;
    opacity: 1;
}

/* Padding is part of the collapse, or a closed panel keeps a visible gap. */
.chapter-card.open>.chapter-body,
.chapter.open>.chapter-body {
    padding: 0 18px 18px;
}

.topic.open>.leaves {
    padding: 0 14px 14px;
}

.collapsible-body.open {
    padding: 0 16px 14px;
}

.collapsible-wrap {
    margin: 14px 0;
    background: var(--inset);
}

.collapsible-header {
    font-size: 0.9rem;
}

.hidden-search {
    display: none;
}

/* ------------------------------------------------------------- mindmap -- */

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text2);
    font-size: 0.8rem;
}

.legend>span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.leg-dot,
.leaf-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
}

.leaf {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text2);
    font-size: 0.85rem;
    line-height: 1.45;
    cursor: pointer;
    transition: transform 160ms var(--ease), border-color 160ms var(--ease),
        background-color 160ms var(--ease), color 160ms var(--ease);
}

.leaf:hover {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    color: var(--text);
}

.leaf.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
}

.leaf-dot {
    margin-top: 0.42em;
}

.info-panel {
    display: none;
    grid-column: 1 / -1;
    margin: 4px 0 8px;
    padding: 15px 17px;
    border: 1px solid var(--accent-line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.62;
}

.info-panel.show {
    display: block;
    animation: se-reveal 300ms var(--ease-out) both;
}

.close-btn {
    float: right;
    margin: -6px -6px 0 10px;
    padding: 3px 9px;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--muted);
    font-size: 0.9rem;
}

.close-btn:hover {
    background: var(--surface);
    color: var(--text);
}

/* The mind map's per-chapter accents, remapped onto the SE311 ramp. */
.c1 {
    --hue: var(--accent);
}

.c2 {
    --hue: var(--blue);
}

.c3 {
    --hue: var(--violet);
}

.c4 {
    --hue: var(--gold);
}

.c5 {
    --hue: var(--green);
}

.c6 {
    --hue: var(--pink);
}

.c7 {
    --hue: var(--teal);
}

.c8 {
    --hue: var(--accent2);
}

.c9 {
    --hue: var(--accent3);
}

.leg-dot.c1,
.leg-dot.c2,
.leg-dot.c3,
.leg-dot.c4,
.leg-dot.c5,
.leg-dot.c6,
.leg-dot.c7,
.leg-dot.c8,
.leg-dot.c9,
.leaf-dot.c1,
.leaf-dot.c2,
.leaf-dot.c3,
.leaf-dot.c4,
.leaf-dot.c5,
.leaf-dot.c6,
.leaf-dot.c7,
.leaf-dot.c8,
.leaf-dot.c9 {
    background: var(--hue);
}

.ch-icon.c1,
.ch-icon.c2,
.ch-icon.c3,
.ch-icon.c4,
.ch-icon.c5,
.ch-icon.c6,
.ch-icon.c7,
.ch-icon.c8,
.ch-icon.c9 {
    background: var(--hue);
    color: var(--surface);
}

.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: var(--surface);
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.search-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-wrap .icon {
    color: var(--muted);
    font-size: 0.85rem;
}

.search-wrap input,
.search-box {
    width: min(240px, 42vw);
    padding: 8px 0;
    border: 0;
    background: transparent;
    font-size: 0.87rem;
}

.search-wrap input:focus {
    box-shadow: none;
}

.search-box {
    width: min(280px, 60vw);
    padding: 8px 14px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: var(--surface);
}

/* -------------------------------------------------- sidebar page layout -- */

.shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(18px, 3vw, 34px);
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(14px, 3vw, 26px);
}

.shell>main,
.shell>.main {
    max-width: none;
    padding-inline: 0;
}

.sidebar {
    position: sticky;
    top: 18px;
    align-self: start;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 18px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    scrollbar-width: thin;
}

.sidebar-logo {
    margin-bottom: 14px;
}

.sidebar a,
.toc-section a,
.sub-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border-radius: var(--r-xs);
    color: var(--text2);
    font-size: 0.84rem;
    line-height: 1.35;
    transition: background-color 150ms var(--ease), color 150ms var(--ease),
        transform 150ms var(--ease);
}

.sidebar a:hover,
.sub-link:hover,
.sidebar a.active,
.sub-link.active {
    background: var(--accent-soft);
    color: var(--accent-ink);
    transform: translateX(2px);
}

.toc-section {
    margin-bottom: 16px;
}

.toc-section-label {
    display: block;
    margin: 0 0 6px 9px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.sidebar .num {
    min-width: 21px;
    height: 21px;
    font-size: 0.65rem;
}

/* A sidebar that sits directly on <body> beside an overlay is a drawer, not
   a column: it is opened by a button at every width, so it stays off-canvas
   until .open rather than docking like the .shell sidebar. */
body>.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 61;
    width: min(320px, 86vw);
    max-height: none;
    border-radius: 0;
    border-block: 0;
    border-left: 0;
    transform: translateX(-102%);
    transition: transform 300ms var(--ease-out);
}

body>.sidebar.open {
    transform: translateX(0);
}

body>.sidebar h3 {
    margin: 0 0 12px;
    color: var(--text2);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body>.sidebar .sub-link {
    padding-left: 20px;
    font-size: 0.8rem;
}

#sidebarToggle {
    position: fixed;
    inset: 14px auto auto 14px;
    z-index: 62;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

/* This page holds its body copy in language wrappers rather than sections. */
.english-content,
.arabic-content {
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.english-content>h1,
.arabic-content>h1 {
    margin-bottom: 0.6em;
}

.english-content>h2,
.arabic-content>h2 {
    margin: 34px 0 16px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
    font-size: 1.28rem;
}

.english-content>h3,
.arabic-content>h3 {
    margin: 24px 0 10px;
    color: var(--accent-ink);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(4, 18, 18, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease);
}

.sidebar-overlay.active,
.sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.hamburger,
.toc-toggle {
    display: none;
    padding: 7px 11px;
}

/* Back-to-top affordance shared by several pages. */
.scroll-top,
.scrollToTop,
#scrollTop,
.back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border2);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text2);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    box-shadow: var(--shadow);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.scroll-top.visible,
.scrollToTop.visible,
#scrollTop.visible,
.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ==========================================================================
   Course-specific set pieces
   ========================================================================== */

/* ------------------------------------------- Volere requirement shell --- */

.volere {
    margin: 16px 0;
    border: 1px solid var(--border2);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}

.volere-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    border-bottom: 1px solid var(--border);
}

.volere-row:last-child {
    border-bottom: 0;
}

.volere-field {
    padding: 11px 14px;
    border-right: 1px solid var(--border);
}

.volere-field:last-child {
    border-right: 0;
}

.volere-full {
    grid-column: 1 / -1;
}

.volere-key {
    margin-bottom: 3px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.volere-val {
    color: var(--text);
    font-size: 0.88rem;
}

/* ------------------------------------------------------ Kano + matrix --- */

.kano-table th[rowspan] {
    background: var(--surface3);
}

.kano-q {
    background: var(--surface2);
    color: var(--text2);
}

.kano-basic {
    background: var(--blue-soft);
    color: var(--blue-ink);
    font-weight: 600;
}

.kano-performance {
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 600;
}

.kano-excitement {
    background: var(--green-soft);
    color: var(--green-ink);
    font-weight: 600;
}

.kano-indiff {
    background: var(--inset);
    color: var(--muted);
}

.kano-reverse {
    background: var(--red-soft);
    color: var(--red-ink);
    font-weight: 600;
}

.matrix-2x2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.matrix-cell {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: center;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.matrix-cell:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.cell-h {
    border-color: var(--green-line);
    background: var(--green-soft);
}

.cell-m {
    border-color: var(--gold-line);
    background: var(--gold-soft);
}

.cell-l {
    border-color: var(--blue-line);
    background: var(--blue-soft);
}

.cell-d {
    border-color: var(--border2);
    background: var(--inset);
}

.matrix-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.matrix-val {
    font-family: var(--mono);
    font-weight: 700;
    line-height: 1.1;
}

.rule-8020 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 12px;
    margin: 16px 0;
}

.rule-box {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: center;
}

.rule-box.twenty {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

.rule-box.eighty {
    border-color: var(--green-line);
    background: var(--green-soft);
}

.rule-pct {
    font-family: var(--mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.rule-box.twenty .rule-pct {
    color: var(--accent-ink);
}

.rule-box.eighty .rule-pct {
    color: var(--green-ink);
}

.rule-desc {
    margin-top: 5px;
    color: var(--text2);
    font-size: 0.83rem;
}

/* --------------------------------------------------------- UML guide --- */

.hero-badges {
    margin-top: 14px;
}

.checklist li {
    font-size: 0.89rem;
}

.ch-teal li::before,
.checklist.ch-teal li::before {
    background: var(--teal);
}

.ch-blue li::before,
.checklist.ch-blue li::before {
    background: var(--blue);
}

.ch-green li::before,
.checklist.ch-green li::before {
    background: var(--green);
}

.ch-amber li::before,
.checklist.ch-amber li::before {
    background: var(--gold);
}

.ch-red li::before,
.checklist.ch-red li::before {
    background: var(--red);
}

.ch-purple li::before,
.checklist.ch-purple li::before {
    background: var(--violet);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: 0.84rem;
}

.callout-label {
    display: block;
    margin-bottom: 4px;
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.callout-warn .callout-label {
    color: var(--red-ink);
}

.callout-tip .callout-label {
    color: var(--green-ink);
}

.callout-note .callout-label,
.callout-info .callout-label {
    color: var(--blue-ink);
}

.callout-warn {
    border-left-color: var(--red);
    border-color: var(--red-line);
    background: var(--red-soft);
}

.callout-tip {
    border-left-color: var(--green);
    border-color: var(--green-line);
    background: var(--green-soft);
}

/* A UML class rectangle drawn in HTML. */
.class-box {
    display: inline-block;
    border: 1.5px solid var(--text2);
    border-radius: 4px;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.8rem;
    text-align: left;
    box-shadow: var(--shadow-sm);
}

.class-box-name {
    padding: 8px 14px;
    border-bottom: 1.5px solid var(--text2);
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 700;
    text-align: center;
}

.class-box-section {
    padding: 8px 14px;
    border-bottom: 1.5px solid var(--text2);
    color: var(--text2);
}

.class-box-section:last-child {
    border-bottom: 0;
}

.vis-box {
    text-align: center;
}

.vis-symbol {
    display: block;
    margin-bottom: 5px;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 700;
}

.vis-name {
    font-size: 0.86rem;
}

.diagram-scroll,
.ucd-wrap {
    overflow-x: auto;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background:
        linear-gradient(var(--bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
        var(--surface);
    background-size: 22px 22px, 22px 22px, auto;
    -webkit-overflow-scrolling: touch;
}

.ucd-wrap svg,
.diagram-scroll svg {
    display: block;
    margin-inline: auto;
}

/* SVG diagram tokens — the diagrams are content, so they theme too. */
.uc-ellipse {
    fill: var(--accent-soft);
    stroke: var(--accent);
    stroke-width: 1.4;
}

.uc-text,
.uc-actor-text,
.uc-label,
.cn,
.cb,
.cm,
.ct,
svg text {
    fill: var(--text);
    font-family: var(--sans);
}

.uc-label,
.cm {
    fill: var(--text2);
}

.uc-line,
.uc-gen,
.uc-extend,
.lg,
.la,
.lc,
.ml,
.rl,
.sep {
    stroke: var(--text2);
    fill: none;
}

.uc-dash,
.uc-boundary {
    stroke: var(--border2);
}

.uc-boundary {
    fill: none;
}

.uc-customer {
    stroke: var(--accent);
}

.uc-member {
    stroke: var(--violet);
}

.uc-admin {
    stroke: var(--green);
}

.uc-payment {
    stroke: var(--gold);
}

.cd-member {
    stroke: var(--violet);
}

.cd-customer {
    stroke: var(--accent);
}

.cd-admin {
    stroke: var(--green);
}

.cd-area-slot {
    stroke: var(--gold);
}

.cd-session {
    stroke: var(--blue);
}

.cd-review {
    stroke: var(--pink);
}

/* --------------------------------------------- misc content fragments --- */

.mem-card,
.letter-card,
.qa-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emoji {
    border: 0;
    background: none;
    font-size: 1.1rem;
    padding: 0;
}

.qa-tag,
.topic-tag {
    align-self: flex-start;
}

.answer-toggle {
    margin-top: 10px;
}

.answer-box {
    display: none;
}

.answer-box.show,
.answer-box.open {
    display: block;
    animation: se-reveal 300ms var(--ease-out) both;
}

.pos {
    color: var(--green-ink);
}

.neg {
    color: var(--red-ink);
}

.internal {
    color: var(--violet-ink);
}

.frac {
    display: inline-block;
    text-align: center;
}

.label-tree {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text2);
}

.child,
.grandchild {
    padding-left: 1.4em;
}

.quiz-q {
    margin-bottom: 8px;
    font-weight: 620;
}

.quiz-ans {
    display: none;
    padding: 10px 13px;
    border-left: 3px solid var(--green);
    border-radius: var(--r-sm);
    background: var(--green-soft);
    color: var(--green-ink);
    font-size: 0.88rem;
}

.quiz-ans.revealed {
    display: block;
    animation: se-reveal 280ms var(--ease-out) both;
}

/* --------------------------------------------- bilingual language blocks -- */

.lang-block {
    display: none;
}

.lang-block.active {
    display: block;
}

[dir="rtl"],
.rtl {
    text-align: right;
}

[dir="rtl"] .section,
.rtl .section {
    text-align: right;
}

/* -------------------------------------------------------- theme toggle -- */
/* html-theme-sync.js injects its own .sg-theme-toggle rules at runtime, after
   this file. The doubled class outranks them without reaching for !important. */

.sg-theme-toggle.sg-theme-toggle {
    position: fixed;
    inset: 14px 14px auto auto;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 36px;
    padding: 0 14px 0 11px;
    border: 1px solid var(--border2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    color: var(--text2);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    transition: transform 200ms var(--ease), border-color 200ms var(--ease),
        color 200ms var(--ease), background-color 200ms var(--ease);
}

.sg-theme-toggle.sg-theme-toggle:hover,
.sg-theme-toggle.sg-theme-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent-line);
    color: var(--text);
}

.sg-theme-toggle svg {
    display: block;
    width: 15px;
    height: 15px;
    transition: transform 320ms var(--ease);
}

.sg-theme-toggle .sg-icon-sun {
    display: none;
}

html[data-theme="dark"] .sg-theme-toggle .sg-icon-sun {
    display: block;
}

html[data-theme="dark"] .sg-theme-toggle .sg-icon-moon {
    display: none;
}

.sg-theme-toggle:hover svg {
    transform: rotate(-18deg);
}

[dir="rtl"] .sg-theme-toggle.sg-theme-toggle,
html[lang="ar"] .sg-theme-toggle.sg-theme-toggle {
    inset: 14px auto auto 14px;
}

/* The topbar and the sticky quiz progress bar both own the top-right corner;
   move the toggle to the opposite corner on those pages. */
body:has(> .topbar) .sg-theme-toggle.sg-theme-toggle,
body:has(.progress-wrap) .sg-theme-toggle.sg-theme-toggle,
body:has(.progress-bar-wrap) .sg-theme-toggle.sg-theme-toggle {
    inset: auto 14px 14px auto;
}

/* ----------------------------------------------------------- animation -- */

@keyframes se-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes se-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes se-pop {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll reveal. se311.js adds [data-se-reveal] to top-level content blocks
   and flips it to "in" as they enter the viewport; without the script the
   content is simply visible, so nothing depends on JS to be readable. */
[data-se-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
    transition-delay: var(--se-delay, 0ms);
}

[data-se-reveal="in"] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-se-reveal] {
        opacity: 1;
        transform: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .shell>.sidebar,
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(290px, 84vw);
        max-height: none;
        border-radius: 0;
        transform: translateX(-102%);
        transition: transform 280ms var(--ease-out);
    }

    .sidebar.open,
    .sidebar.active {
        transform: translateX(0);
    }

    .hamburger,
    .toc-toggle {
        display: inline-flex;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14.5px;
    }

    .matrix-2x2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc ul,
    .quick-nav ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .header-inner,
    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .volere-field {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .volere-row:last-child .volere-field:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 600px) {

    .section,
    .page-section,
    .question,
    .question-block,
    .q-card {
        padding: 16px;
        border-radius: var(--r-md);
    }

    .container>header,
    body>header:not(.topbar):is(:has(h1), :has(h2)),
    body>.hero,
    .header {
        padding: 22px 18px;
        border-radius: var(--r-lg);
    }

    .sg-theme-toggle.sg-theme-toggle {
        inset: 10px 10px auto auto;
    }

    body:has(> .topbar) .sg-theme-toggle.sg-theme-toggle,
    body:has(.progress-wrap) .sg-theme-toggle.sg-theme-toggle,
    body:has(.progress-bar-wrap) .sg-theme-toggle.sg-theme-toggle {
        inset: auto 10px 10px auto;
    }

    .submit-btn,
    .submit-all-btn,
    .restart-btn,
    .retry-btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------- print -- */

@media print {
    body {
        padding: 0;
        background: #fff;
        color: #000;
    }

    .sg-theme-toggle,
    .topbar,
    .progress-wrap,
    .progress-bar-wrap,
    .scroll-top,
    .scrollToTop,
    #scrollTop,
    .controls,
    .quiz-nav,
    .sidebar,
    #sidebarToggle,
    .search-wrap,
    .nav-tabs {
        display: none;
    }

    .shell {
        display: block;
    }

    [data-se-reveal] {
        opacity: 1;
        transform: none;
    }

    .section,
    .page-section,
    .card,
    .question,
    .question-block,
    .q-card,
    .chapter-card,
    .callout {
        break-inside: avoid;
        box-shadow: none;
    }

    .chapter-body,
    .leaves,
    .collapsible-body {
        grid-template-rows: 1fr;
    }
}