/* ==========================================================================
   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.1);
  --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.1);
  --green-line: rgba(18, 133, 90, 0.3);

  --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.1);
  --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.1);
  --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.3);

  --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.3);

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

  --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.3);

  --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;
  }
}