/* ============================================================
   Paper-cut theme
   Layered card stock, cast shadows, deckled edges and grain.
   Loaded after styles.css on every page and overrides it.
   Rules are prefixed with :root[data-theme] so they win against
   the base [data-theme="light"] .x selectors without !important.
   ============================================================ */

:root {
  /* Card stock */
  --pc-kraft:      #e9dcc3;   /* page */
  --pc-cream:      #fbf7ee;   /* reading surface */
  --pc-sheet:      #f4ecdb;   /* secondary sheet */
  --pc-ink:        #1c1a17;
  --pc-ink-soft:   #4a443b;
  --pc-muted:      #6c6558;
  --pc-rule:       #d8ccb4;
  --pc-rule-strong:#b9ab8f;

  --pc-terracotta: #c4553b;   /* Year 12 */
  --pc-sage:       #3f7d5c;   /* Year 11 */
  --pc-teal:       #2a6f73;
  --pc-mustard:    #e0a93b;
  --pc-plum:       #5b4bdb;   /* interactive accent (matches traces) */
  --pc-blush:      #f2c6b4;

  /* Shadows cast by stacked paper */
  --pc-shadow-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 1px rgba(70,45,15,.10), 0 3px 6px -2px rgba(70,45,15,.16);
  --pc-shadow-2: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 1px rgba(70,45,15,.10), 0 6px 12px -4px rgba(70,45,15,.20), 0 18px 28px -18px rgba(70,45,15,.40);
  --pc-shadow-3: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 2px rgba(70,45,15,.10), 0 12px 20px -6px rgba(70,45,15,.25), 0 30px 44px -24px rgba(70,45,15,.45);

  --pc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --pc-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Deckled (torn) bottom edge used as a mask */
  --pc-deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V6L114 8 107 5 99 8 92 6 84 9 76 6 69 8 61 5 53 8 46 6 38 9 30 6 23 8 15 5 8 8 0 6Z'/%3E%3C/svg%3E");
}

:root[data-theme="light"],
:root:not([data-theme]) {
  --primary:        #2a6f73;
  --primary-dark:   #1f5357;
  --primary-light:  #dcebe6;
  --secondary:      #5b4bdb;
  --accent:         #c4553b;
  --year12:         #c4553b;
  --year12-light:   #f8e1d8;
  --year12-dark:    #9c3d27;
  --year11:         #3f7d5c;
  --year11-light:   #dff0e4;
  --year11-dark:    #2c5c42;

  --bg:             var(--pc-kraft);
  --bg-secondary:   var(--pc-sheet);
  --bg-tertiary:    var(--pc-cream);
  --surface:        var(--pc-cream);
  --surface-hover:  #f6efe0;
  --border:         var(--pc-rule);
  --border-strong:  var(--pc-rule-strong);
  --text-primary:   var(--pc-ink);
  --text-secondary: var(--pc-ink-soft);
  --text-muted:     var(--pc-muted);
  --nav-bg:         var(--pc-cream);
  --nav-text:       var(--pc-ink-soft);
  --nav-active:     var(--pc-teal);
  --shadow-sm:      var(--pc-shadow-1);
  --shadow-md:      var(--pc-shadow-2);
  --shadow-lg:      var(--pc-shadow-3);
}

/* Paper at night: charcoal card stock lit from above */
:root[data-theme="dark"] {
  --pc-kraft:      #1b1916;
  --pc-cream:      #26231e;
  --pc-sheet:      #211e1a;
  --pc-ink:        #efe7d6;
  --pc-ink-soft:   #cfc5b1;
  --pc-muted:      #a1978a;
  --pc-rule:       #3a352d;
  --pc-rule-strong:#51493d;
  --pc-terracotta: #e07a5f;
  --pc-sage:       #7fbf98;
  --pc-teal:       #6fb7b4;
  --pc-mustard:    #e8b85a;
  --pc-plum:       #a99bff;

  --pc-shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 1px rgba(0,0,0,.35), 0 3px 6px -2px rgba(0,0,0,.45);
  --pc-shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 1px rgba(0,0,0,.35), 0 6px 12px -4px rgba(0,0,0,.5), 0 18px 28px -18px rgba(0,0,0,.7);
  --pc-shadow-3: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 2px rgba(0,0,0,.35), 0 12px 20px -6px rgba(0,0,0,.55), 0 30px 44px -24px rgba(0,0,0,.8);

  --primary:        #6fb7b4;
  --primary-dark:   #4f9a97;
  --primary-light:  #1d2d2c;
  --secondary:      #a99bff;
  --accent:         #e07a5f;
  --year12:         #e07a5f;
  --year12-light:   #34221c;
  --year12-dark:    #f09a82;
  --year11:         #7fbf98;
  --year11-light:   #1c2c22;
  --year11-dark:    #9fd6b4;

  --bg:             var(--pc-kraft);
  --bg-secondary:   var(--pc-sheet);
  --bg-tertiary:    #2d2923;
  --surface:        var(--pc-cream);
  --surface-hover:  #2e2a24;
  --border:         var(--pc-rule);
  --border-strong:  var(--pc-rule-strong);
  --text-primary:   var(--pc-ink);
  --text-secondary: var(--pc-ink-soft);
  --text-muted:     var(--pc-muted);
  --nav-bg:         #211e1a;
  --nav-text:       var(--pc-ink-soft);
  --nav-active:     var(--pc-teal);
  --shadow-sm:      var(--pc-shadow-1);
  --shadow-md:      var(--pc-shadow-2);
  --shadow-lg:      var(--pc-shadow-3);
}

/* ── Page ─────────────────────────────────────────────────── */
:root[data-theme] body {
  background-color: var(--pc-kraft);
  color: var(--pc-ink);
}
/* Grain lives on a fixed, composited layer: background-attachment: fixed
   would force a full-page repaint on every scroll frame. */
:root[data-theme] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--pc-grain), var(--pc-fibre);
  transform: translateZ(0);
}
:root[data-theme] ::selection { background: color-mix(in srgb, var(--pc-mustard) 45%, transparent); color: var(--pc-ink); }
:root[data-theme] a { text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ── Navbar: a cream strip with a torn lower edge ─────────── */
:root[data-theme] .navbar {
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  border-bottom: 0;
  box-shadow: none;
  color: var(--pc-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-theme] .navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 9px;
  background: var(--pc-cream);
  -webkit-mask: var(--pc-deckle) 0 0 / 120px 100% repeat-x;
  mask: var(--pc-deckle) 0 0 / 120px 100% repeat-x;
  filter: drop-shadow(0 3px 2px rgba(70,45,15,.18));
  pointer-events: none;
}
:root[data-theme] .nav-title { color: var(--pc-ink); }
:root[data-theme] .nav-subtitle { color: var(--pc-muted); }
:root[data-theme] .nav-logo,
:root[data-theme] .footer-logo {
  background: var(--pc-teal);
  color: var(--pc-cream);
  border: 0;
  box-shadow: 2px 2px 0 var(--pc-mustard), 4px 4px 0 var(--pc-terracotta);
}
:root[data-theme] .nav-links a,
:root[data-theme] .nav-dropdown-btn { color: var(--pc-ink-soft); }
:root[data-theme] .nav-links a:hover,
:root[data-theme] .nav-dropdown-btn:hover,
:root[data-theme] .nav-links a.active,
:root[data-theme] .nav-links a[aria-current] {
  background: var(--pc-sheet);
  color: var(--pc-ink);
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .nav-dropdown-menu {
  background: var(--pc-cream);
  border: 1px solid var(--pc-rule);
  box-shadow: var(--pc-shadow-3);
}
:root[data-theme] .nav-dropdown-menu a { color: var(--pc-ink); }
:root[data-theme] .nav-dropdown-menu a:hover { background: var(--pc-sheet); }
:root[data-theme] .btn-icon {
  background: var(--pc-sheet);
  color: var(--pc-ink);
  border: 1px solid var(--pc-rule);
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .hamburger span { background: var(--pc-ink); }
:root[data-theme] .mobile-menu { background: var(--pc-cream); background-image: var(--pc-grain); }
:root[data-theme] .mobile-menu a { color: var(--pc-ink); }
:root[data-theme] .mobile-menu-label { color: var(--pc-terracotta); }
:root[data-theme] .badge-12 { background: var(--pc-terracotta); color: #fff; }
:root[data-theme] .badge-11 { background: var(--pc-sage); color: #fff; }
:root[data-theme] .badge-all { background: var(--pc-ink-soft); color: var(--pc-cream); }
:root[data-theme="dark"] .badge-12,
:root[data-theme="dark"] .badge-11 { color: #1b1916; }

/* ── Diorama (hero + topic header) ────────────────────────── */
.pc-diorama {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pc-diorama svg {
  position: absolute;
  left: -4%;
  width: 108%;
  bottom: 0;
  height: clamp(200px, 24vw, 340px);
}
.topic-header .pc-diorama svg { height: clamp(120px, 13vw, 190px); }
.pc-layer {
  transform: translate3d(
    calc(var(--px, 0) * var(--d, 0) * 1.4px),
    calc(var(--py, 0) * var(--d, 0) * 1px + var(--sy, 0) * var(--sd, 0) * 1px),
    0);
  filter: drop-shadow(0 -3px 3.5px rgba(59,42,18,.28));
  will-change: transform;
}
.pc-sun { fill: var(--pc-mustard); }
.pc-l1 { fill: #f4cf8e; } .pc-l2 { fill: #eaa98f; } .pc-l3 { fill: #8fb89a; }
.pc-l4 { fill: #3f7d5c; } .pc-l5 { fill: #2a6f73; } .pc-l6 { fill: var(--pc-kraft); }
.pc-glyph { fill: #fbf7ee; font: 700 40px var(--font-mono); }
:root[data-theme="dark"] .pc-sun { fill: #efe7d6; }
:root[data-theme="dark"] .pc-l1 { fill: #3a3a55; } :root[data-theme="dark"] .pc-l2 { fill: #4a3c55; }
:root[data-theme="dark"] .pc-l3 { fill: #2f4a45; } :root[data-theme="dark"] .pc-l4 { fill: #2a3d37; }
:root[data-theme="dark"] .pc-l5 { fill: #22302f; }
:root[data-theme="dark"] .pc-glyph { fill: #5a5470; }

:root[data-theme] .hero,
:root[data-theme] .topic-header {
  background: linear-gradient(180deg, #f6e3c4 0%, #f1d7b4 55%, #ecc9a4 100%);
  color: var(--pc-ink);
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .topic-header {
  background: linear-gradient(180deg, #1f2433 0%, #262538 55%, #2c2536 100%);
}
:root[data-theme] .hero::before,
:root[data-theme] .topic-header::before { display: none; }
:root[data-theme] .hero-grid { display: none; }
:root[data-theme] .hero-inner,
:root[data-theme] .topic-header-inner { position: relative; z-index: 2; }

:root[data-theme] .hero { padding-bottom: clamp(9rem, 19vw, 17rem); margin-bottom: 0; }
:root[data-theme] .hero h1 { color: var(--pc-ink); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
:root[data-theme] .hero h1 span {
  color: var(--pc-terracotta);
  background: none;
  -webkit-text-fill-color: currentColor;
}
:root[data-theme] .hero p { color: var(--pc-ink-soft); }
:root[data-theme] .hero-pill {
  background: var(--pc-cream);
  color: var(--pc-ink);
  border: 0;
  box-shadow: var(--pc-shadow-1);
  transform: rotate(-1.5deg);
}
:root[data-theme] .hero-stat-num { color: var(--pc-ink); }
:root[data-theme] .hero-stat-label { color: var(--pc-ink-soft); }
:root[data-theme] .hero-stat + .hero-stat,
:root[data-theme] .hero-stat { border-color: rgba(28,26,23,.18); }
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] .topic-header h1 { text-shadow: 0 2px 0 rgba(0,0,0,.4); }

:root[data-theme] .topic-header { padding-bottom: clamp(4.5rem, 8vw, 6.5rem); }
:root[data-theme] .topic-header h1 { color: var(--pc-ink); }
:root[data-theme] .topic-header p,
:root[data-theme] .topic-header .topic-desc,
:root[data-theme] .topic-header-inner > p { color: var(--pc-ink-soft); }
:root[data-theme] .topic-header p strong { color: var(--pc-ink); }
:root[data-theme] .topic-breadcrumb,
:root[data-theme] .topic-breadcrumb a { color: var(--pc-ink-soft); }
:root[data-theme] .meta-pill,
:root[data-theme] .topic-header-meta > * {
  background: var(--pc-cream);
  color: var(--pc-ink);
  border: 0;
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .topic-header .callout,
:root[data-theme] .topic-header [class*="aligned"] {
  background: var(--pc-cream);
  color: var(--pc-ink);
  border: 0;
  box-shadow: var(--pc-shadow-2);
}

/* ── Buttons ─────────────────────────────────────────────── */
:root[data-theme] .btn {
  border-radius: 999px;
  box-shadow: var(--pc-shadow-2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
:root[data-theme] .btn:hover { transform: translateY(-2px); box-shadow: var(--pc-shadow-3); }
:root[data-theme] .btn:active { transform: translateY(1px); box-shadow: var(--pc-shadow-1); }
:root[data-theme] .btn-primary { background: var(--pc-ink); color: var(--pc-cream); border: 0; }
:root[data-theme] .btn-outline { background: var(--pc-cream); color: var(--pc-ink); border: 0; }

/* ── Home sections ───────────────────────────────────────── */

:root[data-theme] .section-title { color: var(--pc-ink); }

/* Topic cards: a cream sheet on a coloured backing sheet */
:root[data-theme] .topic-card {
  --stock: var(--pc-teal);
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  border: 0;
  border-radius: 6px;
  box-shadow: var(--pc-shadow-2);
  overflow: visible;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}
:root[data-theme] .topic-card.year12 { --stock: var(--pc-terracotta); }
:root[data-theme] .topic-card.year11 { --stock: var(--pc-sage); }
:root[data-theme] .topic-card::before,
:root[data-theme] .topic-card::after { display: none; }
:root[data-theme] .topic-card { box-shadow: -6px 7px 0 -1px var(--stock), var(--pc-shadow-2); }
:root[data-theme] .topic-card:hover {
  transform: translateY(-6px) rotate(.5deg);
  box-shadow: -10px 12px 0 -1px var(--stock), var(--pc-shadow-3);
}
:root[data-theme] .topic-card .card-icon {
  background: var(--stock);
  color: #fff;
  border: 0;
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .card-title { color: var(--pc-ink); }
:root[data-theme] .card-desc { color: var(--pc-ink-soft); }
:root[data-theme] .topic-tag {
  background: var(--pc-sheet);
  color: var(--pc-ink-soft);
  border: 1px dashed var(--pc-rule-strong);
}
:root[data-theme] .card-arrow { color: var(--stock); }

:root[data-theme] .study-guide-card {
  background: var(--pc-cream);
  border: 0;
  border-radius: 6px;
  box-shadow: var(--pc-shadow-2);
}
:root[data-theme] .year-badge-12 { background: var(--pc-terracotta); color: #fff; }
:root[data-theme] .year-badge-11 { background: var(--pc-sage); color: #fff; }

/* ── Topic page layout ───────────────────────────────────── */
:root[data-theme] .sidebar {
  background: transparent;
  border: 0;
}
:root[data-theme] .sidebar .toc-list,
:root[data-theme] .sidebar > ul {
  background: var(--pc-cream);
  border-radius: 6px;
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .sidebar-label { color: var(--pc-terracotta); }
:root[data-theme] .sidebar a { color: var(--pc-ink-soft); }
:root[data-theme] .sidebar a:hover,
:root[data-theme] .sidebar a.active {
  color: var(--pc-ink);
  background: var(--pc-sheet);
  border-left-color: var(--pc-terracotta);
}

/* Syllabus part: a thick coloured card with two sheets fanned behind */
:root[data-theme] .part-block,
:root[data-theme="dark"] .part-block {
  background: var(--pc-teal);
  background-image: var(--pc-grain);
  color: #fff;
  border: 0;
  border-radius: 6px;
  box-shadow: var(--pc-shadow-2);
  overflow: visible;
}
:root[data-theme] .part-block {
  box-shadow: -5px 5px 0 -1px var(--pc-mustard), 7px 10px 0 -2px var(--pc-terracotta), var(--pc-shadow-2);
  margin-bottom: 2.25rem;
}
:root[data-theme] .part-block:hover {
  transform: translateY(-2px);
  box-shadow: -7px 7px 0 -1px var(--pc-mustard), 10px 13px 0 -2px var(--pc-terracotta), var(--pc-shadow-3);
}
:root[data-theme] .part-block .part-number { color: rgba(255,255,255,.8); }
:root[data-theme] .part-block .part-name { color: #fff; }
:root[data-theme="dark"] .part-block { background-color: #2b5557; }

/* Section heading: a cream index card with a coloured tab down its edge */
:root[data-theme] .content-body h2.syllabus-phase {
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  color: var(--pc-ink);
  border: 0;
  border-radius: 6px;
  box-shadow: var(--pc-shadow-2);
  padding-left: 1.6rem;
  overflow: visible;
}
:root[data-theme] .content-body h2.syllabus-phase::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  border-radius: 6px 0 0 6px;
  background: var(--pc-terracotta);
  -webkit-mask: linear-gradient(#000, #000);
}
:root.pc-y11[data-theme] .content-body h2.syllabus-phase::after { background: var(--pc-sage); }
:root.pc-y11[data-theme] .part-block { background-color: var(--pc-sage); }
:root.pc-y11[data-theme] .part-block { box-shadow: -5px 5px 0 -1px var(--pc-mustard), 7px 10px 0 -2px var(--pc-teal), var(--pc-shadow-2); }
:root[data-theme] .content-body h2.syllabus-phase:hover {
  transform: translateY(-2px);
  box-shadow: var(--pc-shadow-3);
  filter: none;
}
:root[data-theme] .content-body h2.syllabus-phase.section-collapsed { box-shadow: var(--pc-shadow-1); }
:root[data-theme] h2.syllabus-phase .outcome-badge {
  background: var(--pc-sheet);
  color: var(--pc-ink-soft);
  border: 1px dashed var(--pc-rule-strong);
}
:root[data-theme] h2.syllabus-phase .syllabus-concept,
:root[data-theme] h2.syllabus-phase .syllabus-concept em { color: var(--pc-ink-soft); }
:root[data-theme] h2.syllabus-phase .syllabus-concept strong { color: var(--pc-ink); }
:root[data-theme] .section-chevron { background: var(--pc-sheet); box-shadow: var(--pc-shadow-1); }
:root[data-theme] .section-chevron svg { stroke: var(--pc-ink); }
:root[data-theme] h2.syllabus-phase:hover .section-chevron { background: var(--pc-mustard); }

/* Section body: the sheet the card sits on */
:root[data-theme] .section-body {
  background: var(--pc-sheet);
  border: 0;
  margin: -4px 10px 0;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .section-body.section-collapsed { box-shadow: none; }
:root[data-theme] .section-body-inner * + h3,
:root[data-theme] .content-body section * + h3 { border-top: 1px dashed var(--pc-rule-strong); }
:root[data-theme] .content-body h3 { color: var(--pc-ink); }
:root[data-theme] section h4 { color: var(--pc-teal); }

/* Steps */
:root[data-theme] .step-num {
  background: var(--pc-terracotta);
  color: #fff;
  box-shadow: 2px 2px 0 var(--pc-mustard);
  border: 0;
}
:root[data-theme] .step-content h4 { color: var(--pc-ink); }

/* Callouts and cards: notes pinned with a strip of tape */
:root[data-theme] .callout,
:root[data-theme] .info-card,
:root[data-theme] .key-term-item,
:root[data-theme] .video-box {
  background: var(--pc-cream);
  color: var(--pc-ink);
  border: 0;
  border-radius: 4px;
  box-shadow: var(--pc-shadow-2);
  position: relative;
}
:root[data-theme] .callout { border-left: 6px solid var(--pc-teal); }
:root[data-theme] .callout.warning,
:root[data-theme] .callout.warn { border-left-color: var(--pc-mustard); }
:root[data-theme] .callout.danger,
:root[data-theme] .callout.error { border-left-color: var(--pc-terracotta); }
:root[data-theme] .callout.success,
:root[data-theme] .callout.tip { border-left-color: var(--pc-sage); }
:root[data-theme] .callout:hover { transform: rotate(-.3deg); box-shadow: var(--pc-shadow-3); }
:root[data-theme] .info-card::before,
:root[data-theme] .video-box::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 72px;
  height: 18px;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--pc-mustard) 55%, transparent);
  box-shadow: 0 1px 1px rgba(70,45,15,.12);
  opacity: 1;
  border-radius: 1px;
}
:root[data-theme] .info-card:nth-of-type(even)::before { transform: translateX(-50%) rotate(2.5deg); background: color-mix(in srgb, var(--pc-blush) 70%, transparent); }
:root[data-theme="dark"] .info-card::before,
:root[data-theme="dark"] .video-box::before { opacity: .55; }
:root[data-theme] .info-card h4,
:root[data-theme] .key-term-item strong { color: var(--pc-ink); }

/* Code: a sheet of dark card */
:root[data-theme] .code-block {
  background: #1c1a17;
  border: 0;
  border-radius: 6px;
  box-shadow: var(--pc-shadow-2);
}
:root[data-theme] .code-header {
  background: #2a2621;
  border-bottom: 1px dashed #4a443b;
}
:root[data-theme] .code-block pre,
:root[data-theme] .code-block code { color: #efe7d6; background: transparent; }
:root[data-theme] .code-lang { color: #c9b8ff; }
:root[data-theme] .code-block .kw { color: #c9b8ff; }
:root[data-theme] .code-block .str { color: #9fd6a8; }
:root[data-theme] .code-block .cm { color: #8a8273; }
:root[data-theme] .code-block .fn { color: #f2c27b; }
:root[data-theme] :not(pre) > code {
  background: var(--pc-cream);
  color: var(--pc-ink);
  border: 1px solid var(--pc-rule);
}

/* Tables */
:root[data-theme] .table-wrap {
  background: var(--pc-cream);
  border: 0;
  border-radius: 6px;
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] table th {
  background: var(--pc-teal);
  color: #fff;
}
:root[data-theme="dark"] table th { color: #1b1916; }
:root[data-theme] table td { border-color: var(--pc-rule); }
:root[data-theme] table tr:nth-child(even) td { background: var(--pc-sheet); }

/* Diagrams: cream plates */
:root[data-theme] .diagram-block {
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  border: 0;
  border-radius: 6px;
  box-shadow: var(--pc-shadow-2);
}
:root[data-theme] .mermaid,
:root[data-theme="dark"] .mermaid {
  background: var(--pc-kraft);
  background-image: var(--pc-grain);
  border: 1px dashed var(--pc-rule-strong);
  box-shadow: inset 0 2px 6px rgba(70,45,15,.10);
}
:root[data-theme] .mermaid:hover { border-color: var(--pc-teal); box-shadow: inset 0 2px 6px rgba(70,45,15,.10); }
:root[data-theme] .diagram-caption,
:root[data-theme] .diagram-description,
:root[data-theme] .diagram-subtitle { color: var(--pc-ink-soft); }
:root[data-theme] .diagram-caption strong,
:root[data-theme] .diagram-caption strong:nth-of-type(n) {
  background: none;
  color: var(--pc-terracotta);
  padding: 0;
}
:root[data-theme] .trace-block .algo-trace { box-shadow: var(--pc-shadow-2); border: 0; }

/* Dividers become a stitched seam */
:root[data-theme] .divider {
  background: none;
  border: 0;
  height: 2px;
  background-image: linear-gradient(90deg, var(--pc-rule-strong) 50%, transparent 50%);
  background-size: 10px 2px;
  opacity: .8;
}

/* ── Footer: the back of the card ────────────────────────── */
:root[data-theme] footer {
  background: #2a2621;
  background-image: var(--pc-grain);
  color: #d9cfbb;
  border: 0;
  position: relative;
  margin-top: 4rem;
}
:root[data-theme] footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 9px;
  background: #2a2621;
  transform: scaleY(-1);
  -webkit-mask: var(--pc-deckle) 0 0 / 120px 100% repeat-x;
  mask: var(--pc-deckle) 0 0 / 120px 100% repeat-x;
}
:root[data-theme] footer h4 { color: var(--pc-mustard); }
:root[data-theme] footer a { color: #d9cfbb; }
:root[data-theme] footer a:hover { color: #fff; }
:root[data-theme] .footer-name { color: #fff; }
:root[data-theme] .footer-desc,
:root[data-theme] .footer-bottom { color: #a1978a; }

/* Search */
:root[data-theme] .search-bar { background: none; border: 0; box-shadow: none; border-radius: 999px; }
:root[data-theme] .search-input {
  background: var(--pc-cream);
  color: var(--pc-ink);
  border-color: var(--pc-rule);
  box-shadow: var(--pc-shadow-1);
}

/* Focus rings stay visible on paper */
:root[data-theme] :focus-visible { outline: 2px solid var(--pc-plum); outline-offset: 2px; }

@media (max-width: 768px) {
  :root[data-theme] .section-body { margin: -4px 4px 0; }
  
}

@media (prefers-reduced-motion: reduce) {
  .pc-layer { transition: none; transform: none; }
  :root[data-theme] .topic-card,
  :root[data-theme] .topic-card::before,
  :root[data-theme] .part-block::before,
  :root[data-theme] .part-block::after { transition: none; }
}

/* Header banner and active nav: keep contrast on paper */
:root[data-theme] .curriculum-banner { background: var(--pc-cream); color: var(--pc-ink); border: 0; box-shadow: var(--pc-shadow-2); }
:root[data-theme] .curriculum-banner strong { color: var(--pc-ink); }
:root[data-theme] .curriculum-banner > strong:first-child { background: var(--pc-teal); color: #fff; }
:root[data-theme] .curriculum-banner a { color: var(--pc-teal); border-bottom-color: currentColor; }
:root[data-theme] .nav-dropdown.nav-dropdown--has-active .nav-dropdown-btn { background: var(--pc-sheet); color: var(--pc-ink); box-shadow: var(--pc-shadow-1); }
:root[data-theme] .nav-dropdown-menu a.active { background: var(--pc-sheet); color: var(--pc-ink); }
:root[data-theme] .nav-dropdown-menu a:hover { background: var(--pc-sheet); }
:root[data-theme] .nav-dropdown-menu::before { background: linear-gradient(90deg, var(--pc-terracotta), var(--pc-mustard)); }
:root[data-theme] .nav-dropdown-y11 .nav-dropdown-menu::before { background: linear-gradient(90deg, var(--pc-sage), var(--pc-teal)); }

:root[data-theme] .diagram-caption {
  background: var(--pc-sheet);
  border: 1px dashed var(--pc-rule-strong);
  border-radius: 4px;
  box-shadow: none;
}
:root[data-theme] .diagram-caption::before { display: none; }
:root[data-theme] .scroll-top-btn,
:root[data-theme] .back-to-top,
:root[data-theme] #back-to-top {
  background: var(--pc-ink);
  color: var(--pc-cream);
  box-shadow: var(--pc-shadow-2);
}
:root[data-theme] .reading-progress { background: linear-gradient(90deg, var(--pc-terracotta), var(--pc-mustard), var(--pc-sage)); }

/* ── Glossary keywords and inline definition popover ─────── */
.gloss {
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--pc-terracotta, #c4553b);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  border-radius: 2px;
}
.gloss:hover,
.gloss[aria-expanded="true"] {
  background: color-mix(in srgb, var(--pc-mustard, #e0a93b) 30%, transparent);
  text-decoration-style: solid;
}
.gloss-pop {
  position: absolute;
  z-index: 3000;
  background: var(--pc-cream, #fbf7ee);
  background-image: var(--pc-grain);
  color: var(--pc-ink, #1c1a17);
  border-radius: 6px;
  border-top: 6px solid var(--pc-terracotta, #c4553b);
  box-shadow: var(--pc-shadow-3);
  padding: .9rem 1rem .8rem;
  font-size: .9rem;
  line-height: 1.55;
}
.gloss-pop[hidden] { display: none; }
.gloss-name { font: 600 1.05rem var(--font-display); margin: 0 1.6rem .35rem 0; }
.gloss-def { margin: 0 0 .5rem; }
.gloss-ex {
  margin: 0 0 .6rem;
  padding: .45rem .6rem;
  background: var(--pc-sheet, #f4ecdb);
  border-left: 3px solid var(--pc-sage, #3f7d5c);
  border-radius: 3px;
  font-size: .85rem;
}
.gloss-ex[hidden] { display: none; }
.gloss-more { font-size: .82rem; font-weight: 600; color: var(--pc-teal, #2a6f73); }
.gloss-close {
  position: absolute; top: .45rem; right: .45rem;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: var(--pc-sheet, #f4ecdb);
  color: var(--pc-ink, #1c1a17);
  cursor: pointer;
}

/* NESA "Including" list under a dot point */
.syllabus-including {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .4rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: .8rem;
}
.syllabus-including::before {
  content: 'Including';
  font: italic 600 .85rem var(--font-display);
  color: var(--pc-muted, #6c6558);
  margin-right: .25rem;
  align-self: center;
}
.syllabus-including li {
  background: var(--pc-cream, #fbf7ee);
  border: 1px dashed var(--pc-rule-strong, #b9ab8f);
  border-radius: 999px;
  padding: .15rem .65rem;
  color: var(--pc-ink-soft, #4a443b);
}
.callout pre.inline-pseudo {
  margin: .6rem 0;
  padding: .6rem .8rem;
  background: #1c1a17;
  color: #efe7d6;
  border-radius: 4px;
  font: .8rem/1.55 var(--font-mono);
  overflow-x: auto;
}

/* ── "Check your understanding" quizzes (js/quiz.js) ─────── */
.quiz {
  position: relative;
  margin: 2rem 0 2.5rem;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--pc-cream, #fbf7ee);
  background-image: var(--pc-grain);
  border-radius: 6px;
  border-top: 6px solid var(--pc-mustard, #e0a93b);
  box-shadow: var(--pc-shadow-2);
  color: var(--pc-ink, #1c1a17);
}
.quiz:empty { display: none; }
.quiz-kicker { font: 600 1.15rem var(--font-display); margin: 0; }
.quiz-sub { margin: .15rem 0 1rem; color: var(--pc-muted, #6c6558); font-size: .9rem; }
.quiz-q {
  border: 0;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  background: var(--pc-sheet, #f4ecdb);
  border-radius: 4px;
  border-left: 4px solid var(--pc-rule-strong, #b9ab8f);
}
.quiz-q.is-right { border-left-color: var(--pc-sage, #3f7d5c); }
.quiz-q.is-wrong { border-left-color: var(--pc-terracotta, #c4553b); }
.quiz-q legend { font-weight: 600; padding: 0; margin-bottom: .5rem; display: flex; gap: .55rem; align-items: baseline; float: left; width: 100%; }
.quiz-q legend + * { clear: both; }
.quiz-num {
  flex: none;
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--pc-ink, #1c1a17);
  color: var(--pc-cream, #fbf7ee);
  font: 600 .75rem var(--font-mono);
}
.quiz-opt {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .45rem .6rem;
  margin: .2rem 0;
  border-radius: 4px;
  cursor: pointer;
}
.quiz-opt:hover { background: var(--pc-cream, #fbf7ee); }
.quiz-opt input { margin-top: .3rem; accent-color: var(--pc-teal, #2a6f73); flex: none; }
.quiz-opt:has(input:disabled) { cursor: default; }
.quiz-q.is-right .quiz-opt.is-answer,
.quiz-q.is-wrong .quiz-opt.is-answer { background: color-mix(in srgb, var(--pc-sage, #3f7d5c) 22%, transparent); font-weight: 600; }
.quiz-feedback { margin: .5rem 0 0; font-size: .88rem; }
.quiz-feedback[hidden] { display: none; }
.quiz-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.quiz-btn {
  font: 600 .9rem var(--font-body);
  padding: .55rem 1.1rem;
  min-height: 40px;
  border-radius: 999px;
  border: 0;
  background: var(--pc-cream, #fbf7ee);
  color: var(--pc-ink, #1c1a17);
  box-shadow: var(--pc-shadow-1);
  cursor: pointer;
}
.quiz-btn[hidden] { display: none; }
.quiz-check { background: var(--pc-ink, #1c1a17); color: var(--pc-cream, #fbf7ee); }
.quiz-score { margin: 0; font-weight: 600; }

/* Phone contents button and sheet */
:root[data-theme] .mobile-toc-fab {
  background: var(--pc-ink);
  color: var(--pc-cream);
  box-shadow: var(--pc-shadow-2);
}
:root[data-theme] .mobile-toc-panel {
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  color: var(--pc-ink);
}

/* ── Sidebar contents: a compact index card ──────────────── */
:root[data-theme] .sidebar .toc-title {
  font: italic 600 .95rem var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  color: var(--pc-ink);
  margin: 0 0 .5rem;
  padding: 0 .9rem;
}
:root[data-theme] .sidebar .toc-list {
  padding: .5rem .45rem .65rem;
  border-radius: 6px;
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .sidebar .sidebar-label {
  display: block;
  margin: .7rem .45rem .2rem;
  padding: .55rem 0 0;
  border-top: 1px dashed var(--pc-rule-strong);
  font: 600 .66rem/1.35 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pc-muted);
}
:root[data-theme] .sidebar .sidebar-label:first-child { margin-top: .1rem; padding-top: 0; border-top: 0; }
:root[data-theme] .sidebar .sidebar-label.toc-part-active { color: var(--pc-terracotta); }
:root.pc-y11[data-theme] .sidebar .sidebar-label.toc-part-active { color: var(--pc-sage); }
:root[data-theme] .sidebar .toc-list a {
  display: flex;
  gap: .45rem;
  padding: .3rem .5rem;
  margin: 1px 0;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--pc-ink-soft);
  border-left: 0;
  border-radius: 4px;
}
:root[data-theme] .sidebar .toc-num {
  flex: none;
  min-width: 1.35rem;
  font: 500 .72rem/1.6 var(--font-mono);
  color: var(--pc-muted);
}
:root[data-theme] .sidebar .toc-list a:hover { background: var(--pc-sheet); color: var(--pc-ink); }
:root[data-theme] .sidebar .toc-list a.active {
  background: var(--pc-sheet);
  color: var(--pc-ink);
  font-weight: 600;
  padding-left: .5rem;
  border-left: 0;
  box-shadow: inset 3px 0 0 var(--pc-terracotta);
}
:root.pc-y11[data-theme] .sidebar .toc-list a.active { box-shadow: inset 3px 0 0 var(--pc-sage); }
:root[data-theme] .sidebar .toc-list a.active .toc-num { color: var(--pc-terracotta); }
:root.pc-y11[data-theme] .sidebar .toc-list a.active .toc-num { color: var(--pc-sage); }

/* ── Figures: one container for every diagram ────────────── */
.content-body { counter-reset: figure; }
.figure {
  counter-increment: figure;
  margin: 1.75rem 0;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--pc-cream, #fbf7ee);
  background-image: var(--pc-grain);
  border-radius: 6px;
  box-shadow: var(--pc-shadow-2);
  color: var(--pc-ink, #1c1a17);
}
.figure-head { margin: 0 0 .75rem; }
.figure-kicker {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: baseline;
  margin: 0 0 .2rem;
  font: 600 .7rem var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-muted, #6c6558);
}
.figure-kicker::before { content: 'Figure ' counter(figure); color: var(--pc-terracotta, #c4553b); }
.figure-kind { font-weight: 600; }
.figure-kind::before { content: '·'; margin-right: .6rem; color: var(--pc-rule-strong, #b9ab8f); }
.content-body .figure .figure-title {
  font: 600 1.1rem/1.3 var(--font-display);
  margin: 0 0 .3rem;
  padding: 0;
  color: var(--pc-ink, #1c1a17);
  border: 0;
}
.content-body .figure .figure-title::before { display: none; }
.figure-lead { margin: 0; color: var(--pc-ink-soft, #4a443b); font-size: .92rem; line-height: 1.55; }
.figure-canvas {
  position: relative;
  margin: .5rem 0 .9rem;
  padding: 1rem;
  background: #fffdf8;
  border: 1px solid var(--pc-rule, #d8ccb4);
  border-radius: 4px;
  overflow-x: auto;
}
:root[data-theme="dark"] .figure-canvas { background: #1f1c18; }
:root[data-theme] .figure .mermaid {
  margin: 0; padding: 0; min-height: 0;
  background: none; border: 0; box-shadow: none;
}
.figure-canvas svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.figure-canvas .mermaid svg { max-height: 640px; }
.figure-zoom {
  position: absolute; top: .45rem; right: .45rem;
  font: 600 .72rem var(--font-body);
  padding: .3rem .6rem;
  border: 1px solid var(--pc-rule, #d8ccb4);
  border-radius: 999px;
  background: var(--pc-cream, #fbf7ee);
  color: var(--pc-ink-soft, #4a443b);
  cursor: zoom-in;
}
.figure-notes { display: grid; gap: .75rem 1.25rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); font-size: .88rem; line-height: 1.55; }
@container (max-width: 560px) { .figure-notes { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .figure-notes { grid-template-columns: 1fr; } }
.figure-notes h5 { font: 600 .78rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-muted, #6c6558); margin: 0 0 .3rem; }
.figure-notes ul { margin: 0; padding-left: 1.1rem; }
.figure-notes li { margin: .15rem 0; }
.figure-try {
  margin: 0;
  padding: .6rem .75rem;
  background: var(--pc-sheet, #f4ecdb);
  border-left: 3px solid var(--pc-mustard, #e0a93b);
  border-radius: 3px;
}
.figure-try strong { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-muted, #6c6558); margin-bottom: .15rem; }

/* NESA symbol key */
.nesa-key { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: center; margin: 0; padding: 0; list-style: none; }
.nesa-key li { display: grid; justify-items: center; gap: .3rem; font-size: .78rem; color: var(--pc-ink-soft, #4a443b); }
.nesa-key svg { width: 110px; height: 52px; }

/* NESA structure charts and DFDs (js/nesa-diagrams.js) */
.nesa-diagram svg { width: 100%; max-height: 560px; }
.nd-box { fill: var(--pc-cream, #fbf7ee); stroke: var(--pc-ink, #1c1a17); stroke-width: 1.4; }
.nd-store-fill { fill: var(--pc-cream, #fbf7ee); stroke: none; }
.nd-store { fill: none; stroke: var(--pc-ink, #1c1a17); stroke-width: 1.4; }
.nd-line { stroke: var(--pc-ink, #1c1a17); stroke-width: 1.2; }
.nd-flow, .nd-repeat, .nd-couple { fill: none; stroke: var(--pc-ink, #1c1a17); stroke-width: 1.2; }
.nd-arrowhead { fill: var(--pc-ink, #1c1a17); }
.nd-diamond { fill: var(--pc-cream, #fbf7ee); stroke: var(--pc-ink, #1c1a17); stroke-width: 1.2; }
.nd-data { fill: var(--pc-cream, #fbf7ee); stroke: var(--pc-ink, #1c1a17); stroke-width: 1.2; }
.nd-flag { fill: var(--pc-ink, #1c1a17); }
.nd-text { font: 500 13px var(--font-body); fill: var(--pc-ink, #1c1a17); }
.nd-note { font: italic 12px var(--font-body); fill: var(--pc-ink-soft, #4a443b); }
.nd-flow-label { font: italic 12.5px var(--font-body); fill: var(--pc-ink-soft, #4a443b); stroke: #fffdf8; stroke-width: 4px; stroke-linejoin: round; }
:root[data-theme="dark"] .nd-flow-label { stroke: #1f1c18; }
.figure-canvas--trace { padding: 0; background: none; border: 0; overflow: visible; }
.figure-canvas--trace .algo-trace { margin: 0; }
.figure-notes p { margin: 0 0 .35rem; }
.figure-controls { color: var(--pc-muted, #6c6558); font-size: .82rem; }
.figure-kicker .figure-zoom { position: static; margin-left: auto; text-transform: none; letter-spacing: 0; }
.figure-kicker .figure-zoom:hover { background: var(--pc-sheet, #f4ecdb); color: var(--pc-ink, #1c1a17); }
.figure-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem; align-items: start; }
@media (max-width: 640px) { .figure-pair { grid-template-columns: 1fr; } }
.figure-pair-label { margin: 0 0 .35rem; text-align: center; font: 600 .75rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-muted, #6c6558); }

/* ── Topic cards: raking light follows the pointer (set by main.js) ── */
:root[data-theme] .topic-card:hover {
  background-image:
    radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.55), transparent 55%),
    var(--pc-grain);
}
:root[data-theme="dark"] .topic-card:hover {
  background-image:
    radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255,240,210,.08), transparent 55%),
    var(--pc-grain);
}

/* ── Widescreen: use the room, and scale type so lines stay readable ── */
@media (min-width: 1680px) {
  html { font-size: 106.25%; }
  :root[data-theme] .page-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 3rem; }
}
@media (min-width: 2200px) {
  html { font-size: 112.5%; }
}

/* ── Phones: give prose the width back from the step rail ── */
@media (max-width: 480px) {
  :root[data-theme] .step { gap: .7rem; }
  :root[data-theme] .step-num { width: 28px; height: 28px; font-size: .8rem; flex-shrink: 0; }
  :root[data-theme] .step:not(:last-child) .step-num::after { left: 13px; top: 32px; }
}
@media (max-width: 600px) {
  :root[data-theme] .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; flex-direction: row; }
  :root[data-theme] .hero-stat { border: 0; padding: 0; min-width: 0; }
  :root[data-theme] .hero-stat + .hero-stat::before { left: -.25rem; }
  :root[data-theme] .hero-stat-num { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  :root[data-theme] .hero-stat-label { font-size: .72rem; }
}

/* ============================================================
   Polish pass: navigation rail and breakout boxes
   ============================================================ */

/* ── Nav: a recessed paper rail holding raised tabs ── */
:root[data-theme] .nav-inner { height: var(--bar-h); transition: height 240ms cubic-bezier(.2,.7,.2,1); }
:root[data-theme] .navbar.scrolled .nav-inner { height: calc(var(--bar-h) - 8px); }
:root[data-theme] .navbar.scrolled::after { filter: drop-shadow(0 4px 4px rgba(70,45,15,.22)); }
:root[data-theme] .nav-brand { gap: .75rem; }
:root[data-theme] .nav-logo { transition: transform 260ms cubic-bezier(.3,1.6,.5,1), box-shadow 260ms ease; }
:root[data-theme] .nav-brand:hover .nav-logo {
  transform: translate(-2px, -2px) rotate(-4deg);
  box-shadow: 3px 3px 0 var(--pc-mustard), 6px 6px 0 var(--pc-terracotta);
}
:root[data-theme] .nav-title { font-size: 1.02rem; letter-spacing: -.01em; }
:root[data-theme] .nav-subtitle { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }

@media (min-width: 769px) {
  :root[data-theme] .nav-links {
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-kraft) 55%, var(--pc-cream));
    box-shadow: inset 0 1px 2px rgba(70,45,15,.16), inset 0 -1px 0 rgba(255,255,255,.55);
  }
  :root[data-theme] .nav-links > li > a,
  :root[data-theme] .nav-dropdown-btn {
    border-radius: 999px;
    padding: .42rem .9rem;
    font-size: .86rem;
    font-weight: 600;
    background: transparent;
    box-shadow: none;
    transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
  }
  :root[data-theme] .nav-links > li > a:hover,
  :root[data-theme] .nav-dropdown-btn:hover,
  :root[data-theme] .nav-dropdown.open .nav-dropdown-btn {
    background: color-mix(in srgb, var(--pc-cream) 70%, transparent);
    box-shadow: none;
    color: var(--pc-ink);
  }
  /* Current section: a raised card with a coloured tab */
  :root[data-theme] .nav-links > li > a[aria-current],
  :root[data-theme] .nav-dropdown.nav-dropdown--has-active .nav-dropdown-btn {
    position: relative;
    background: var(--pc-cream);
    color: var(--pc-ink);
    box-shadow: var(--pc-shadow-1);
  }
  :root[data-theme] .nav-links > li > a[aria-current]::after,
  :root[data-theme] .nav-dropdown.nav-dropdown--has-active .nav-dropdown-btn::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 3px;
    width: 18px; height: 3px;
    margin-left: -9px;
    border-radius: 3px;
    background: var(--pc-teal);
  }
  :root[data-theme] .nav-dropdown-y12.nav-dropdown--has-active .nav-dropdown-btn::after { background: var(--pc-terracotta); }
  :root[data-theme] .nav-dropdown-y11.nav-dropdown--has-active .nav-dropdown-btn::after { background: var(--pc-sage); }
  :root[data-theme] .nav-links .badge {
    font-size: .6rem;
    padding: .12rem .42rem;
    border-radius: 4px;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(-3deg);
    box-shadow: 0 1px 0 rgba(70,45,15,.25);
  }
  :root[data-theme] .nav-chevron { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
  :root[data-theme] .nav-dropdown.open .nav-chevron { transform: rotate(180deg); }
}

/* Dropdown: a card that unfolds from the rail */
:root[data-theme] .nav-dropdown-menu {
  border: 0;
  border-radius: 10px;
  padding: .45rem;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  transform-origin: top center;
}
:root[data-theme] .nav-dropdown-menu::before { height: 4px; border-radius: 10px 10px 0 0; }
:root[data-theme] .nav-dropdown-menu a {
  position: relative;
  border-radius: 6px;
  padding-right: 2rem;
  font-size: .9rem;
  transition: background 160ms ease, padding 200ms cubic-bezier(.2,.7,.2,1), color 160ms ease;
}
:root[data-theme] .nav-dropdown-menu a::after {
  content: '→';
  position: absolute;
  right: .8rem; top: 50%;
  transform: translate(-6px, -50%);
  opacity: 0;
  color: var(--pc-terracotta);
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), opacity 160ms ease;
}
:root[data-theme] .nav-dropdown-y11 .nav-dropdown-menu a::after { color: var(--pc-sage); }
:root[data-theme] .nav-dropdown-menu a:hover { padding-left: 1.15rem; }
:root[data-theme] .nav-dropdown-menu a:hover::after { opacity: 1; transform: translate(0, -50%); }
:root[data-theme] .nav-dropdown-menu a.active,
:root[data-theme] .nav-dropdown-menu a[aria-current] { box-shadow: none; font-weight: 700; }

:root[data-theme] .btn-icon {
  border-radius: 50%;
  border: 0;
  transition: transform 220ms cubic-bezier(.3,1.6,.5,1), box-shadow 180ms ease;
}
:root[data-theme] .btn-icon:hover { transform: rotate(-14deg) translateY(-1px); box-shadow: var(--pc-shadow-2); }
:root[data-theme] .btn-icon:active { transform: scale(.94); }

/* ── Callouts: tinted stock with a stamped label ── */
:root[data-theme] .callout {
  --tone: var(--pc-teal);
  background: color-mix(in srgb, var(--tone) 7%, var(--pc-cream));
  background-image: var(--pc-grain);
  color: var(--pc-ink);
  border: 0;
  border-left: 0;
  border-radius: 4px 8px 8px 4px;
  padding: 1rem 1.25rem 1.05rem 1.5rem;
  box-shadow: inset 5px 0 0 var(--tone), var(--pc-shadow-1);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease;
}
:root[data-theme] .callout.warning,
:root[data-theme] .callout.warn   { --tone: #b7811d; }
:root[data-theme] .callout.danger,
:root[data-theme] .callout.error  { --tone: var(--pc-terracotta); }
:root[data-theme] .callout.success,
:root[data-theme] .callout.tip    { --tone: var(--pc-sage); }
:root[data-theme] .callout.key    { --tone: var(--pc-plum); }
:root[data-theme] .callout.assessor { --tone: #8a5a2b; }
:root[data-theme="dark"] .callout.warning,
:root[data-theme="dark"] .callout.warn { --tone: var(--pc-mustard); }
/* Folded corner */
:root[data-theme] .callout::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 16px; height: 16px;
  border-radius: 0 8px 0 4px;
  background: linear-gradient(225deg, var(--pc-kraft) 50%, color-mix(in srgb, var(--tone) 22%, var(--pc-sheet)) 50%);
  box-shadow: -1px 1px 2px rgba(70,45,15,.18);
}
:root[data-theme] .callout:hover {
  transform: translateY(-2px);
  box-shadow: inset 5px 0 0 var(--tone), var(--pc-shadow-2);
}
/* The leading label becomes a small stamped tag on its own line */
:root[data-theme] .callout > strong:first-child {
  display: table;
  margin: 0 0 .45rem;
  padding: .14rem .5rem .1rem;
  border-radius: 3px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pc-cream);
  background: var(--tone);
  transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 rgba(70,45,15,.25);
}
:root[data-theme="dark"] .callout > strong:first-child { color: #1b1916; }
:root[data-theme] .callout.success > em { color: var(--pc-ink-soft); }
:root[data-theme] .callout.success:has(> em) {
  font-family: var(--font-display);
  font-size: 1rem;
}

/* Curriculum banner keeps its row layout with a stamped tag */
:root[data-theme] .curriculum-banner {
  border-radius: 8px;
  box-shadow: inset 5px 0 0 var(--pc-teal), var(--pc-shadow-2);
}
:root[data-theme] .curriculum-banner::after { display: none; }
:root[data-theme] .curriculum-banner > strong:first-child {
  display: inline-block;
  margin: 0 .5rem .2rem 0;
  background: var(--pc-teal);
  color: #fff;
}

/* ── Info cards and key terms ── */
:root[data-theme] .info-card {
  border: 0;
  border-radius: 6px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-2);
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}
:root[data-theme] .info-card:hover { transform: translateY(-3px) rotate(-.25deg); box-shadow: var(--pc-shadow-3); }
:root[data-theme] .info-card h4 {
  font-size: 1.05rem;
  color: var(--pc-ink);
  padding-bottom: .5rem;
  margin-bottom: .6rem;
  border-bottom: 1px dashed var(--pc-rule-strong);
}
:root[data-theme] .info-card p { color: var(--pc-ink-soft); }

:root[data-theme] .key-term-item {
  --tone: var(--pc-teal);
  position: relative;
  border: 0;
  border-radius: 6px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: inset 0 3px 0 var(--tone), var(--pc-shadow-1);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease;
}
:root[data-theme] .key-term-item:nth-child(4n+2) { --tone: var(--pc-terracotta); }
:root[data-theme] .key-term-item:nth-child(4n+3) { --tone: var(--pc-mustard); }
:root[data-theme] .key-term-item:nth-child(4n+4) { --tone: var(--pc-sage); }
:root[data-theme] .key-term-item:hover { transform: translateY(-3px); box-shadow: inset 0 3px 0 var(--tone), var(--pc-shadow-2); }
:root[data-theme] .key-term-item > strong:first-child { font-size: .95rem; }
:root[data-theme] .key-term-item > span { color: var(--pc-ink-soft); }

/* ── Video box ── */
:root[data-theme] .video-box { border: 0; border-radius: 8px; box-shadow: var(--pc-shadow-2); }
:root[data-theme] .video-list a { transition: color 160ms ease, padding 200ms cubic-bezier(.2,.7,.2,1); }
:root[data-theme] .video-list a:hover { padding-left: .25rem; color: var(--pc-terracotta); }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .callout,
  :root[data-theme] .info-card,
  :root[data-theme] .key-term-item,
  :root[data-theme] .nav-logo,
  :root[data-theme] .btn-icon,
  :root[data-theme] .nav-dropdown-menu a { transition: none; }
  :root[data-theme] .callout:hover,
  :root[data-theme] .info-card:hover,
  :root[data-theme] .key-term-item:hover { transform: none; }
}
@media (min-width: 769px) {
  :root[data-theme] .nav-links { flex: 0 0 auto; margin-inline: auto; }
}
:root[data-theme] .callout > strong:first-child { font-family: var(--font-body, system-ui, sans-serif); font-style: normal; }

/* ============================================================
   Polish pass: topic cards and footer
   ============================================================ */

/* ── Grid: no orphans. Four cards pair up, three sit in a row ── */
@media (min-width: 900px) {
  .topics-grid:has(> .topic-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topics-grid:has(> .topic-card:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1680px) {
  .topics-grid:has(> .topic-card:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Cards: a cream sheet on a softly offset coloured sheet that fans out on hover ── */
:root[data-theme] .topic-card {
  --backing: color-mix(in srgb, var(--stock) 38%, var(--pc-kraft));
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.35rem;
  box-shadow: -4px 5px 0 -1px var(--backing), var(--pc-shadow-2);
}
:root[data-theme="dark"] .topic-card { --backing: color-mix(in srgb, var(--stock) 45%, #1b1916); }
:root[data-theme] .topic-card:hover {
  box-shadow: -9px 11px 0 -1px var(--stock), var(--pc-shadow-3);
}
:root[data-theme] .topic-card .card-desc { flex: 1; }
:root[data-theme] .topic-card .card-icon {
  border-radius: 10px;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--stock) 45%, var(--pc-mustard)), var(--pc-shadow-1);
  transition: transform 320ms cubic-bezier(.3,1.6,.5,1);
}
:root[data-theme] .topic-card:hover .card-icon { transform: rotate(-6deg) scale(1.06); }
:root[data-theme] .topic-card .card-title {
  font-size: 1.22rem;
  letter-spacing: -.01em;
  background: linear-gradient(var(--stock), var(--stock)) 0 100% / 0 2px no-repeat;
  transition: background-size 320ms cubic-bezier(.2,.7,.2,1);
  width: fit-content;
}
:root[data-theme] .topic-card:hover .card-title { background-size: 100% 2px; }
:root[data-theme] .topic-card .card-desc { line-height: 1.6; }
:root[data-theme] .topic-tag {
  border-radius: 4px;
  border-style: solid;
  border-color: var(--pc-rule);
  font-weight: 600;
}
:root[data-theme] .card-arrow {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stock) 12%, var(--pc-cream));
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), background 200ms ease, color 200ms ease;
}
:root[data-theme] .topic-card:hover .card-arrow {
  background: var(--stock);
  color: #fff;
  transform: translateX(4px);
}

/* ── Footer: dark card stock with a clear rhythm ── */
:root[data-theme] footer { padding-top: clamp(3rem, 5vw, 4.5rem); }
:root[data-theme] .footer-inner { gap: clamp(1.75rem, 3vw, 3rem); }
:root[data-theme] .footer-desc { color: #b3a996; max-width: 38ch; line-height: 1.65; }
:root[data-theme] .footer-name { font-family: var(--font-display); font-size: 1.15rem; }
:root[data-theme] footer h4 {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
  letter-spacing: .14em;
  margin-bottom: 1rem;
}
:root[data-theme] footer h4::before {
  content: '';
  width: 14px; height: 3px;
  border-radius: 2px;
  background: currentColor;
}
:root[data-theme] .footer-col-y12 h4 { color: #f0a58f; }
:root[data-theme] .footer-col-y11 h4 { color: #9fcfae; }
:root[data-theme] .footer-col a {
  width: fit-content;
  padding: .18rem 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  text-decoration: none;
  transition: color 180ms ease, background-size 260ms cubic-bezier(.2,.7,.2,1), transform 220ms cubic-bezier(.2,.7,.2,1);
}
:root[data-theme] .footer-col a:hover { background-size: 100% 1px; transform: translateX(3px); }
:root[data-theme] .footer-bottom {
  border-top: 1px dashed rgba(217,207,187,.18);
  font-size: .78rem;
  letter-spacing: .02em;
}

@media (max-width: 768px) {
  :root[data-theme] .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  :root[data-theme] .footer-inner > :first-child { grid-column: 1 / -1; }
  :root[data-theme] .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
  }
}
@media (max-width: 480px) { :root[data-theme] .footer-inner { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .topic-card .card-icon,
  :root[data-theme] .card-arrow,
  :root[data-theme] .footer-col a { transition: none; }
  :root[data-theme] .topic-card:hover .card-icon,
  :root[data-theme] .topic-card:hover .card-arrow,
  :root[data-theme] .footer-col a:hover { transform: none; }
}

/* ============================================================
   Polish pass: topic header, contents, subheadings,
   expand/collapse motion and reading progress
   ============================================================ */
:root { --pc-year: var(--pc-terracotta); --pc-ease-out: cubic-bezier(.22,1,.36,1); --pc-spring: cubic-bezier(.34,1.56,.64,1); }
:root.pc-y11 { --pc-year: var(--pc-sage); }

/* ── Expand / collapse: rows ease open, content fades and settles in ── */
:root[data-theme] .section-body {
  transition: grid-template-rows 520ms var(--pc-ease-out), box-shadow 300ms ease, margin 520ms var(--pc-ease-out);
}
:root[data-theme] .section-body.section-collapsed {
  max-height: none;              /* base CSS snapped the collapse shut */
  transition: grid-template-rows 380ms cubic-bezier(.4,0,.2,1), box-shadow 300ms ease, margin 380ms ease;
}
:root[data-theme] .section-body-inner,
:root[data-theme] .part-group-inner {
  transition: opacity 360ms ease 90ms, transform 520ms var(--pc-ease-out), padding 480ms var(--pc-ease-out);
}
:root[data-theme] .section-body.section-collapsed .section-body-inner,
:root[data-theme] .part-group.part-collapsed .part-group-inner {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 160ms ease, transform 380ms ease, padding 380ms ease;
}
:root[data-theme] .part-group { transition: grid-template-rows 560ms var(--pc-ease-out), margin 560ms var(--pc-ease-out); }
:root[data-theme] .part-group.part-collapsed { transition: grid-template-rows 400ms cubic-bezier(.4,0,.2,1), margin 400ms ease; }

:root[data-theme] .section-chevron {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: transform 420ms var(--pc-spring), background 180ms ease;
}
:root[data-theme] .section-chevron svg { transition: none; }
:root[data-theme] h2.syllabus-phase.section-collapsed .section-chevron { transform: rotate(-90deg); }
:root[data-theme] .part-chevron svg { transition: transform 460ms var(--pc-spring); }
:root[data-theme] h2.syllabus-phase:active .section-chevron,
:root[data-theme] .part-block:active .part-chevron { scale: .9; }

/* ── Topic header ── */
:root[data-theme] .topic-breadcrumb {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
:root[data-theme] .topic-breadcrumb a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 240ms var(--pc-ease-out), color 160ms ease;
}
:root[data-theme] .topic-breadcrumb a:hover { color: var(--pc-ink); background-size: 100% 1px; }
:root[data-theme] .topic-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -.025em;
  line-height: 1.04;
  text-wrap: balance;
}
:root[data-theme] .topic-header-inner > p { max-width: 62ch; text-wrap: pretty; }
:root[data-theme] .topic-header-meta { gap: .5rem; align-items: center; }
:root[data-theme] .topic-header-meta > .meta-pill {
  border-radius: 6px;
  padding: .38rem .75rem;
  font-size: .78rem;
  border: 0;
  background: var(--pc-cream);
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .topic-header-meta > .meta-pill:first-child {
  background: var(--pc-year);
  color: #fff;
  transform: rotate(-1.5deg);
}
:root[data-theme="dark"] .topic-header-meta > .meta-pill:first-child { color: #1b1916; }

/* ── Contents sidebar ── */
:root[data-theme] .sidebar .toc-list a {
  position: relative;
  transition: background 160ms ease, color 160ms ease, padding 240ms var(--pc-ease-out);
}
:root[data-theme] .sidebar .toc-list a:hover { padding-left: calc(var(--toc-pad, .75rem) + 3px); }
:root[data-theme] .sidebar .toc-list a.active,
:root[data-theme] .sidebar .toc-list a:hover { border-left-color: var(--pc-year); }
:root[data-theme] .toc-part-label { color: var(--pc-muted); transition: color 200ms ease; }
:root[data-theme] .toc-part-label.toc-part-active { color: var(--pc-year); }

/* ── Subheadings: a clean serif line with a small cut-paper marker ── */
:root[data-theme] .content-body h3,
:root[data-theme="light"] .content-body h3,
:root[data-theme="dark"] .content-body h3 {
  border: 0;
  border-image: none;
  padding: 0 0 0 1.15rem;
  font-size: clamp(1.12rem, 1.45vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pc-ink);
}
:root[data-theme] .content-body h3::after { display: none; }
:root[data-theme] .content-body h3::before {
  content: '';
  position: absolute;
  left: 0; top: .42em;
  width: .5em; height: .5em;
  border-radius: 2px;
  background: var(--pc-year);
  transform: rotate(45deg);
  box-shadow: 1px 1px 0 var(--pc-mustard);
}
:root[data-theme] .section-body-inner * + h3,
:root[data-theme] .content-body section * + h3 {
  border-top: 1px dashed var(--pc-rule-strong);
  margin-top: 2rem;
  padding-top: 1.5rem;
}
:root[data-theme] .section-body-inner * + h3::before,
:root[data-theme] .content-body section * + h3::before { top: calc(1.5rem + .42em); }
:root[data-theme] .content-body h4,
:root[data-theme] section h4 { letter-spacing: -.005em; }

/* ── Reading progress ── */
.pg-meter {
  --pg: 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--pc-ink-soft);
}
.pg-bar {
  position: relative;
  width: 72px; height: 7px;
  border-radius: 7px;
  background: var(--pc-rule);
  box-shadow: inset 0 1px 1px rgba(70,45,15,.18);
  overflow: hidden;
}
.pg-fill {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--pc-year, var(--pc-teal));
  transform-origin: left;
  transform: scaleX(var(--pg));
  transition: transform 700ms var(--pc-ease-out, ease);
}
.pg-done .pg-fill { background: var(--pc-sage); }
.pg-header {
  padding: .3rem .7rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pc-cream) 70%, transparent);
  box-shadow: inset 0 1px 2px rgba(70,45,15,.14);
}
.pg-sidebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 0 .6rem;
  padding: 0 .15rem;
}
.pg-sidebar .pg-bar { width: 84px; }
.pg-reset {
  border: 0;
  background: none;
  font: inherit;
  font-size: .7rem;
  color: var(--pc-muted);
  cursor: pointer;
  padding: .15rem .3rem;
  border-radius: 4px;
}
.pg-reset:hover { color: var(--pc-terracotta); background: var(--pc-sheet); }
.pg-card { margin: .1rem 0 .9rem; }
.pg-card .pg-fill { background: var(--stock, var(--pc-teal)); }

/* Heading stamp */
.pg-stamp {
  position: absolute;
  top: .85rem; right: 3.4rem;
  padding: .12rem .45rem;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pc-sage);
  border: 1.5px solid currentColor;
  opacity: 0;
  transform: rotate(-6deg) scale(1.5);
  transition: opacity 200ms ease, transform 420ms var(--pc-spring, ease);
  pointer-events: none;
}
h2.pg-seen .pg-stamp { opacity: .85; transform: rotate(-6deg) scale(1); }

/* Contents ticks: a hollow ring until opened, then a filled tick */
:root[data-theme] .sidebar .toc-list a.pg-tracked,
:root[data-theme] .mobile-toc-list a.pg-tracked { position: relative; padding-right: 2rem; }
a.pg-tracked::after {
  content: '';
  position: absolute;
  right: .55rem; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--pc-rule-strong);
  transition: background 240ms ease, border-color 240ms ease, transform 360ms var(--pc-spring, ease);
}
a.pg-seen::after {
  border-color: var(--pc-sage);
  background: var(--pc-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  transform: scale(1.08);
}

@media (max-width: 768px) {
  .pg-stamp { position: static; display: none; }
  h2.pg-seen .pg-stamp { display: inline-block; margin-top: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .section-body,
  :root[data-theme] .section-body.section-collapsed,
  :root[data-theme] .section-body-inner,
  :root[data-theme] .part-group,
  :root[data-theme] .part-group.part-collapsed,
  :root[data-theme] .part-group-inner,
  :root[data-theme] .section-chevron,
  :root[data-theme] .part-chevron svg,
  .pg-fill, .pg-stamp, a.pg-tracked::after { transition: none; }
  :root[data-theme] .section-collapsed .section-body-inner,
  :root[data-theme] .part-collapsed .part-group-inner { transform: none; }
}

:root[data-theme] .mobile-toc-list a { display: flex; gap: .65rem; align-items: baseline; }
:root[data-theme] .mobile-toc-list .toc-num { min-width: 1.4em; color: var(--pc-muted); font-variant-numeric: tabular-nums; }
:root[data-theme] .content-body h4,
:root[data-theme] .section-body-inner h4 {
  color: var(--pc-teal);
  font-weight: 700;
  letter-spacing: -.005em;
  border-left: 0;
  border-image: none;
  padding-left: 0;
}
:root[data-theme] .content-body h4 {
  background: none;
  -webkit-text-fill-color: currentColor;
}
:root[data-theme] .content-body h4::before { background: var(--pc-teal); opacity: .7; }
.pg-sidebar .pg-text { white-space: nowrap; }

/* ============================================================
   Polish pass: quizzes, figures, steps and tools breakouts
   ============================================================ */

/* ── Quizzes: a question card per fieldset, lettered answer tiles ── */
.quiz { padding: 1.5rem 1.5rem 1.25rem; border-top: 0; box-shadow: inset 0 5px 0 var(--pc-mustard), var(--pc-shadow-2); }
.quiz-head { display: grid; grid-template-columns: auto 1fr; gap: .1rem .85rem; align-items: center; margin-bottom: 1.1rem; }
.quiz-head::before {
  content: '?';
  grid-row: span 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--pc-mustard);
  color: var(--pc-ink);
  font: 700 1.35rem var(--font-display);
  box-shadow: 2px 2px 0 var(--pc-terracotta), var(--pc-shadow-1);
  transform: rotate(-4deg);
}
.quiz-kicker { font-size: 1.25rem; letter-spacing: -.01em; }
.quiz-sub { margin: 0; }
.quiz-q {
  padding: 1rem 1.1rem 1.05rem;
  background: var(--pc-sheet);
  border-left: 0;
  border-radius: 8px;
  box-shadow: inset 4px 0 0 var(--pc-rule-strong);
  transition: box-shadow 260ms ease;
}
.quiz-q.is-right { box-shadow: inset 4px 0 0 var(--pc-sage); }
.quiz-q.is-wrong { box-shadow: inset 4px 0 0 var(--pc-terracotta); }
.quiz-q legend { margin-bottom: .7rem; line-height: 1.4; }
.quiz-num { background: var(--pc-ink); box-shadow: 1px 1px 0 var(--pc-mustard); }
.quiz-opt {
  position: relative;
  align-items: center;
  gap: .7rem;
  margin: .35rem 0;
  padding: .55rem .75rem;
  border-radius: 8px;
  background: var(--pc-cream);
  box-shadow: 0 0 0 1px var(--pc-rule), 0 1px 0 rgba(70,45,15,.08);
  transition: box-shadow 180ms ease, transform 200ms var(--pc-ease-out, ease), background 180ms ease;
}
.quiz-opt:hover { background: var(--pc-cream); box-shadow: 0 0 0 1px var(--pc-rule-strong), var(--pc-shadow-1); transform: translateX(2px); }
.quiz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-letter {
  flex: none;
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 6px;
  font: 700 .78rem var(--font-body);
  color: var(--pc-ink-soft);
  background: var(--pc-sheet);
  box-shadow: inset 0 0 0 1.5px var(--pc-rule-strong);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 320ms var(--pc-spring, ease);
}
.quiz-opt:has(input:checked) { box-shadow: 0 0 0 2px var(--pc-teal), var(--pc-shadow-1); }
.quiz-opt:has(input:checked) .quiz-letter { background: var(--pc-teal); color: #fff; box-shadow: none; transform: rotate(-6deg) scale(1.06); }
.quiz-opt:has(input:focus-visible) { outline: 2px solid var(--pc-plum); outline-offset: 2px; }
.quiz-opt:has(input:disabled):hover { transform: none; box-shadow: 0 0 0 1px var(--pc-rule); }
/* After checking: the right answer glows sage; a wrong pick is struck through */
.quiz-q.is-right .quiz-opt.is-answer,
.quiz-q.is-wrong .quiz-opt.is-answer {
  background: color-mix(in srgb, var(--pc-sage) 16%, var(--pc-cream));
  box-shadow: 0 0 0 2px var(--pc-sage);
  font-weight: 600;
}
.quiz-opt.is-answer .quiz-letter { background: var(--pc-sage); color: #fff; box-shadow: none; }
.quiz-opt.is-answer .quiz-letter { font-size: 0; }
.quiz-opt.is-answer .quiz-letter::after { content: '✓'; font-size: .85rem; }
.quiz-q.is-wrong .quiz-opt:has(input:checked):not(.is-answer) { box-shadow: 0 0 0 2px var(--pc-terracotta); }
.quiz-q.is-wrong .quiz-opt:has(input:checked):not(.is-answer) .quiz-letter { background: var(--pc-terracotta); font-size: 0; }
.quiz-q.is-wrong .quiz-opt:has(input:checked):not(.is-answer) .quiz-letter::after { content: '✕'; font-size: .8rem; }
.quiz-q.is-wrong .quiz-opt:has(input:checked):not(.is-answer) .quiz-opt-text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--pc-terracotta) 70%, transparent); }
.quiz-opt:has(input:disabled):not(.is-answer):not(:has(input:checked)) { opacity: .6; }
.quiz-feedback {
  margin: .75rem 0 0;
  padding: .6rem .8rem;
  border-radius: 6px;
  background: var(--pc-cream);
  color: var(--pc-ink-soft);
  line-height: 1.55;
  animation: pc-rise 360ms var(--pc-ease-out, ease) both;
}
.quiz-q.is-right .quiz-feedback { box-shadow: inset 3px 0 0 var(--pc-sage); }
.quiz-q.is-wrong .quiz-feedback { box-shadow: inset 3px 0 0 var(--pc-terracotta); }
.quiz-bar { margin-top: .25rem; }
.quiz-btn { transition: transform 160ms ease, box-shadow 160ms ease; }
.quiz-btn:hover { transform: translateY(-1px); box-shadow: var(--pc-shadow-2); }
.quiz-btn:active { transform: translateY(1px); }
.quiz-score:not(:empty) {
  padding: .35rem .7rem;
  border-radius: 6px;
  background: var(--pc-sheet);
  animation: pc-rise 360ms var(--pc-ease-out, ease) both;
}
.quiz[data-score="full"] .quiz-score { background: color-mix(in srgb, var(--pc-sage) 18%, var(--pc-cream)); color: var(--pc-ink); }
@keyframes pc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Figures ── */
.figure { padding: 1.2rem 1.3rem 1.25rem; box-shadow: inset 0 4px 0 var(--pc-teal), var(--pc-shadow-2); }
.figure-kicker { flex-wrap: nowrap; }
.figure-kind { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On a phone the label may wrap instead of being cut short */
@media (max-width: 560px) {
  .figure-kicker { flex-wrap: wrap; }
  .figure-kind { white-space: normal; overflow: visible; text-overflow: clip; }
}
.figure-canvas { border-radius: 6px; box-shadow: inset 0 1px 3px rgba(70,45,15,.08); scrollbar-width: thin; }
/* A fading edge and hint when a wide diagram scrolls sideways */
.figure-canvas.is-scrollable .mermaid {
  background:
    linear-gradient(90deg, #fffdf8 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(270deg, #fffdf8 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(70,45,15,.18), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(70,45,15,.18), transparent) right / 10px 100% no-repeat scroll,
    #fffdf8;
}
:root[data-theme="dark"] .figure-canvas.is-scrollable .mermaid {
  background:
    linear-gradient(90deg, #1f1c18 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(270deg, #1f1c18 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), transparent) right / 10px 100% no-repeat scroll,
    #1f1c18;
}
.figure-scroll-hint {
  display: flex; align-items: center; gap: .4rem;
  margin: -.55rem 0 .8rem;
  font-size: .74rem;
  color: var(--pc-muted);
}
.figure-scroll-hint::before { content: '↔'; font-weight: 700; color: var(--pc-teal); }
.figure-scroll-hint[hidden] { display: none; }
.figure-zoom { transition: background 160ms ease, transform 200ms var(--pc-spring, ease); }
.figure-zoom:hover { transform: scale(1.05); }
.figure-try { border-left: 0; border-radius: 6px; box-shadow: inset 3px 0 0 var(--pc-mustard); }

/* ── Steps: one continuous rail between the numbers ── */
:root[data-theme] .step:not(:last-child) .step-num::after { display: none; }
:root[data-theme] .step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px; top: 38px; bottom: -1.1rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--pc-year), color-mix(in srgb, var(--pc-year) 20%, transparent));
}
:root[data-theme] .step-num { position: relative; z-index: 1; transition: transform 320ms var(--pc-spring, ease); }
:root[data-theme] .step:hover .step-num { transform: rotate(-8deg) scale(1.08); box-shadow: 2px 2px 0 var(--pc-mustard); }
:root[data-theme] .step-content h4 { color: var(--pc-ink); }

/* ── Tools breakouts ── */
.tools-icon {
  flex: none;
  width: 1.05em; height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Inline: after a step's explanation */
.tools-used {
  margin: .85rem 0 .25rem;
  padding: .75rem .9rem .8rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--pc-teal) 7%, var(--pc-cream));
  background-image: var(--pc-grain);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc-teal) 22%, transparent), var(--pc-shadow-1);
}
.tools-used-label {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .45rem;
  padding: .16rem .55rem .14rem .45rem;
  border-radius: 4px;
  font: 800 .66rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pc-teal);
  transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 rgba(70,45,15,.25);
}
.tools-used ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.tools-used li { position: relative; padding-left: 1.1rem; font-size: .92rem; line-height: 1.5; color: var(--pc-ink-soft); }
.tools-used li::before {
  content: '';
  position: absolute; left: .15rem; top: .55em;
  width: .42rem; height: .42rem;
  border-radius: 2px;
  background: var(--pc-teal);
  transform: rotate(45deg);
}
:root[data-theme="dark"] .tools-used-label { color: #1b1916; }
/* Panel: a heading and its grid of tool cards */
.tools-panel {
  margin: 1.75rem 0;
  padding: 1.1rem 1.2rem 1.25rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pc-teal) 8%, var(--pc-sheet));
  background-image: var(--pc-grain);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-teal) 20%, transparent);
}
:root[data-theme] .content-body .tools-panel h3,
:root[data-theme] .section-body-inner .tools-panel h3 {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .9rem;
  padding: 0;
  border: 0;
}
:root[data-theme] .content-body .tools-panel h3::before { display: none; }
.tools-panel h3 .tools-icon {
  width: 2rem; height: 2rem;
  padding: .42rem;
  border-radius: 8px;
  color: #fff;
  background: var(--pc-teal);
  box-shadow: 2px 2px 0 var(--pc-mustard);
  transform: rotate(-5deg);
}
.tools-panel .key-terms { margin: 0; }
.tools-panel > p { margin: 0 0 .8rem; }

@media (max-width: 600px) {
  :root[data-theme] .section-body-inner { padding: 1.15rem .9rem; }
  .figure { padding: .95rem .8rem 1rem; }
  .figure-canvas { padding: .6rem; }
  .quiz { padding: 1.15rem .9rem 1rem; }
  .quiz-q { padding: .85rem .75rem .9rem; }
  .tools-panel { padding: .95rem .8rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-opt, .quiz-letter, .quiz-btn, .figure-zoom, :root[data-theme] .step-num { transition: none; }
  .quiz-feedback, .quiz-score:not(:empty) { animation: none; }
  .quiz-opt:hover, :root[data-theme] .step:hover .step-num { transform: none; }
}
:root[data-theme] .content-body .tools-used-label { color: #fff; }
:root[data-theme="dark"] .content-body .tools-used-label { color: #1b1916; }
.figure-kicker, .figure-kicker::before { white-space: nowrap; }
/* Wide diagrams start at their left edge so the whole chart can be scrolled */
:root[data-theme] .figure-canvas .mermaid { display: block; text-align: left; }
.figure-canvas.is-scrollable svg { margin: 0; }
.quiz-opt.is-answer:has(input:checked) .quiz-letter { background: var(--pc-sage); transform: none; }

/* ============================================================
   Polish pass: glossary and home hero
   ============================================================ */

/* Topic headers: keep the text clear of the paper scenery */
.topic-header .pc-diorama svg { height: clamp(90px, 9.5vw, 150px); }
:root[data-theme] .topic-header { padding-bottom: clamp(5.5rem, 10vw, 9rem); }

/* ── Glossary chips: the course's year colours ── */
:root[data-theme] .chip {
  border: 0;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: .07em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 35%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, var(--pc-cream));
  color: color-mix(in srgb, var(--tone) 80%, var(--pc-ink));
}
:root[data-theme] .chip-y11  { --tone: var(--pc-sage); }
:root[data-theme] .chip-y12  { --tone: var(--pc-terracotta); }
:root[data-theme] .chip-core { --tone: #b7811d; }
:root[data-theme="dark"] .chip { color: color-mix(in srgb, var(--tone) 70%, #fff); background: color-mix(in srgb, var(--tone) 18%, #1f1c18); }

/* Stats and search: one paper strip */
:root[data-theme] .glossary-stats {
  border: 0;
  border-radius: 10px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-2);
}
:root[data-theme] .glossary-stat-num { font-family: var(--font-display); color: var(--pc-ink); font-weight: 700; }
:root[data-theme] .glossary-stat-label { color: var(--pc-muted); }
:root[data-theme] .glossary-stats-divider { background: var(--pc-rule); }

/* A–Z bar: a paper tab strip; one scrolling row on phones */
:root[data-theme] .alpha-jump {
  border: 0;
  border-radius: 999px;
  padding: .4rem .6rem;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-theme] .alpha-btn {
  border-radius: 999px;
  border: 0;
  box-shadow: none;
  color: var(--pc-ink-soft);
  transition: background 160ms ease, color 160ms ease, transform 260ms var(--pc-spring, ease);
}
:root[data-theme] .alpha-btn:hover { background: var(--pc-sheet); color: var(--pc-ink); transform: translateY(-2px); }
:root[data-theme] .alpha-btn.active {
  background: var(--pc-terracotta);
  color: #fff;
  box-shadow: 1px 2px 0 var(--pc-mustard);
  transform: rotate(-6deg) scale(1.08);
}
@media (max-width: 768px) {
  :root[data-theme] .alpha-jump {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    border-radius: 12px;
    margin-inline: -.25rem;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  :root[data-theme] .alpha-jump::-webkit-scrollbar { display: none; }
  :root[data-theme] .alpha-btn { flex: none; width: 2.3rem; height: 2.3rem; scroll-snap-align: center; }
}

/* Letter headings and term cards */
:root[data-theme] .glossary-letter-header {
  font-family: var(--font-display);
  color: var(--pc-terracotta);
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--pc-mustard) 55%, transparent);
}
:root[data-theme] .glossary-divider-line { background: repeating-linear-gradient(90deg, var(--pc-rule-strong) 0 6px, transparent 6px 11px); height: 1px; opacity: 1; }
:root[data-theme] .glossary-term {
  border: 0;
  border-radius: 8px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-1);
  transition: transform 260ms var(--pc-ease-out, ease), box-shadow 260ms ease;
}
:root[data-theme] .glossary-term:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow-2); }
:root[data-theme] .glossary-term:target { box-shadow: 0 0 0 2px var(--pc-mustard), var(--pc-shadow-2); }

/* ── Home hero: the headline sets itself, letter by letter ── */
.pc-letters { display: inline-block; white-space: nowrap; }
.pc-letter {
  display: inline-block;
  transform-origin: 50% 90%;
  animation: pc-letter-in 720ms var(--pc-spring, cubic-bezier(.34,1.56,.64,1)) both;
  animation-delay: calc(420ms + var(--i) * 38ms);
}
.pc-letter.is-space { width: .26em; }
.pc-letter.is-set { animation: none; }
@keyframes pc-letter-in {
  from { opacity: 0; transform: translateY(.45em) rotate(8deg) scale(.9); }
  to   { opacity: 1; transform: none; }
}
/* Elastic hover, like pulling at a paper cut-out */
@media (hover: hover) {
  .pc-letter.is-set.is-pulled { animation: pc-letter-pull 620ms cubic-bezier(.3,1.8,.5,1); }
}
@keyframes pc-letter-pull {
  0%   { transform: none; }
  30%  { transform: translateY(-.16em) scaleY(1.14) rotate(-4deg); }
  60%  { transform: translateY(.03em) scaleY(.94); }
  100% { transform: none; }
}
.hero-inner > * { animation: pc-rise 700ms var(--pc-ease-out, ease) both; }
.hero-inner > :nth-child(1) { animation-delay: 60ms; }
.hero-inner > :nth-child(2) { animation-delay: 140ms; }
.hero-inner > :nth-child(3) { animation-delay: 700ms; }
.hero-inner > :nth-child(4) { animation-delay: 800ms; }
.hero-inner > :nth-child(5) { animation-delay: 900ms; }
.hero-inner > :nth-child(6) { animation-delay: 1000ms; }
:root[data-theme] .hero-pill { transition: transform 300ms var(--pc-spring, ease); }
:root[data-theme] .hero-pill:hover { transform: rotate(-3deg) scale(1.04); }
/* One divider between figures, centred in the gap (the base's), not a second one on the figure's own edge */
:root[data-theme] .hero-stat + .hero-stat::before { background: var(--pc-rule-strong); }
:root[data-theme] .hero-cta { margin-bottom: 2.4rem; }
:root[data-theme] .hero-stats { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .pc-letter, .pc-letter.is-pulled, .hero-inner > * { animation: none; }
  :root[data-theme] .alpha-btn, :root[data-theme] .glossary-term { transition: none; }
}

/* ── Pre-rendered diagrams: one SVG per theme (scripts/render-diagrams.mjs) ── */
.mermaid .dg-dark { display: none; }
:root[data-theme="dark"] .mermaid .dg-light { display: none; }
:root[data-theme="dark"] .mermaid .dg-dark { display: block; }
.mermaid > template { display: none; }

/* ============================================================
   Polish pass: SDLC guide and course tools
   ============================================================ */

/* Phase tones: the cycle reads round the four paper colours */
:root { --ph1: var(--pc-teal); --ph2: var(--pc-terracotta); --ph3: var(--pc-sage); --ph4: #b7811d; }
:root[data-theme="dark"] { --ph4: var(--pc-mustard); }

/* ── SDLC cycle: four cut cards joined by a dashed thread ── */
:root[data-theme] .sdlc-cycle-visual { gap: .5rem; align-items: stretch; }
:root[data-theme] .sdlc-phase-card {
  position: relative;
  border: 0;
  border-radius: 10px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: inset 0 4px 0 var(--tone), var(--pc-shadow-2);
  transition: transform 300ms var(--pc-ease-out, ease), box-shadow 300ms ease;
}
:root[data-theme] .sdlc-phase-card.phase-1 { --tone: var(--ph1); }
:root[data-theme] .sdlc-phase-card.phase-2 { --tone: var(--ph2); }
:root[data-theme] .sdlc-phase-card.phase-3 { --tone: var(--ph3); }
:root[data-theme] .sdlc-phase-card.phase-4 { --tone: var(--ph4); }
:root[data-theme] .sdlc-phase-card:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: inset 0 4px 0 var(--tone), var(--pc-shadow-3); }
:root[data-theme] .phase-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto .55rem;
  border-radius: 12px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, var(--pc-cream));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 30%, transparent);
  transition: transform 360ms var(--pc-spring, ease);
}
:root[data-theme] .phase-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme] .sdlc-phase-card:hover .phase-icon { transform: rotate(-8deg) scale(1.06); }
:root[data-theme] .phase-num {
  background: var(--tone);
  color: #fff;
  font-family: var(--font-display);
  box-shadow: 1px 2px 0 var(--pc-mustard);
}
:root[data-theme="dark"] .phase-num { color: #1b1916; }
:root[data-theme] .phase-title { color: var(--pc-ink); font-family: var(--font-display); font-size: 1.02rem; }
:root[data-theme] .phase-subtitle { color: var(--pc-ink-soft); }
:root[data-theme] .sdlc-arrow {
  align-self: center;
  color: var(--pc-rule-strong);
  font-size: 0;
  width: 26px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--pc-rule-strong) 0 4px, transparent 4px 8px);
  position: relative;
}
:root[data-theme] .sdlc-arrow::after {
  content: '';
  position: absolute; right: -2px; top: -4px;
  border: 5px solid transparent;
  border-left-color: var(--pc-rule-strong);
  border-right: 0;
}

/* ── Methodology cards ── */
:root[data-theme] .method-card {
  border: 0;
  border-radius: 10px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: inset 0 4px 0 var(--tone), var(--pc-shadow-2);
}
:root[data-theme] .method-card.agile  { --tone: var(--pc-sage); }
:root[data-theme] .method-card.wagile { --tone: var(--pc-teal); }
:root[data-theme] .method-card .method-badge,
:root[data-theme="dark"] .method-card .method-badge {
  border-radius: 4px;
  background: var(--tone);
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .64rem;
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 0 rgba(70,45,15,.25);
}
:root[data-theme="dark"] .method-card .method-badge { color: #1b1916; }
:root[data-theme] .method-card .method-badge a,
:root[data-theme] .method-card .method-badge .glossary-term { color: inherit; }
:root[data-theme] .method-card li::marker { color: var(--tone); }

/* Decision guide: two facing sheets */
:root[data-theme] .decision-card {
  border: 0;
  border-radius: 10px;
  background: var(--pc-sheet);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .decision-col {
  padding: 1rem 1.1rem;
  border-radius: 8px;
  background: var(--pc-cream);
  box-shadow: inset 4px 0 0 var(--pc-sage), var(--pc-shadow-1);
}
:root[data-theme] .decision-col + .decision-col { box-shadow: inset 4px 0 0 var(--pc-teal), var(--pc-shadow-1); }
:root[data-theme] .decision-col strong { color: var(--pc-ink); }

/* ── Tool mapping per phase ── */
:root[data-theme] .tool-stage {
  border: 0;
  border-radius: 10px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-2);
  overflow: hidden;
}
:root[data-theme] .tool-stage:nth-of-type(4n+1) { --tone: var(--ph1); }
:root[data-theme] .tool-stage:nth-of-type(4n+2) { --tone: var(--ph2); }
:root[data-theme] .tool-stage:nth-of-type(4n+3) { --tone: var(--ph3); }
:root[data-theme] .tool-stage:nth-of-type(4n+4) { --tone: var(--ph4); }
:root[data-theme] .tool-stage-header {
  background: color-mix(in srgb, var(--tone, var(--pc-teal)) 10%, var(--pc-sheet));
  border-bottom: 1px dashed var(--pc-rule-strong);
  align-items: center;
}
:root[data-theme] .tool-stage-header h4 { margin: 0; padding: 0; color: var(--pc-ink); }
:root[data-theme] .tool-stage-header h4::before { display: none; }
:root[data-theme] .stage-badge {
  border-radius: 4px;
  background: var(--tone, var(--pc-teal));
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .66rem;
  transform: rotate(-2deg);
  box-shadow: 1px 2px 0 var(--pc-mustard);
}
:root[data-theme="dark"] .stage-badge { color: #1b1916; }
:root[data-theme] .tool-row { border-bottom-color: var(--pc-rule); transition: background 180ms ease; }
:root[data-theme] .tool-row:hover { background: color-mix(in srgb, var(--tone, var(--pc-teal)) 5%, transparent); }
:root[data-theme] .tool-name { color: var(--pc-ink); }
:root[data-theme] .tool-name::before {
  content: '';
  display: inline-block;
  width: .45rem; height: .45rem;
  margin-right: .5rem;
  border-radius: 2px;
  background: var(--tone, var(--pc-teal));
  transform: rotate(45deg) translateY(-2px);
}

/* ── Case studies: a verdict stamp and a phase rail ── */
:root[data-theme] .case-study {
  border: 0;
  border-radius: 10px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-2);
}
:root[data-theme] .case-study.success { --tone: var(--pc-sage); }
:root[data-theme] .case-study.failure { --tone: var(--pc-terracotta); }
:root[data-theme] .case-study .case-study-header,
:root[data-theme="dark"] .case-study .case-study-header {
  background: color-mix(in srgb, var(--tone) 9%, var(--pc-sheet));
  border-bottom: 1px dashed color-mix(in srgb, var(--tone) 45%, transparent);
}
:root[data-theme] .case-study .case-verdict {
  border-radius: 4px;
  background: transparent;
  color: var(--tone);
  box-shadow: inset 0 0 0 2px var(--tone);
  transform: rotate(-4deg);
  font-weight: 800;
}
:root[data-theme] .case-study-header h4 { margin: 0; padding: 0; border: 0; font-size: 1.1rem; color: var(--pc-ink); }
:root[data-theme] .case-study-header h4::before { display: none; }
:root[data-theme] .case-study-header .case-company { color: var(--pc-muted); }
:root[data-theme] .case-phase-row { border-bottom-color: var(--pc-rule); }
:root[data-theme] .case-phase-label {
  flex-basis: 120px;
  color: var(--tone);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: .15rem;
}
:root[data-theme] .case-phase-detail { color: var(--pc-ink-soft); }

/* ── Course tools: a real Gantt chart ── */
.gantt {
  --weeks: 4;
  margin: 1rem 0 1.25rem;
  padding: .5rem 0 .75rem;
  border-radius: 10px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-2);
  overflow-x: auto;
  font-size: .9rem;
}
.gantt-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.3fr) minmax(16rem, 3fr) minmax(7rem, .9fr);
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.1rem;
  min-width: 36rem;
}
.gantt-row + .gantt-row { border-top: 1px dashed var(--pc-rule); }
.gantt-head {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-muted);
}
.gantt-task { color: var(--pc-ink); font-weight: 600; }
.gantt-dep { color: var(--pc-ink-soft); font-size: .84rem; }
.gantt-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--weeks), 1fr);
  height: 1.6rem;
  align-items: center;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--weeks) - 1px), var(--pc-rule) calc(100% / var(--weeks) - 1px) calc(100% / var(--weeks)));
}
.gantt-head .gantt-track { background: none; height: auto; }
.gantt-head .gantt-track span { padding-left: .35rem; }
.gantt-bar, .gantt-slack {
  grid-row: 1;
  grid-column: var(--start) / span var(--span);
  height: .95rem;
  margin: 0 3px;
  border-radius: 4px;
}
.gantt-bar {
  background: var(--pc-teal);
  box-shadow: 1px 2px 0 var(--pc-mustard);
  transform-origin: left;
  animation: gantt-grow 700ms var(--pc-ease-out, ease) both;
  animation-delay: calc(var(--start) * 90ms);
}
.gantt-row:nth-child(3) .gantt-bar { background: var(--pc-terracotta); }
.gantt-row:nth-child(4) .gantt-bar { background: var(--pc-sage); }
.gantt-row:nth-child(5) .gantt-bar { background: #b7811d; }
.gantt-slack {
  background: repeating-linear-gradient(135deg, var(--pc-rule-strong) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--pc-rule-strong);
  opacity: .8;
}
@keyframes gantt-grow { from { transform: scaleX(0); } to { transform: none; } }
.gantt-key {
  display: flex; align-items: center; gap: .45rem;
  margin: .5rem 1.1rem 0;
  font-size: .76rem;
  color: var(--pc-muted);
}
.gantt-key .gantt-bar, .gantt-key .gantt-slack { display: inline-block; width: 1.6rem; height: .7rem; margin: 0 .1rem 0 .6rem; animation: none; }
.gantt-key .gantt-bar:first-child { margin-left: 0; }

/* Course tools h5 labels in content (outside figures) */
:root[data-theme] .section-body-inner h5:not(.figure-notes h5) {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

@media (max-width: 768px) {
  :root[data-theme] .sdlc-cycle-visual { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  :root[data-theme] .sdlc-phase-card { width: auto; max-width: none; margin: 0; }
  :root[data-theme] .sdlc-arrow { align-self: center; width: 2px; height: 22px; margin: .15rem 0; background: repeating-linear-gradient(180deg, var(--pc-rule-strong) 0 4px, transparent 4px 8px); }
  :root[data-theme] .sdlc-arrow::after { right: -4px; top: auto; bottom: -4px; border: 5px solid transparent; border-top-color: var(--pc-rule-strong); border-bottom: 0; }
  .gantt-row { grid-template-columns: 8.5rem minmax(15rem, 1fr) 6.5rem; gap: .75rem; padding: .5rem .8rem; min-width: 32rem; }
  .gantt-task, .gantt-head > :first-child {
    position: sticky; left: 0; z-index: 1;
    margin: -.5rem 0 -.5rem -.8rem; padding: .5rem .5rem .5rem .8rem;
    background: var(--pc-cream);
    box-shadow: 6px 0 8px -6px rgba(70,45,15,.25);
    font-size: .84rem;
  }
  .gantt-key { flex-wrap: wrap; margin-inline: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gantt-bar { animation: none; }
  :root[data-theme] .sdlc-phase-card, :root[data-theme] .phase-icon { transition: none; }
  :root[data-theme] .sdlc-phase-card:hover, :root[data-theme] .sdlc-phase-card:hover .phase-icon { transform: none; }
}
:root[data-theme] .sdlc-phase-card[class*="phase-"] .phase-num { background: var(--tone); }
:root[data-theme] .sdlc-phase-card .phase-icon { font-size: 0; display: grid; }
:root[data-theme] .tool-name { display: flex; align-items: baseline; gap: .5rem; }
:root[data-theme] .tool-name::before { flex: none; margin-right: 0; }
.gantt-key { gap: .4rem 1.1rem; }
.gantt-key-item { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.gantt-key .gantt-bar, .gantt-key .gantt-slack { margin: 0; }

/* ============================================================
   Polish pass: Year 12 topic pages
   ============================================================ */

/* Card grids never strand one card on its own row: four sit 2 x 2,
   and a lone last card in a longer grid stretches across the row. */
@media (min-width: 900px) {
  :root[data-theme] :is(.info-grid, .key-terms):has(> :nth-child(4):last-child),
  :root[data-theme] :is(.info-grid, .key-terms):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-theme] :is(.info-grid, .key-terms):has(> :nth-child(3n+7):last-child) > :last-child { grid-column: 1 / -1; }
}

/* ============================================================
   Polish pass: Year 11 topic pages
   ============================================================ */

/* Step numbers follow the page's year colour, like the rail beside them */
:root[data-theme] .step-num { background: var(--pc-year); }

/* Worked example under a step or definition: a small tabbed line */
.eg {
  display: block;
  position: relative;
  margin: .5rem 0 .1rem;
  padding: .45rem .75rem .45rem 3.1rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pc-year) 7%, var(--pc-cream));
  box-shadow: inset 3px 0 0 var(--pc-year);
  color: var(--pc-ink-soft);
  font-size: .92em;
  line-height: 1.55;
}
.eg::before {
  content: 'e.g.';
  position: absolute;
  left: .7rem; top: .55rem;
  font: 800 .66rem/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pc-year);
}
.eg em { font-style: normal; }

/* ============================================================
   Certified Resources page (topics/resources.html)
   ============================================================ */
.res-page .res-note { margin-top: 0; }
.res-section { margin: 2.5rem 0 0; scroll-margin-top: 90px; }
.res-head { margin-bottom: 1.1rem; }
.res-head h2 {
  margin: .45rem 0 .25rem;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -.015em;
  color: var(--pc-ink);
  background: none;
}
.res-head h2::before, .res-head h2::after { display: none; }
.res-head p { margin: 0; color: var(--pc-ink-soft); max-width: 62ch; }
.res-stamp {
  display: inline-block;
  padding: .16rem .55rem .12rem;
  border-radius: 4px;
  font: 800 .64rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.res-stamp-nesa { color: #fff; background: var(--pc-terracotta); box-shadow: 1px 2px 0 var(--pc-mustard); }
.res-stamp-std { color: var(--pc-teal); box-shadow: inset 0 0 0 2px var(--pc-teal); }
:root[data-theme="dark"] .res-stamp-nesa { color: #1b1916; }

.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.res-card {
  --tone: var(--pc-teal);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 10px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: inset 0 3px 0 var(--tone), var(--pc-shadow-1);
  transition: transform 260ms var(--pc-ease-out, ease), box-shadow 260ms ease;
}
#nesa-syllabus .res-card, #nesa-exam .res-card, #nesa-support .res-card { --tone: var(--pc-terracotta); }
.res-card:hover, .res-card:focus-within { transform: translateY(-3px); box-shadow: inset 0 3px 0 var(--tone), var(--pc-shadow-2); }
.res-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.res-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 11%, var(--pc-cream));
}
.res-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.res-fmt { font: 800 .62rem var(--font-body); letter-spacing: .1em; color: var(--pc-muted); padding: .12rem .4rem; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--pc-rule-strong); }
.content-body .res-title { margin: 0 0 .15rem; padding: 0; border: 0; font-size: 1.04rem; line-height: 1.35; }
.content-body .res-title::before { display: none; }
.res-title a { color: var(--pc-ink); text-decoration: none; }
/* The whole card is the link target */
.res-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.res-title a::before { content: '↗'; float: right; margin-left: .4rem; color: var(--tone); transition: transform 220ms var(--pc-ease-out, ease); }
.res-card:hover .res-title a::before { transform: translate(2px, -2px); }
.res-title a:focus-visible { outline: none; }
.res-card:has(.res-title a:focus-visible) { outline: 2px solid var(--pc-plum); outline-offset: 3px; }
.res-pub { margin: 0 0 .5rem; font-size: .78rem; font-weight: 600; color: var(--pc-muted); }
.res-why { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.55; color: var(--pc-ink-soft); flex: 1; }
.res-links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.res-links-label { font: 700 .66rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-muted); margin-right: .15rem; }
.res-links .chip { position: relative; z-index: 1; font-size: .62rem; padding: .16rem .45rem; text-decoration: none; }
.res-links a.chip:hover { filter: brightness(.95); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .res-card, .res-title a::before { transition: none; }
  .res-card:hover, .res-card:focus-within { transform: none; }
}
.res-links .chip { display: inline-flex; align-items: center; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1.4; }
.res-links .chip-core { --tone: #b7811d; }
:root[data-theme] .content-body .res-card .res-title {
  margin: .1rem 0 .15rem;
  padding: 0;
  border: 0;
  font-size: 1.04rem;
}
:root[data-theme] .content-body .res-card .res-title::before { display: none; }
:root[data-theme] .content-body .res-head h2 {
  margin: .45rem 0 .25rem;
  padding: 0;
  border: 0;
  border-image: none;
  background: none;
  color: var(--pc-ink);
  -webkit-text-fill-color: currentColor;
  box-shadow: none;
}
:root[data-theme] .content-body .res-head h2::before,
:root[data-theme] .content-body .res-head h2::after { display: none; }

/* ── Home: the fourth study habit links to the resources page ── */
@media (min-width: 1100px) {
  :root[data-theme] .study-guide-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1099px) {
  :root[data-theme] .study-guide-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.study-guide-card--link { color: inherit; text-decoration: none; box-shadow: inset 0 4px 0 var(--pc-terracotta), var(--pc-shadow-2); transition: transform 260ms var(--pc-ease-out, ease), box-shadow 260ms ease; }
.study-guide-card--link:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: inset 0 4px 0 var(--pc-terracotta), var(--pc-shadow-3); }
.study-guide-more { display: block; margin-top: .6rem; font-weight: 700; color: var(--pc-terracotta); }

/* ── 404: every page one tap away ── */
.lost-links { margin-top: 2.25rem; }
.lost-label { margin: 0 0 .7rem; font: 800 .7rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-muted); }
.lost-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.lost-link {
  --tone: #b7811d;
  display: inline-block;
  padding: .38rem .75rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--pc-ink);
  text-decoration: none;
  background: var(--pc-cream);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 45%, transparent), var(--pc-shadow-1);
  transition: transform 220ms var(--pc-spring, ease), background 160ms ease;
}
.lost-y12 { --tone: var(--pc-terracotta); }
.lost-y11 { --tone: var(--pc-sage); }
.lost-link:hover { transform: translateY(-2px) rotate(-1deg); background: color-mix(in srgb, var(--tone) 12%, var(--pc-cream)); }
@media (prefers-reduced-motion: reduce) {
  .lost-link, .study-guide-card--link { transition: none; }
  .lost-link:hover, .study-guide-card--link:hover { transform: none; }
}

/* ============================================================
   Glossary: search-first toolbar, year filters, match highlights
   ============================================================ */
.gl-toolbar {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem .9rem;
  border-radius: 12px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-2);
}
:root[data-theme] .gl-toolbar .glossary-search-container { position: relative; min-width: 0; width: 100%; }
.gl-search-icon {
  position: absolute; left: 1rem; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  fill: none; stroke: var(--pc-muted); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
:root[data-theme] .gl-toolbar .glossary-search-input {
  width: 100%;
  height: 52px;
  padding: 0 5.5rem 0 2.9rem;
  border: 0;
  border-radius: 10px;
  font-size: 1.02rem;
  color: var(--pc-ink);
  background: var(--pc-sheet);
  box-shadow: inset 0 1px 3px rgba(70,45,15,.16), inset 0 0 0 1px var(--pc-rule);
  transition: box-shadow 180ms ease, background 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
:root[data-theme] .gl-toolbar .glossary-search-input::-webkit-search-cancel-button { display: none; }
:root[data-theme] .gl-toolbar .glossary-search-input:focus {
  outline: none;
  background: var(--pc-cream);
  box-shadow: inset 0 0 0 2px var(--pc-teal), 0 0 0 4px color-mix(in srgb, var(--pc-teal) 18%, transparent);
}
:root[data-theme] .gl-toolbar .search-k-hint {
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  padding: .15rem .45rem;
  border-radius: 5px;
  font: 700 .72rem var(--font-body);
  color: var(--pc-muted);
  background: var(--pc-cream);
  box-shadow: inset 0 0 0 1px var(--pc-rule-strong), 0 1px 0 var(--pc-rule-strong);
}
@media (hover: none) { :root[data-theme] .gl-toolbar .search-k-hint { display: none; } }
:root[data-theme] .gl-toolbar .search-clear-btn {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  color: var(--pc-ink-soft);
  background: var(--pc-sheet);
  cursor: pointer;
}
:root[data-theme] .gl-toolbar .search-clear-btn:hover { background: var(--pc-rule); color: var(--pc-ink); }
.gl-filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .8rem; }
.gl-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
:root[data-theme] .gl-filter {
  --tone: #b7811d;
  cursor: pointer;
  border: 0;
  padding: .38rem .8rem;
  font: 800 .7rem var(--font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease, transform 220ms var(--pc-spring, ease);
}
:root[data-theme] .gl-filter.chip-y11 { --tone: var(--pc-sage); }
:root[data-theme] .gl-filter.chip-y12 { --tone: var(--pc-terracotta); }
:root[data-theme] .gl-filter:hover { transform: translateY(-1px); }
:root[data-theme] .gl-filter[aria-pressed="true"] { background: var(--tone); color: #fff; box-shadow: 1px 2px 0 var(--pc-mustard); }
:root[data-theme="dark"] .gl-filter[aria-pressed="true"] { color: #1b1916; }
:root[data-theme] .gl-filter[aria-pressed="true"]::before { content: '✓ '; }
.gl-count { margin: 0; font-size: .82rem; color: var(--pc-muted); }
.gl-count strong { color: var(--pc-ink); font-family: var(--font-display); font-size: 1.05rem; }

/* A–Z letters with nothing left after searching */
:root[data-theme] .alpha-btn.is-empty { opacity: .25; pointer-events: none; }

/* Matches in term titles, and the card a See also link lands on */
.glossary-term h3 mark {
  color: inherit;
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--pc-mustard) 60%, transparent) 55%);
  padding: 0 .05em;
}
@keyframes gl-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--pc-mustard), var(--pc-shadow-2); } 100% { box-shadow: var(--pc-shadow-1); } }
:root[data-theme] .glossary-term.gl-flash { animation: gl-flash 1.6s ease-out; }
:root[data-theme] .glossary-related a { font-weight: 600; }

:root[data-theme] #no-results-msg { border: 2px dashed var(--pc-rule-strong); background: var(--pc-cream); border-radius: 12px; }
:root[data-theme] #no-results-msg h3 { border: 0; padding: 0; }
:root[data-theme] #no-results-msg h3::before { display: none; }

@media (max-width: 600px) {
  .gl-toolbar { padding: .8rem; }
  :root[data-theme] .gl-toolbar .glossary-search-input { height: 48px; font-size: 1rem; }
  .gl-count { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .glossary-term.gl-flash { animation: none; box-shadow: 0 0 0 3px var(--pc-mustard), var(--pc-shadow-2); }
  :root[data-theme] .gl-filter { transition: none; }
}

/* ── Figure breakouts: "What to notice" and "Try this" ──────
   Serif headings with a small inked icon; Try this is a paper
   task card with a mustard tab. */
.figure-notes > div:first-child {
  padding: .7rem .85rem .75rem;
  background: color-mix(in srgb, var(--pc-teal, #2a6f73) 7%, var(--pc-cream, #fbf7ee));
  border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--pc-teal, #2a6f73);
}
.figure-notes h5,
.figure-try strong {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .35rem;
  font: italic 600 1rem/1.2 var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--pc-ink, #1c1a17);
}
.figure-notes h5::before,
.figure-try strong::before {
  content: '';
  flex: none;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background-color: var(--pc-teal, #2a6f73);
  -webkit-mask: var(--fn-icon) center / 70% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: var(--fn-icon) center / 70% no-repeat exclude, linear-gradient(#000 0 0);
}
/* eye: look closely */
.figure-notes h5 { --fn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E"); }
/* pencil: have a go */
.figure-try strong { --fn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13.5 6.5l4 4' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E"); }
.figure-try strong::before { background-color: var(--pc-mustard, #e0a93b); }
.figure-try {
  padding: .7rem .85rem .75rem;
  background: color-mix(in srgb, var(--pc-mustard, #e0a93b) 13%, var(--pc-cream, #fbf7ee));
  border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--pc-mustard, #e0a93b), var(--pc-shadow-1);
  line-height: 1.55;
}
.figure-notes ul { padding-left: 1.05rem; }
.figure-notes li::marker { color: var(--pc-teal, #2a6f73); }
:root[data-theme="dark"] .figure-notes > div:first-child { background: color-mix(in srgb, var(--pc-teal) 12%, var(--pc-cream)); }
:root[data-theme="dark"] .figure-try { background: color-mix(in srgb, var(--pc-mustard) 12%, var(--pc-cream)); }

/* ============================================================
   Polish pass 2: Including pills, outcome mark, strengths and
   limitations, curriculum ribbon, home card keywords
   ============================================================ */
:root {
  --ic-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000'/%3E%3C/svg%3E");
  --ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.4 1.8 3-.2 1 2.8 2.6 1.6-.7 2.9 1.2 2.7-2.2 2 .1 3-2.9.7-1.7 2.5-2.8-1-2.8 1-1.7-2.5-2.9-.7.1-3-2.2-2 1.2-2.7-.7-2.9L5.6 5.9l1-2.8 3 .2z'/%3E%3C/svg%3E");
  --ic-seal-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 12.2l2.8 2.8 5.6-5.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Including: small, neat keyword chips that sit on one baseline */
.syllabus-including {
  gap: .3rem .3rem;
  margin: .1rem 0 1.4rem;
  font-size: .67rem;
  line-height: 1.3;
  align-items: center;
}
.syllabus-including::before {
  font: 600 .58rem var(--font-body);
  font-style: normal;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-right: .35rem;
}
.syllabus-including li {
  padding: .18rem .6rem .2rem;
  background: var(--pc-cream, #fbf7ee);
  border: 1px solid var(--pc-rule, #d8ccb4);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(70,45,15,.06);
  color: var(--pc-ink-soft, #4a443b);
  font-weight: 500;
}

/* Outcomes: a small target before the codes */
:root[data-theme] h2.syllabus-phase .outcome-subtitle {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem;
}
:root[data-theme] h2.syllabus-phase .outcome-subtitle::before {
  content: '';
  width: 1.05rem; height: 1.05rem;
  margin-right: .1rem;
  background: var(--pc-terracotta, #c4553b);
  -webkit-mask: var(--ic-target) center / contain no-repeat;
          mask: var(--ic-target) center / contain no-repeat;
}
:root.pc-y11[data-theme] h2.syllabus-phase .outcome-subtitle::before { background: var(--pc-sage); }
:root[data-theme] h2.syllabus-phase .outcome-badge {
  border-style: solid;
  border-color: var(--pc-rule);
  font-size: .68rem;
  letter-spacing: .03em;
}

/* Strengths and limitations: a tick or a dash in a small disc */
th.th-pro, th.th-con, strong.lbl-pro, strong.lbl-con { white-space: nowrap; }
th.th-pro::before, th.th-con::before, strong.lbl-pro::before, strong.lbl-con::before {
  content: '';
  display: inline-block;
  vertical-align: -.2em;
  width: 1.1em; height: 1.1em;
  margin-right: .4em;
  border-radius: 50%;
  -webkit-mask: var(--ic) center / 72% no-repeat exclude, linear-gradient(#000 0 0);
          mask: var(--ic) center / 72% no-repeat exclude, linear-gradient(#000 0 0);
}
th.th-pro::before, strong.lbl-pro::before { --ic: var(--ic-plus); background: var(--pc-sage, #3f7d5c); }
th.th-con::before, strong.lbl-con::before { --ic: var(--ic-minus); background: var(--pc-terracotta, #c4553b); }
:root[data-theme] table th.th-pro::before, :root[data-theme] table th.th-con::before { background: var(--pc-cream); }
strong.lbl-pro { color: var(--pc-sage, #3f7d5c); }
strong.lbl-con { color: var(--pc-terracotta, #c4553b); }

/* Curriculum aligned: a slim ribbon with a seal, not a heavy placard */
:root[data-theme] .curriculum-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem;
  padding: .55rem .9rem .6rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--pc-ink-soft);
  background: color-mix(in srgb, var(--pc-cream) 85%, transparent);
  border-radius: 999px;
  box-shadow: var(--pc-shadow-1);
}
:root[data-theme] .curriculum-banner > strong:first-child {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--pc-teal);
  font: italic 600 .95rem var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transform: none;
}
:root[data-theme] .curriculum-banner > strong:first-child::before {
  content: '';
  width: 1.2rem; height: 1.2rem;
  background: var(--pc-teal);
  -webkit-mask: var(--ic-seal-tick) center / contain no-repeat, var(--ic-seal) center / contain no-repeat;
  -webkit-mask-composite: xor;
          mask: var(--ic-seal-tick) center / contain no-repeat exclude, var(--ic-seal) center / contain no-repeat;
}
:root[data-theme] .curriculum-banner a { margin-left: auto; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { :root[data-theme] .curriculum-banner { border-radius: 14px; } :root[data-theme] .curriculum-banner a { margin-left: 0; } }

/* Home cards: room for more keywords */
:root[data-theme] .card-topics { display: flex; flex-wrap: wrap; gap: .3rem; }
:root[data-theme] .topic-card .topic-tag { font-size: .68rem; padding: .18rem .5rem; margin: 0; }
:root[data-theme] .content-body .syllabus-including li { font-size: .67rem; line-height: 1.3; margin: 0; }
:root[data-theme] .content-body .syllabus-including li .gloss { font-size: inherit; }

/* ── Topic header on wide screens: title on the left, the
   curriculum note as a pinned paper card on the right ── */
@media (min-width: 1024px) {
  :root[data-theme] .topic-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
    grid-template-areas:
      "crumb crumb"
      "title aside"
      "desc  aside"
      "meta  aside";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  :root[data-theme] .topic-header-inner > .topic-breadcrumb { grid-area: crumb; }
  :root[data-theme] .topic-header-inner > h1 { grid-area: title; margin-bottom: .6rem; }
  :root[data-theme] .topic-header-inner > p { grid-area: desc; margin: 0 0 1.4rem; }
  :root[data-theme] .topic-header-inner > .topic-header-meta { grid-area: meta; margin: 0; }
  :root[data-theme] .topic-header-inner > .curriculum-banner {
    grid-area: aside;
    align-self: center;
    display: block;
    margin: 0;
    padding: 1.1rem 1.2rem 1rem;
    border-radius: 12px;
    font-size: .84rem;
    line-height: 1.55;
    background: var(--pc-cream);
    box-shadow: inset 0 4px 0 var(--pc-teal), var(--pc-shadow-2);
    transform: rotate(.6deg);
  }
  :root[data-theme] .topic-header-inner > .curriculum-banner > strong:first-child {
    display: flex;
    margin: 0 0 .45rem;
    font-size: 1.05rem;
  }
  :root[data-theme] .topic-header-inner > .curriculum-banner strong:not(:first-child) {
    white-space: normal; overflow-wrap: anywhere;
  }
  :root[data-theme] .topic-header-inner > .curriculum-banner a {
    display: inline-block;
    margin: .6rem 0 0;
    font-size: .82rem;
  }
}

/* Key concepts: the NESA "including" terms as a labelled strip, set apart from the body text */
:root[data-theme] .content-body .syllabus-including {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem .45rem;
  margin: .4rem 0 1.9rem;
  padding: .75rem 1rem .8rem;
  background: color-mix(in srgb, var(--pc-teal, #2f6f73) 7%, transparent);
  border: 0;
  border-left: 3px solid var(--pc-teal, #2f6f73);
  border-radius: 0 10px 10px 0;
}
:root[data-theme] .content-body .syllabus-including::before {
  content: 'Key syllabus concepts';
  flex-basis: 100%;
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .15rem;
  font: 700 .62rem/1 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pc-teal, #2f6f73);
}
:root[data-theme] .content-body .syllabus-including::after {
  content: ''; position: absolute; left: -3px; right: 0; bottom: -1rem;
  border-bottom: 1px dashed var(--pc-rule, #d8ccb4);
}
:root[data-theme] .content-body .syllabus-including li {
  font-size: .72rem; line-height: 1.3; margin: 0;
  padding: .24rem .7rem .26rem;
  background: var(--pc-cream, #fbf7ee);
  border: 1px solid color-mix(in srgb, var(--pc-teal, #2f6f73) 30%, var(--pc-rule, #d8ccb4));
  border-radius: 999px;
  color: var(--pc-ink, #2b2620); font-weight: 600;
}
:root[data-theme] .content-body .syllabus-including li *,
:root[data-theme] .content-body .syllabus-including li mark { background: none; color: inherit; font: inherit; }

/* Outcome chips: hover or focus shows the full outcome */
:root[data-theme] h2.syllabus-phase .outcome-badge[data-outcome] { position: relative; cursor: help; }
:root[data-theme] h2.syllabus-phase .outcome-badge[data-outcome]::after {
  content: attr(data-outcome);
  position: absolute; left: 50%; top: calc(100% + 10px); z-index: 30;
  width: max-content; max-width: 280px;
  padding: .6rem .8rem;
  background: var(--pc-ink, #2b2620); color: var(--pc-cream, #fbf7ee);
  font: 500 .78rem/1.45 var(--font-body); letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
  border-radius: 8px; box-shadow: var(--pc-shadow-2, 0 6px 18px rgba(0,0,0,.2));
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -4px); transition: opacity .15s, transform .15s, visibility .15s;
}
:root[data-theme] h2.syllabus-phase .outcome-badge[data-outcome]:hover::after,
:root[data-theme] h2.syllabus-phase .outcome-badge[data-outcome]:focus-visible::after {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

/* ── Tool links to the Course Tools page ── */
a.tool-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--pc-teal) 45%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a.tool-link:hover, a.tool-link:focus-visible {
  color: var(--pc-teal);
  text-decoration-color: var(--pc-teal);
}
a.tool-link:focus-visible { outline: 2px solid var(--pc-teal); outline-offset: 2px; border-radius: 2px; }
.tool-link-arrow {
  display: inline-block;
  margin-left: .25em;
  font-size: .8em;
  opacity: .55;
  text-decoration: none;
  transition: transform 160ms ease, opacity 160ms ease;
}
a.tool-link:hover .tool-link-arrow { opacity: 1; transform: translate(2px, -2px); }
/* Land tool anchors below the sticky nav */
section[id], h3[id^="tool-"] { scroll-margin-top: 90px; }
:root[data-theme] h3[id^="tool-"]:target {
  background: color-mix(in srgb, var(--pc-mustard) 30%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--pc-mustard) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  a.tool-link, .tool-link-arrow { transition: none; }
}

/* ============================================================
   Accent colours for icons, intros and navigation
   --stock is the accent fill; --on-stock is text or icon on it;
   --stock-ink is accent-coloured text on a cream/charcoal sheet.
   In dark mode the accents are pale, so text on them turns dark.
   ============================================================ */
:root[data-theme] {
  --on-stock: #fff;
  --pc-sage-ink: #2f6348;
  --pc-terracotta-ink: #a3402a;
  --pc-teal-ink: #1f5a5d;
}
:root[data-theme="dark"] {
  --on-stock: #1b1916;
  --pc-sage-ink: var(--pc-sage);
  --pc-terracotta-ink: #f09a82;
  --pc-teal-ink: var(--pc-teal);
  /* Lift card stock a little so layers separate from the page */
  --pc-cream: #2a2621;
  --pc-sheet: #23201b;
  --pc-rule: #433d34;
  --pc-rule-strong: #5c5346;
}
.ti-y11, .nav-item-y11, .mobile-menu-y11, :root.pc-y11 .topic-breakout,
:root[data-theme] .topic-breakout.yr11 { --stock: var(--pc-sage); --stock-ink: var(--pc-sage-ink); }
.ti-y12, .nav-item-y12, .mobile-menu-y12,
:root[data-theme] .topic-breakout.yr12 { --stock: var(--pc-terracotta); --stock-ink: var(--pc-terracotta-ink); }
.ti-core, .nav-item-core, .mobile-menu-core, .topic-breakout { --stock: var(--pc-teal); --stock-ink: var(--pc-teal-ink); }
/* Part intros match the part banner above them: teal, or sage on Year 11 pages */
:root[data-theme] .topic-breakout.subtopic-breakout { --stock: var(--pc-teal); --stock-ink: var(--pc-teal-ink); }
:root.pc-y11[data-theme] .topic-breakout.subtopic-breakout { --stock: var(--pc-sage); --stock-ink: var(--pc-sage-ink); }

/* Shared icon glyph */
.nav-ico svg, .topic-hero-icon svg, .toc-ico svg, .f-ico svg {
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Page title with its topic icon ── */
.topic-title-row { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem; }
.topic-title-row h1 { margin: 0; min-width: 0; }
.topic-hero-icon {
  flex: none;
  display: grid; place-items: center;
  width: 68px; height: 68px;
  border-radius: 16px;
  background: var(--stock);
  color: var(--on-stock);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--stock) 45%, var(--pc-mustard)), var(--pc-shadow-2);
  transform: rotate(-4deg);
}
.topic-hero-icon svg { width: 36px; height: 36px; }
@media (max-width: 640px) {
  .topic-title-row { gap: .8rem; }
  .topic-hero-icon { width: 48px; height: 48px; border-radius: 12px; }
  .topic-hero-icon svg { width: 26px; height: 26px; }
}

/* ── Sidebar contents title ── */
:root[data-theme] .toc-title { display: flex; align-items: center; gap: .55rem; }
.toc-ico {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--stock); color: var(--on-stock);
  box-shadow: var(--pc-shadow-1);
}
.toc-ico svg { width: 16px; height: 16px; }

/* ── Footer link icons ── */
.footer-col a:has(.f-ico) { display: flex; align-items: center; gap: .5rem; }
.f-ico { flex: none; display: inline-grid; opacity: .7; }
.f-ico svg { width: 15px; height: 15px; }
.footer-col a:hover .f-ico { opacity: 1; }

/* ============================================================
   Topic intro: the opening lede of the page, not a boxed callout
   ============================================================ */
:root[data-theme] .topic-breakout:not(.subtopic-breakout) {
  display: block;
  margin: .25rem 0 2.5rem;
  padding: 0 0 2rem;
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--pc-rule-strong);
  border-radius: 0;
  box-shadow: none;
  color: var(--pc-ink);
}
:root[data-theme] .topic-breakout .breakout-label {
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 .9rem;
  padding: 0;
  background: none; box-shadow: none; transform: none;
  font: 800 .74rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stock-ink);
}
:root[data-theme] .topic-breakout .breakout-label::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--stock), transparent);
}
:root[data-theme] .topic-breakout:not(.subtopic-breakout) > p:first-of-type {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1rem + .45vw, 1.34rem);
  line-height: 1.6;
  color: var(--pc-ink);
  margin-bottom: 1rem;
}
:root[data-theme] .topic-breakout p { color: var(--pc-ink-soft); line-height: 1.7; }

/* The closing question, set as a pull quote */
:root[data-theme] .topic-breakout .breakout-question {
  position: relative;
  margin: 1.25rem 0 0;
  padding: .95rem 1.2rem 1rem 3.6rem;
  border-left: 4px solid var(--stock);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--stock) 11%, transparent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--pc-ink);
}
:root[data-theme] .topic-breakout .breakout-question::before {
  content: '?';
  position: absolute;
  left: 1rem; top: 50%;
  translate: 0 -50%;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--stock);
  color: var(--on-stock);
  font: 800 1.05rem/1 var(--font-body);
  font-style: normal;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--stock) 45%, var(--pc-mustard));
}
:root[data-theme] .topic-breakout .bq-lead {
  display: block;
  margin-bottom: .25rem;
  font: 800 .68rem/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stock-ink);
}
/* Keyword links inside the intro keep the page's normal look */
:root[data-theme] .topic-breakout em { background: none; font-weight: inherit; }

/* ============================================================
   Part intro: a sheet fixed under its part banner, so the two
   read (and collapse) as one card
   ============================================================ */
:root[data-theme] .part-block:not(.part-collapsed):has(+ .subtopic-breakout),
:root[data-theme] .part-block:not(.part-collapsed):has(+ .part-group > .part-group-inner > .subtopic-breakout:first-child) {
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.part-group:has(> .part-group-inner > .subtopic-breakout:first-child):not(.part-collapsed) { margin-top: 0; }
:root[data-theme] .topic-breakout.subtopic-breakout {
  position: relative;
  display: block;
  margin: 0 0 2.25rem;
  padding: 1.2rem 1.5rem 1.3rem;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  border: 0;
  border-top: 3px solid var(--stock);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 14px -8px rgba(0,0,0,.35);
}
:root[data-theme] .topic-breakout.subtopic-breakout > p:first-of-type {
  font-size: 1rem;
  color: var(--pc-ink-soft);
  margin-bottom: 0;
}
:root[data-theme] .topic-breakout.subtopic-breakout .breakout-question {
  margin-top: .9rem;
  padding: .7rem 1rem .75rem 3.1rem;
  font-size: 1.02rem;
}
:root[data-theme] .topic-breakout.subtopic-breakout .breakout-question::before {
  left: .8rem; width: 1.6rem; height: 1.6rem; font-size: .92rem;
}
@media (max-width: 600px) {
  :root[data-theme] .topic-breakout .breakout-question { padding-left: 3rem; font-size: 1.02rem; }
  :root[data-theme] .topic-breakout .breakout-question::before { left: .7rem; }
  :root[data-theme] .topic-breakout.subtopic-breakout { padding: 1rem 1.05rem 1.1rem; }
}

/* ============================================================
   Navigation
   ============================================================ */
.nav-home { display: inline-flex; align-items: center; gap: .4rem; }
.nav-home .nav-ico { display: inline-grid; }
.nav-home .nav-ico svg { width: 16px; height: 16px; }

/* Dropdown and mobile items: icon tile, title and a one-line summary */
:root[data-theme] .nav-dropdown-menu { min-width: 300px; width: max-content; max-width: min(380px, 92vw); }
:root[data-theme] .nav-dropdown-menu .nav-item-title { white-space: nowrap; }
:root[data-theme] :is(.nav-dropdown-menu, .mobile-menu) a.nav-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .8rem;
  padding: .5rem 2rem .5rem .55rem;
  white-space: normal;
  color: var(--pc-ink);
}
:root[data-theme] .nav-dropdown-menu a.nav-item::before { display: none; }
:root[data-theme] .nav-dropdown-menu a.nav-item:hover { padding-left: .8rem; }
.nav-item .nav-ico {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--stock) 16%, transparent);
  color: var(--stock-ink);
  transition: background 160ms ease, color 160ms ease, transform 260ms cubic-bezier(.3,1.6,.5,1);
}
.nav-item .nav-ico svg { width: 19px; height: 19px; }
.nav-item:hover .nav-ico, .nav-item:focus-visible .nav-ico,
.nav-item.active .nav-ico, .nav-item[aria-current] .nav-ico {
  background: var(--stock);
  color: var(--on-stock);
}
.nav-item:hover .nav-ico { transform: rotate(-6deg); }
.nav-item-text { display: grid; gap: .1rem; min-width: 0; }
.nav-item-title { font-weight: 650; font-size: .9rem; line-height: 1.25; color: var(--pc-ink); }
.nav-item-desc { font-size: .74rem; line-height: 1.3; color: var(--pc-muted); font-weight: 500; }
.nav-item.active .nav-item-title, .nav-item[aria-current] .nav-item-title { font-weight: 800; }
:root[data-theme] .nav-dropdown-menu a.nav-item.active,
:root[data-theme] .nav-dropdown-menu a.nav-item[aria-current] {
  background: color-mix(in srgb, var(--stock) 10%, var(--pc-sheet));
}
:root[data-theme] .nav-dropdown-menu a.nav-item::after { color: var(--stock-ink); }
:root[data-theme] .nav-dropdown:not(.nav-dropdown-y11):not(.nav-dropdown-y12) .nav-dropdown-menu::before {
  background: linear-gradient(90deg, var(--pc-teal), var(--pc-mustard));
}

@media (min-width: 769px) {
  /* Current section tab: underline sits below the label, clear of the badge */
  :root[data-theme] .nav-links > li > a[aria-current]::after,
  :root[data-theme] .nav-dropdown.nav-dropdown--has-active .nav-dropdown-btn::after { bottom: -1px; }
  :root[data-theme="dark"] .nav-links {
    background: #1b1916;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px #3a352d;
  }
  :root[data-theme="dark"] .nav-links > li > a:hover,
  :root[data-theme="dark"] .nav-dropdown-btn:hover,
  :root[data-theme="dark"] .nav-dropdown.open .nav-dropdown-btn { background: #2f2b25; color: var(--pc-ink); }
  :root[data-theme="dark"] .nav-links > li > a[aria-current],
  :root[data-theme="dark"] .nav-dropdown.nav-dropdown--has-active .nav-dropdown-btn {
    background: #3a352d;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 1px 2px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] .nav-dropdown.nav-dropdown--has-active .nav-dropdown-btn { background: #3a352d; color: #fff; }

/* Hamburger: three bars fold into a cross */
.hamburger span { transform-origin: center; transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 160ms ease; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile panel */
:root[data-theme] .mobile-menu { padding: 1rem 1rem 2.5rem; }
:root[data-theme] .mobile-menu a.nav-item { padding: .55rem .7rem; margin-bottom: .2rem; border-radius: 10px; }
:root[data-theme] .mobile-menu a.nav-item:hover,
:root[data-theme] .mobile-menu a.nav-item.active,
:root[data-theme] .mobile-menu a.nav-item[aria-current] { background: color-mix(in srgb, var(--stock) 10%, var(--pc-sheet)); }
:root[data-theme] .mobile-menu .nav-ico { width: 40px; height: 40px; }
:root[data-theme] .mobile-menu a.nav-item.mobile-home { --stock: var(--pc-mustard); --stock-ink: var(--pc-ink); margin-bottom: 1.1rem; background: var(--pc-sheet); box-shadow: var(--pc-shadow-1); }
:root[data-theme] .mobile-menu-section { margin-bottom: 1.1rem; }
:root[data-theme] .mobile-menu-label {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .7rem .45rem;
  margin-bottom: .35rem;
  border-bottom: 1px dashed var(--pc-rule-strong);
  color: var(--stock-ink);
  font-size: .72rem; letter-spacing: .12em;
}
:root[data-theme] .mobile-menu-label .badge { font-size: .58rem; padding: .1rem .4rem; border-radius: 4px; letter-spacing: .06em; }
:root[data-theme] .mobile-menu-theme { margin-top: 1.5rem; }
@media (min-width: 920px) { .mobile-menu { display: none; } }  /* matches the hamburger breakpoint in styles.css */

/* ============================================================
   Dark mode: contrast fixes
   ============================================================ */
/* Text sitting on a pale accent fill turns dark */
:root[data-theme="dark"] .year-badge-12,
:root[data-theme="dark"] .year-badge-11,
:root[data-theme="dark"] .step-num,
:root[data-theme="dark"] .skip-link,
:root[data-theme="dark"] .topic-card .card-icon,
:root[data-theme="dark"] .tools-panel h3 .tools-icon { color: var(--on-stock); }
/* Part banners keep white text on a deep fill */
:root[data-theme="dark"] .part-block { background-color: #24514f; }
:root.pc-y11[data-theme="dark"] .part-block { background-color: #2c5a44; }
:root[data-theme="dark"] .part-block .part-number { color: rgba(255,255,255,.82); }
/* Assessor tape label: lighter tone so its dark label text reads */
:root[data-theme="dark"] .callout.assessor { --tone: #c9955e; }
/* Faint decorative marks raised to visible */
:root[data-theme="dark"] .study-guide-step { color: #6b6253; }
:root[data-theme="dark"] .sdlc-arrow { --pc-rule-strong: #7a7060; }
:root[data-theme="dark"] .alpha-btn.disabled { color: #7c7263; }
:root[data-theme="dark"] .algo-trace .trace-line:not(.is-on) .trace-ln { color: #9a8f7e; }
:root[data-theme="dark"] .alpha-btn.active { color: var(--on-stock); }
.video-box-label .video-icon, [data-theme="dark"] .video-box-label .video-icon { background: #c62828; }
/* Cards get a hairline edge: paper shadows vanish on a dark page */
:root[data-theme="dark"] :is(.topic-card, .study-guide-card, .callout, .info-card,
  .key-term-item, .tools-panel, .tools-used, .video-box, .nav-dropdown-menu, .sidebar .toc-list,
  .content-body h2.syllabus-phase, .topic-breakout.subtopic-breakout, .quiz, .figure) {
  outline: 1px solid rgba(255,255,255,.07);
  outline-offset: -1px;
}
/* Part label: full opacity so it reads on the banner */
:root[data-theme] .part-block .part-number { opacity: 1; color: rgba(255,255,255,.88); }

/* Both themes: text that was the same colour as its background */
/* A table wrapped in a code block took the dark code background */
:root[data-theme] .code-block:has(> table) { background: none; padding: 0; border: 0; box-shadow: none; }
:root[data-theme] .code-header strong { color: inherit; }
/* White on mustard is too faint: dark ink instead */
:root[data-theme] .callout.warning > strong:first-child,
:root[data-theme] .callout.warn > strong:first-child,
:root[data-theme] .phase-4 .phase-num,
:root[data-theme] .badge-phase4 { color: #1b1916; }
:root[data-theme] .code-block:has(> table) > .copy-btn { display: none; }

.lost-link:has(.f-ico) { display: inline-flex; align-items: center; gap: .45rem; }
.lost-link .f-ico { opacity: .85; }

/* Code block titles leave room for the Copy button */
:root[data-theme] .code-block:has(> .copy-btn) > .code-header { padding-right: 5rem; }
:root[data-theme] .code-header .code-lang { min-width: 0; overflow-wrap: anywhere; }
/* Breadcrumb wraps between items, not inside them */
:root[data-theme] .topic-breadcrumb { flex-wrap: wrap; row-gap: .2rem; }
:root[data-theme] .topic-breadcrumb a { white-space: nowrap; }

/* ── Glossary: topic tags filter the glossary to that topic ── */
button.chip-topic {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
button.chip-topic:hover, button.chip-topic:focus-visible { transform: translateY(-1px); filter: brightness(.95) saturate(1.2); }
button.chip-topic:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.c-ico { display: inline-grid; }
.c-ico svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Previous / next topic cards ── */
.topic-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 3rem 0 1.5rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--pc-rule-strong, #ccc);
}
.pager-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: var(--pc-cream);
  background-image: var(--pc-grain);
  box-shadow: var(--pc-shadow-2);
  color: var(--pc-ink);
  text-decoration: none;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease;
}
.pager-next { grid-template-columns: 1fr auto; text-align: right; }
.pager-next .pager-ico { order: 2; }
.pager-card:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow-3); }
.pager-card:focus-visible { outline: 2px solid var(--stock); outline-offset: 3px; }
.pager-empty { background: none; box-shadow: none; }
.pager-ico {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--stock);
  color: var(--on-stock);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--stock) 45%, var(--pc-mustard));
  transition: transform 300ms cubic-bezier(.3,1.6,.5,1);
}
.pager-card:hover .pager-ico { transform: rotate(-6deg) scale(1.05); }
.pager-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pager-text { display: grid; gap: .15rem; min-width: 0; }
.pager-dir { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--stock-ink); }
.pager-prev .pager-dir::before { content: '← '; }
.pager-next .pager-dir::after { content: ' →'; }
.pager-title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; color: var(--pc-ink); }
.pager-desc { font-size: .82rem; color: var(--pc-muted); }
:root[data-theme="dark"] .pager-card:not(.pager-empty) { outline: 1px solid rgba(255,255,255,.07); outline-offset: -1px; }
@media (max-width: 640px) {
  .topic-pager { grid-template-columns: 1fr; }
  .pager-empty { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pager-card, .pager-ico, button.chip-topic { transition: none; }
}
a.footer-brand { text-decoration: none; color: inherit; width: fit-content; }
a.footer-brand:hover .footer-logo { transform: rotate(-6deg); }
.footer-logo { transition: transform 260ms cubic-bezier(.3,1.6,.5,1); }

/* ── Focus-area colours, topic headers and home strip ─────────
   Each focus area has its own colour, set on the page
   (<html data-focus="…">, written by scripts/topic-header.py) and on the
   links that point at it, so a topic looks the same wherever it appears.
   Light mode uses the deeper value, dark mode the brighter one. */

:root[data-focus="pf"][data-theme][lang] { --fx: #2A6F73; --on-fx: #fff; }
:root[data-theme][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="programming-fundamentals.html"] { --fx: #2A6F73; --on-fx: #fff; --stock: #2A6F73; --stock-ink: color-mix(in srgb, #2A6F73 72%, #000); }
:root[data-theme="dark"][data-focus="pf"] { --fx: #6FC3C7; --on-fx: #1b1916; }
:root[data-theme="dark"][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="programming-fundamentals.html"] { --fx: #6FC3C7; --on-fx: #1b1916; --stock: #6FC3C7; --stock-ink: color-mix(in srgb, #6FC3C7 62%, #fff); }

:root[data-focus="oop"][data-theme][lang] { --fx: #5B4BDB; --on-fx: #fff; }
:root[data-theme][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="object-oriented-paradigm.html"] { --fx: #5B4BDB; --on-fx: #fff; --stock: #5B4BDB; --stock-ink: color-mix(in srgb, #5B4BDB 72%, #000); }
:root[data-theme="dark"][data-focus="oop"] { --fx: #A79BFF; --on-fx: #1b1916; }
:root[data-theme="dark"][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="object-oriented-paradigm.html"] { --fx: #A79BFF; --on-fx: #1b1916; --stock: #A79BFF; --stock-ink: color-mix(in srgb, #A79BFF 62%, #fff); }

:root[data-focus="mech"][data-theme][lang] { --fx: #9A6000; --on-fx: #fff; }
:root[data-theme][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="programming-mechatronics.html"] { --fx: #9A6000; --on-fx: #fff; --stock: #9A6000; --stock-ink: color-mix(in srgb, #9A6000 72%, #000); }
:root[data-theme="dark"][data-focus="mech"] { --fx: #F0B94D; --on-fx: #1b1916; }
:root[data-theme="dark"][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="programming-mechatronics.html"] { --fx: #F0B94D; --on-fx: #1b1916; --stock: #F0B94D; --stock-ink: color-mix(in srgb, #F0B94D 62%, #fff); }

:root[data-focus="ssa"][data-theme][lang] { --fx: #B83A3A; --on-fx: #fff; }
:root[data-theme][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="secure-software-architecture.html"] { --fx: #B83A3A; --on-fx: #fff; --stock: #B83A3A; --stock-ink: color-mix(in srgb, #B83A3A 72%, #000); }
:root[data-theme="dark"][data-focus="ssa"] { --fx: #F08A7A; --on-fx: #1b1916; }
:root[data-theme="dark"][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="secure-software-architecture.html"] { --fx: #F08A7A; --on-fx: #1b1916; --stock: #F08A7A; --stock-ink: color-mix(in srgb, #F08A7A 62%, #fff); }

:root[data-focus="web"][data-theme][lang] { --fx: #2F6DB5; --on-fx: #fff; }
:root[data-theme][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="programming-for-the-web.html"] { --fx: #2F6DB5; --on-fx: #fff; --stock: #2F6DB5; --stock-ink: color-mix(in srgb, #2F6DB5 72%, #000); }
:root[data-theme="dark"][data-focus="web"] { --fx: #7FB0F0; --on-fx: #1b1916; }
:root[data-theme="dark"][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="programming-for-the-web.html"] { --fx: #7FB0F0; --on-fx: #1b1916; --stock: #7FB0F0; --stock-ink: color-mix(in srgb, #7FB0F0 62%, #fff); }

:root[data-focus="auto"][data-theme][lang] { --fx: #3F7D5C; --on-fx: #fff; }
:root[data-theme][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="software-automation.html"] { --fx: #3F7D5C; --on-fx: #fff; --stock: #3F7D5C; --stock-ink: color-mix(in srgb, #3F7D5C 72%, #000); }
:root[data-theme="dark"][data-focus="auto"] { --fx: #8CCB9F; --on-fx: #1b1916; }
:root[data-theme="dark"][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="software-automation.html"] { --fx: #8CCB9F; --on-fx: #1b1916; --stock: #8CCB9F; --stock-ink: color-mix(in srgb, #8CCB9F 62%, #fff); }

:root[data-focus="sep"][data-theme][lang] { --fx: #A24E8F; --on-fx: #fff; }
:root[data-theme][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="software-engineering-project.html"] { --fx: #A24E8F; --on-fx: #fff; --stock: #A24E8F; --stock-ink: color-mix(in srgb, #A24E8F 72%, #000); }
:root[data-theme="dark"][data-focus="sep"] { --fx: #E39BD0; --on-fx: #1b1916; }
:root[data-theme="dark"][lang] a:is(.topic-card, .hero-topic, .nav-item, .pager-card)[href$="software-engineering-project.html"] { --fx: #E39BD0; --on-fx: #1b1916; --stock: #E39BD0; --stock-ink: color-mix(in srgb, #E39BD0 62%, #fff); }

/* The page's accent colour replaces the year colour inside the header and the page body */
:root[data-focus][data-theme] :is(.topic-header, .page-layout) {
  --pc-sage: var(--fx); --pc-terracotta: var(--fx); --pc-teal: var(--fx); --pc-teal-ink: color-mix(in srgb, var(--fx) 78%, #000);
  --year11: var(--fx); --year12: var(--fx); --year11-dark: var(--pc-teal-ink); --year12-dark: var(--pc-teal-ink);
  --year11-light: color-mix(in srgb, var(--fx) 14%, var(--pc-cream)); --year12-light: var(--year11-light);
  --primary: var(--fx); --primary-dark: var(--pc-teal-ink); --primary-light: var(--year11-light);
}
:root[data-theme="dark"][data-focus] :is(.topic-header, .page-layout) { --pc-teal-ink: color-mix(in srgb, var(--fx) 70%, #fff); }

/* Header: paper tinted with the topic colour, and hills cut from the same stock */
:root[data-focus][data-theme] .topic-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fx) 9%, #f8e8cc) 0%, color-mix(in srgb, var(--fx) 17%, #f1d7b4) 55%, color-mix(in srgb, var(--fx) 28%, #ecc9a4) 100%);
}
:root[data-focus][data-theme="dark"] .topic-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fx) 10%, #1f2433) 0%, color-mix(in srgb, var(--fx) 14%, #262538) 55%, color-mix(in srgb, var(--fx) 20%, #2c2536) 100%);
}
:root[data-focus] .topic-header .pc-l1 { fill: color-mix(in srgb, var(--fx) 22%, #f6dfae); }
:root[data-focus] .topic-header .pc-l2 { fill: color-mix(in srgb, var(--fx) 40%, #f0c9a9); }
:root[data-focus] .topic-header .pc-l3 { fill: color-mix(in srgb, var(--fx) 60%, #d7dfc5); }
:root[data-focus] .topic-header .pc-l4 { fill: color-mix(in srgb, var(--fx) 82%, #fff); }
:root[data-focus] .topic-header .pc-l5 { fill: color-mix(in srgb, var(--fx) 78%, #1c1a17); }
:root[data-focus][data-theme="dark"] .topic-header .pc-l1 { fill: color-mix(in srgb, var(--fx) 16%, #2b2a42); }
:root[data-focus][data-theme="dark"] .topic-header .pc-l2 { fill: color-mix(in srgb, var(--fx) 24%, #35304a); }
:root[data-focus][data-theme="dark"] .topic-header .pc-l3 { fill: color-mix(in srgb, var(--fx) 32%, #2a3a3a); }
:root[data-focus][data-theme="dark"] .topic-header .pc-l4 { fill: color-mix(in srgb, var(--fx) 40%, #232c28); }
:root[data-focus][data-theme="dark"] .topic-header .pc-l5 { fill: color-mix(in srgb, var(--fx) 28%, #1c2322); }
:root[data-focus] .topic-hero-icon { --stock: var(--fx); --stock-ink: var(--pc-teal-ink); }

/* Cut-paper illustration */
.topic-viz { min-width: 0; margin-top: 1.2rem; }
.topic-viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.topic-viz .sv-sheet { fill: var(--pc-cream); stroke: rgba(70, 45, 15, .12); filter: drop-shadow(0 6px 7px rgba(70, 45, 15, .3)); }
.topic-viz .sv-tape { fill: var(--pc-mustard); opacity: .85; }
.topic-viz .sv-p { filter: drop-shadow(0 1.5px 0 rgba(40, 25, 5, .3)); }
.topic-viz .sv-t { fill: var(--fx); }
.topic-viz .sv-t2 { fill: color-mix(in srgb, var(--fx) 55%, var(--pc-cream)); }
.topic-viz .sv-t3 { fill: color-mix(in srgb, var(--fx) 22%, var(--pc-cream)); }
.topic-viz .sv-m { fill: var(--pc-mustard); }
.topic-viz .sv-w { fill: #fffdf7; }
.topic-viz .sv-w.stroke { stroke: var(--pc-ink-soft); stroke-width: 1.5; stroke-linejoin: round; }
.topic-viz .sv-code { fill: #2b2822; }
.topic-viz .sv-k, .topic-viz .sv-ink { fill: var(--pc-ink); }
.topic-viz .sv-line { fill: none; stroke: var(--pc-ink-soft); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.topic-viz .sv-line.thin { stroke-width: 1.6; }
.topic-viz .sv-line.dash { stroke-dasharray: 6 5; }
.topic-viz .sv-edge { stroke: rgba(240, 230, 210, .28); stroke-width: 1.2; }
.topic-viz .sv-text { font: 700 12.5px var(--font-mono); fill: #1c1a17; letter-spacing: .02em; }
.topic-viz .sv-text.s { font-size: 10.5px; font-weight: 600; }
.topic-viz .sv-text.b { font-size: 16px; }
.topic-viz .sv-text.w { fill: var(--on-fx); }
.topic-viz .sv-text.c, .topic-viz .sv-text.code { fill: #efe7d6; }
:root[data-theme="dark"] .topic-viz .sv-sheet { stroke: rgba(255, 255, 255, .06); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
:root[data-theme="dark"] .topic-viz .sv-p { filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, .5)); }
:root[data-theme="dark"] .topic-viz .sv-w { fill: #3a352d; }
:root[data-theme="dark"] .topic-viz .sv-m { fill: #b8832a; }
:root[data-theme="dark"] .topic-viz .sv-code { fill: #14120f; }
:root[data-theme="dark"] .topic-viz .sv-text { fill: #efe7d6; }
:root[data-theme="dark"] .topic-viz .sv-text.w { fill: var(--on-fx); }
:root[data-theme="dark"] .topic-viz .sv-line { stroke: #cfc5b1; }
:root[data-theme="dark"] .topic-viz .sv-k, :root[data-theme="dark"] .topic-viz .sv-ink { fill: #efe7d6; }

/* Figures and part cards, as paper pieces */
.topic-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-top: 1.6rem; }
.topic-stat {
  padding: .75rem 1rem .8rem; border-radius: 8px;
  background: var(--pc-cream); color: var(--pc-ink);
  box-shadow: inset 0 4px 0 var(--fx), var(--pc-shadow-1);
}
.topic-stat:nth-child(odd) { transform: rotate(-.5deg); } .topic-stat:nth-child(even) { transform: rotate(.5deg); }
.topic-stat-num { display: block; margin-top: .2rem; font: 700 clamp(1.6rem, 3vw, 2.2rem)/1 var(--font-display); color: var(--pc-ink); font-variant-numeric: tabular-nums; }
.topic-stat-label { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink-soft); }
.topic-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .9rem; margin-top: 1rem; }
.topic-part {
  display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem .75rem; border-radius: 8px;
  background: var(--pc-cream); color: var(--pc-ink); text-decoration: none;
  box-shadow: -4px 5px 0 -1px var(--fx), var(--pc-shadow-1);
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1), box-shadow 220ms ease;
}
.topic-part:hover { transform: translateY(-3px) rotate(.4deg); box-shadow: -6px 8px 0 -1px var(--fx), var(--pc-shadow-2); }
.topic-part:focus-visible { outline: 3px solid var(--pc-ink); outline-offset: 2px; }
.topic-part-num { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-teal-ink, var(--fx)); }
.topic-part-name { font: 700 1.05rem/1.25 var(--font-display); }
.topic-part-count { margin-top: auto; padding-top: .3rem; font-size: .78rem; color: var(--pc-ink-soft); }
.topic-map-link { display: inline-block; margin-top: .9rem; font-weight: 600; font-size: .88rem; color: var(--pc-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fx); }

@media (min-width: 1024px) {
  :root[data-theme] .topic-header-inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    grid-template-areas: "crumb crumb" "title viz" "desc viz" "meta viz" "stats stats" "parts parts" "map map";
  }
  :root[data-theme] .topic-header-inner > .topic-title-row { grid-area: title; }
  :root[data-theme] .topic-header-inner > .topic-viz { grid-area: viz; align-self: center; margin-top: 0; transform: rotate(.8deg); }
  :root[data-theme] .topic-header-inner > .topic-stats { grid-area: stats; }
  :root[data-theme] .topic-header-inner > .topic-parts { grid-area: parts; }
  :root[data-theme] .topic-header-inner > .topic-map-link { grid-area: map; justify-self: start; }
}
@media (max-width: 640px) { .topic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topic-viz { max-width: 440px; } }
@media (prefers-reduced-motion: reduce) { .topic-part, .topic-part:hover { transition: none; transform: none; } }

/* Home: strip of the seven focus areas under the hero text, and card illustrations */
.hero-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; width: min(72rem, 92vw); margin: 2rem calc(50% - min(72rem, 92vw) / 2) 0; }  /* centred by margin, not transform: the hero's rise-in animation ends at transform:none */
.hero-topic {
  display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .95rem .35rem .4rem;
  border-radius: 999px; background: var(--pc-cream); color: var(--pc-ink); text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--fx), var(--pc-shadow-1);
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1), box-shadow 220ms ease;
}
.hero-topic:nth-child(odd) { transform: rotate(-.8deg); } .hero-topic:nth-child(even) { transform: rotate(.8deg); }
.hero-topic:hover { transform: translateY(-3px) rotate(0); box-shadow: inset 0 -3px 0 var(--fx), var(--pc-shadow-2); }
.hero-topic:focus-visible { outline: 3px solid var(--pc-ink); outline-offset: 2px; }
.ht-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--fx); color: var(--on-fx); }
.ht-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ht-text { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.ht-year { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-soft); }
.ht-name { font-size: .85rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .hero-topic, .hero-topic:hover { transition: none; } }

:root[data-theme] .topic-card .card-art {
  margin: -1.75rem -1.75rem 1.2rem; padding: .9rem 1.1rem .7rem;
  border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--fx) 16%, var(--pc-sheet));
  border-bottom: 4px solid var(--fx);
}
.card-art.topic-viz { margin-top: 0; }
.card-art svg { max-height: 160px; }

/* Glossary: topic tags take their focus area's colour (the same values as above) */
:root[data-theme] button.chip-topic[data-topic="Programming Fundamentals"] { --tone: #2A6F73; }
:root[data-theme="dark"] button.chip-topic[data-topic="Programming Fundamentals"] { --tone: #6FC3C7; }
:root[data-theme] button.chip-topic[data-topic="Object-Oriented Paradigm"] { --tone: #5B4BDB; }
:root[data-theme="dark"] button.chip-topic[data-topic="Object-Oriented Paradigm"] { --tone: #A79BFF; }
:root[data-theme] button.chip-topic[data-topic="Programming Mechatronics"] { --tone: #9A6000; }
:root[data-theme="dark"] button.chip-topic[data-topic="Programming Mechatronics"] { --tone: #F0B94D; }
:root[data-theme] button.chip-topic[data-topic="Secure Software Architecture"] { --tone: #B83A3A; }
:root[data-theme="dark"] button.chip-topic[data-topic="Secure Software Architecture"] { --tone: #F08A7A; }
:root[data-theme] button.chip-topic[data-topic="Programming for the Web"] { --tone: #2F6DB5; }
:root[data-theme="dark"] button.chip-topic[data-topic="Programming for the Web"] { --tone: #7FB0F0; }
:root[data-theme] button.chip-topic[data-topic="Software Automation"] { --tone: #3F7D5C; }
:root[data-theme="dark"] button.chip-topic[data-topic="Software Automation"] { --tone: #8CCB9F; }
:root[data-theme] button.chip-topic[data-topic="Software Engineering Project"] { --tone: #A24E8F; }
:root[data-theme="dark"] button.chip-topic[data-topic="Software Engineering Project"] { --tone: #E39BD0; }

/* Illustrations: pieces settle onto the sheet, and a few move gently in the topic header only */
@media (prefers-reduced-motion: no-preference) {
  .topic-viz .sv-p { animation: sv-settle 700ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: 120ms; }
  .topic-viz .a-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-pop 450ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 500ms); }
  .topic-header .a-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-spin 18s linear infinite; }
  .topic-header .a-pulse { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-pulse 2.4s ease-in-out infinite; }
  .topic-header .a-req { animation: sv-req 3.2s ease-in-out infinite; }
  .topic-header .a-res { animation: sv-res 3.2s ease-in-out infinite; animation-delay: 1.6s; }
  .topic-header .a-lit { animation: sv-lit 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1s); }
  .topic-header .a-travel { animation: sv-travel 7s ease-in-out infinite alternate; }
  .topic-header .sv-edge, .topic-header .sv-line.dash { stroke-dasharray: 3 6; animation: sv-flow 1.8s linear infinite; }
  @keyframes sv-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes sv-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes sv-spin { to { transform: rotate(360deg); } }
  @keyframes sv-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
  @keyframes sv-req { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(62px); opacity: 0; } }
  @keyframes sv-res { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(-62px); opacity: 0; } }
  @keyframes sv-lit { 0%, 100% { opacity: 1; } 25% { opacity: .45; } }
  @keyframes sv-travel { from { transform: translateX(0); } to { transform: translateX(432px); } }
  @keyframes sv-flow { to { stroke-dashoffset: -18; } }
}

/* Print: the decorative header and card art stay off the page */
@media print {
  .topic-viz, .topic-stats, .topic-parts, .topic-map-link, .hero-topics { display: none !important; }
}

/* Hero strip on phones: stay inside the column, two to a row, and take less height */
@media (max-width: 1100px) {
  .hero-topics { width: auto; margin-inline: 0; }
}
@media (max-width: 600px) {
  .hero-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.4rem; }
  .hero-topic, .hero-topic:nth-child(odd), .hero-topic:nth-child(even) { transform: none; border-radius: 14px; padding: .4rem .6rem .4rem .4rem; align-items: center; }
  .hero-topic:last-child { grid-column: 1 / -1; justify-self: center; }
  .ht-name { font-size: .78rem; line-height: 1.2; }
  .ht-ico { width: 26px; height: 26px; }
}

/* Phones: grids must not grow to their widest child (a code card or a long term), and long outcome badges wrap */
.info-grid > *, .key-terms > * { min-width: 0; }
@media (max-width: 768px) {
  :root[data-theme] .info-grid, :root[data-theme] .key-terms { grid-template-columns: minmax(0, 1fr); }
}
:root[data-theme] .outcome-badge { white-space: normal; max-width: 100%; border-radius: 1rem; line-height: 1.35; }
:not(pre) > code { overflow-wrap: anywhere; }
.video-meta { white-space: normal; overflow-wrap: anywhere; }

/* ── Topic header, round two: a way in, live part progress, and a compact phone layout ── */
.topic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: 1.1rem; }
.topic-start {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 100%;
  padding: .7rem 1.3rem; border-radius: 999px;
  background: var(--pc-ink); color: var(--pc-cream);
  font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none;
  box-shadow: 0 3px 0 var(--fx), var(--pc-shadow-2);
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1), box-shadow 220ms ease;
}
.topic-start:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--fx), var(--pc-shadow-3); }
.topic-start:focus-visible { outline: 3px solid var(--fx); outline-offset: 3px; }
:root[data-theme="dark"] .topic-start { background: var(--fx); color: var(--on-fx); box-shadow: 0 3px 0 rgba(0, 0, 0, .35), var(--pc-shadow-2); }
.topic-actions .topic-map-link { margin: 0; }
.topic-part.is-done { background: color-mix(in srgb, var(--fx) 12%, var(--pc-cream)); }
.topic-part.is-done .topic-part-count { color: var(--pc-teal-ink, var(--fx)); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .topic-start, .topic-start:hover { transition: none; transform: none; } }

@media (min-width: 1024px) {
  :root[data-theme] .topic-header-inner {
    grid-template-areas: "crumb crumb" "title viz" "desc viz" "meta viz" "act viz" "stats stats" "parts parts";
  }
  :root[data-theme] .topic-header-inner > .topic-actions { grid-area: act; }
}
@media (max-width: 1023px) {
  .topic-header-inner { display: flex; flex-direction: column; }
  .topic-header-inner > .topic-viz { order: 9; margin-top: 1.4rem; width: 100%; max-width: 360px; align-self: center; }
}
@media (max-width: 640px) {
  .topic-header-inner > p { font-size: .95rem; line-height: 1.55; }
  .topic-start { width: 100%; justify-content: center; text-align: center; }
  .topic-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-top: 1rem; }
  .topic-stat { padding: .5rem .55rem .55rem; }
  .topic-stat-num { font-size: 1.3rem; }
  .topic-stat-label { font-size: .56rem; letter-spacing: .05em; }
  .topic-parts { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: .7rem; margin-top: .7rem; padding: .2rem .4rem .8rem .2rem; scrollbar-width: thin; }
  .topic-part { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ── Topic header motion and the slim bar ── */
.topic-part { position: relative; overflow: hidden; }
.topic-part::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 4px;
  width: calc(var(--pg, 0) * 100%); background: var(--fx);
  transition: width 900ms cubic-bezier(.2, .7, .2, 1) 300ms;
}
.topic-start span[aria-hidden] { display: inline-block; transition: translate 220ms cubic-bezier(.2, .7, .2, 1); }
.topic-start:hover span[aria-hidden] { translate: 4px 0; }
.topic-viz svg { transition: transform 260ms cubic-bezier(.2, .7, .2, 1); will-change: transform; }

.topic-bar {
  position: fixed; left: 0; right: 0; top: var(--tb-top, 64px); z-index: calc(var(--z-navbar, 100) - 1);
  display: flex; align-items: center; gap: .8rem;
  padding: .45rem max(1rem, calc((100% - 1320px) / 2 + 1.5rem));
  background: var(--pc-cream); background-image: var(--pc-grain);
  color: var(--pc-ink);
  box-shadow: inset 0 -4px 0 var(--fx), var(--pc-shadow-2);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform 340ms cubic-bezier(.2, .7, .2, 1), opacity 220ms ease, visibility 0s linear 340ms;
}
.topic-bar.is-on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.topic-bar-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--fx); color: var(--on-fx); box-shadow: var(--pc-shadow-1); }
.topic-bar-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topic-bar-title { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1rem/1.2 var(--font-display); }
.topic-bar-prog { flex: 1 1 60px; max-width: 220px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--pc-ink) 14%, transparent); overflow: hidden; margin-left: auto; }
.topic-bar-fill { display: block; height: 100%; width: calc(var(--tb-pg, 0) * 100%); background: var(--fx); border-radius: 999px; transition: width 500ms cubic-bezier(.2, .7, .2, 1); }
.topic-bar-count { flex: none; font-weight: 700; font-size: .76rem; color: var(--pc-ink-soft); min-width: 3ch; }
.topic-bar-go {
  flex: none; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .4rem .95rem; border-radius: 999px; background: var(--pc-ink); color: var(--pc-cream);
  font-weight: 700; font-size: .82rem; line-height: 1.2; text-decoration: none; box-shadow: var(--pc-shadow-1);
}
:root[data-theme="dark"] .topic-bar-go { background: var(--fx); color: var(--on-fx); }
.topic-bar-go:focus-visible { outline: 3px solid var(--fx); outline-offset: 2px; }
@media (max-width: 640px) { .topic-bar-prog, .topic-bar-count { display: none; } .topic-bar-title { flex: 1 1 auto; } .topic-bar-go { max-width: 52vw; } }
@media print { .topic-bar { display: none !important; } }

@media (prefers-reduced-motion: no-preference) {
  .topic-header-inner > * { animation: th-rise 720ms cubic-bezier(.2, .7, .2, 1) both; }
  .topic-header-inner > :nth-child(1) { animation-delay: 30ms; }
  .topic-header-inner > :nth-child(2) { animation-delay: 90ms; }
  .topic-header-inner > :nth-child(3) { animation-delay: 160ms; }
  .topic-header-inner > :nth-child(4) { animation-delay: 230ms; }
  .topic-header-inner > :nth-child(5) { animation-delay: 300ms; }
  .topic-header-inner > .topic-viz { animation-name: th-drop; animation-delay: 280ms; }
  .topic-header-inner > .topic-stats { animation-delay: 400ms; }
  .topic-header-inner > .topic-parts { animation-delay: 500ms; }
  .topic-stat { animation: th-flip 620ms cubic-bezier(.2, .7, .2, 1) both; }
  .topic-stat:nth-child(1) { animation-delay: 480ms; } .topic-stat:nth-child(2) { animation-delay: 560ms; }
  .topic-stat:nth-child(3) { animation-delay: 640ms; } .topic-stat:nth-child(4) { animation-delay: 720ms; }
  .topic-title-row .topic-hero-icon { animation: th-pop 650ms cubic-bezier(.3, 1.6, .5, 1) 140ms both; }
  .topic-start.is-continue { animation: th-nudge 2.8s ease-out 1.4s infinite; }
  @keyframes th-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @keyframes th-drop { from { opacity: 0; translate: 0 -26px; rotate: -3deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
  @keyframes th-flip { from { opacity: 0; translate: 0 12px; rotate: -2.5deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
  @keyframes th-pop { from { opacity: 0; scale: .5; rotate: -16deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
  @keyframes th-nudge { 0%, 70%, 100% { box-shadow: 0 3px 0 var(--fx), var(--pc-shadow-2); } 85% { box-shadow: 0 3px 0 var(--fx), 0 0 0 9px color-mix(in srgb, var(--fx) 0%, transparent), var(--pc-shadow-2); } }
}

/* ── Navigation, brought in line with the topic headers ──
   On a focus-area page the reading line and the current-section underline use that topic's
   colour; menus and the logo have a little motion. */
:root[data-focus][data-theme] .reading-progress { height: 4px; background: linear-gradient(90deg, var(--fx), var(--pc-mustard)); }
:root[data-focus][data-theme] .nav-dropdown-y11.nav-dropdown--has-active .nav-dropdown-btn::after,
:root[data-focus][data-theme] .nav-dropdown-y12.nav-dropdown--has-active .nav-dropdown-btn::after,
:root[data-focus][data-theme] .nav-links > li > a[aria-current]::after { background: var(--fx); }
/* Phone menu and dropdown: the current topic's row takes its colour */
:root[data-theme] :is(.mobile-menu, .nav-dropdown-menu) a.nav-item[aria-current] { background: color-mix(in srgb, var(--stock, var(--fx)) 16%, var(--pc-cream)); }

@media (prefers-reduced-motion: no-preference) {
  .nav-dropdown.open .nav-dropdown-menu a.nav-item { animation: nv-in 320ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 40ms); }
  .nav-dropdown.open .nav-dropdown-menu a.nav-item .nav-ico { animation: nv-pop 420ms cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 140ms); }
  .mobile-menu.open a.nav-item { animation: nv-slide 380ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(min(var(--i, 0), 10) * 32ms + 110ms); }
  .mobile-menu.open .mobile-menu-label { animation: nv-in 320ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: 160ms; }
  .nav-links > li > a[aria-current]::after,
  :root[data-theme] .nav-dropdown.nav-dropdown--has-active .nav-dropdown-btn::after { animation: nv-line 520ms cubic-bezier(.2, .7, .2, 1) 220ms both; }
  .nav-brand:hover .nav-logo { animation: nv-wiggle 560ms cubic-bezier(.2, .7, .2, 1); }
  @keyframes nv-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
  @keyframes nv-slide { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes nv-pop { from { scale: .5; } to { scale: 1; } }
  @keyframes nv-line { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }
  @keyframes nv-wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -9deg; } 65% { rotate: 6deg; } }
}

/* Touch screens keep :hover after a tap, which left the menu button tilted and its cross skewed */
@media (hover: none) {
  :root[data-theme] .btn-icon:hover { transform: none; box-shadow: var(--pc-shadow-1); }
}

/* ── Clearer layers: the cards and tables on a section's content area get an edge ──
   Cream cards on the tan content area relied on a soft shadow alone. They now have a thin
   edge as well, so each reads as a sheet laid on the one below. */
:root[data-theme="light"] :is(.table-wrap, .info-card, .key-term-item, .figure, .quiz-opt, .res-card, .ex-card, .def-card) {
  border: 1px solid var(--pc-rule-strong);
}
:root[data-theme="light"] .section-body { border: 1px solid var(--pc-rule-strong); }
:root[data-theme="light"] .quiz { border: 1px solid var(--pc-rule-strong); }

/* ── Tables: clearer rows, columns, header and caption ── */
:root[data-theme] .table-wrap { border-radius: 10px; margin: 1.5rem 0; }
:root[data-theme] table { border-collapse: separate; border-spacing: 0; width: 100%; }
:root[data-theme] thead th { padding: .85rem 1rem; border-left: 1px solid rgba(255, 255, 255, .18); }
:root[data-theme] thead th:first-child { border-left: 0; }
:root[data-theme] tbody td, :root[data-theme] tbody th { padding: .8rem 1rem; vertical-align: top; line-height: 1.55; border-bottom: 1px solid color-mix(in srgb, var(--pc-rule-strong) 70%, transparent); }
:root[data-theme] tbody td + td { border-left: 1px solid color-mix(in srgb, var(--pc-rule) 85%, transparent); }
:root[data-theme] tbody tr:last-child td { border-bottom: 0; }
:root[data-theme] tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--pc-teal) 8%, var(--pc-sheet)); }
:root[data-theme] tbody tr:hover td { background: color-mix(in srgb, var(--pc-teal) 16%, var(--pc-sheet)); }
:root[data-theme] tbody td:first-child { background-color: color-mix(in srgb, var(--pc-teal) 7%, var(--pc-cream)); border-right: 2px solid color-mix(in srgb, var(--pc-teal) 40%, transparent); font-weight: 600; color: var(--pc-ink); }
:root[data-theme] tbody tr:nth-child(even) td:first-child { background-color: color-mix(in srgb, var(--pc-teal) 14%, var(--pc-sheet)); }
:root[data-theme] caption {
  caption-side: top; text-align: left;
  padding: .7rem 1rem; margin: 0;
  font: 700 .85rem/1.4 var(--font-body); color: var(--pc-ink);
  background: color-mix(in srgb, var(--pc-teal) 12%, var(--pc-cream));
  border-bottom: 1px solid color-mix(in srgb, var(--pc-teal) 35%, transparent);
}
@media (max-width: 640px) {
  :root[data-theme] tbody td, :root[data-theme] tbody th { padding: .65rem .75rem; }
  :root[data-theme] thead th { padding: .7rem .75rem; }
}

/* ── Year 11 and Year 12, set apart ──
   On the home page each year is its own sheet: a coloured banner with the year numeral, a tinted
   area and a coloured edge. In the navigation the two year menus are divided and each dropdown
   opens with a labelled header. */
:root[data-theme] :is(#year11, #year12) {
  --yc: var(--pc-sage); --on-yc: #fff;
  position: relative; margin: 2.5rem 0 0; overflow: clip;
  border: 1px solid color-mix(in srgb, var(--yc) 50%, var(--pc-rule-strong));
  border-radius: 14px;
  background: color-mix(in srgb, var(--yc) 7%, var(--pc-sheet));
  box-shadow: 0 5px 0 -1px color-mix(in srgb, var(--yc) 70%, #000), var(--pc-shadow-2);
}
:root[data-theme] #year12 { --yc: var(--pc-terracotta); }
:root[data-theme="dark"] :is(#year11, #year12) { --on-yc: #1b1916; }
:root[data-theme] :is(#year11, #year12) > .section-header {
  position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  margin: 0 0 1.6rem; padding: 1.2rem 1.6rem;
  background: var(--yc); border: 0; overflow: hidden;
}
:root[data-theme] :is(#year11, #year12) > .section-header::after { display: none; }
:root[data-theme] #year11 > .section-header::before, :root[data-theme] #year12 > .section-header::before {
  position: absolute; right: 1.2rem; top: 50%; translate: 0 -50%;
  font: 700 4rem/1 var(--font-display); color: var(--on-yc); opacity: .2; pointer-events: none;
}
:root[data-theme] #year11 > .section-header::before { content: '11'; }
:root[data-theme] #year12 > .section-header::before { content: '12'; }
:root[data-theme] :is(#year11, #year12) .section-title { color: var(--on-yc); position: relative; }
:root[data-theme] :is(#year11, #year12) .year-badge { background: color-mix(in srgb, var(--on-yc) 22%, transparent); color: var(--on-yc); border: 1px solid color-mix(in srgb, var(--on-yc) 45%, transparent); box-shadow: none; }
:root[data-theme] :is(#year11, #year12) .topic-count { position: relative; margin-right: 6.5rem; color: var(--on-yc); opacity: .92; }
:root[data-theme] :is(#year11, #year12) > .topics-grid { padding: 0 1.4rem 1.8rem; }
@media (max-width: 640px) {
  :root[data-theme] :is(#year11, #year12) > .section-header { padding: 1rem 1.1rem 1.1rem; flex-direction: column; align-items: flex-start; text-align: left; }
  :root[data-theme] :is(#year11, #year12) .section-title { text-align: left; }
  :root[data-theme] :is(#year11, #year12) .topic-count { margin-right: 0; }
  :root[data-theme] :is(#year11, #year12) > .topics-grid { padding: 0 .8rem 1.3rem; }
  :root[data-theme] #year11 > .section-header::before, :root[data-theme] #year12 > .section-header::before { font-size: 3.4rem; top: auto; bottom: -.35rem; translate: 0 0; }
}

/* Navigation: a divider between the groups, and a labelled header on each dropdown */
@media (min-width: 920px) {
  :root[data-theme] .nav-links > li.nav-dropdown-y12::before,
  :root[data-theme] .nav-links > li.nav-dropdown:not(.nav-dropdown-y11):not(.nav-dropdown-y12)::before {
    content: ''; position: absolute; left: -.25rem; top: 24%; bottom: 24%; width: 1px; background: var(--pc-rule-strong); opacity: .9;
  }
  :root[data-theme] .nav-dropdown-menu { width: max-content; min-width: 270px; max-width: min(440px, 92vw); }
}
.nav-dropdown-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: .1rem .25rem .45rem; padding: .35rem .5rem .5rem;
  border-bottom: 2px solid var(--yc, var(--pc-teal));
  font-weight: 700; font-size: .68rem; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-soft);
}
.nav-dropdown-head span:last-child { font-weight: 500; letter-spacing: .06em; }
.nav-dropdown-y11 .nav-dropdown-head { --yc: var(--pc-sage); color: var(--pc-sage-ink, #2c5c42); }
.nav-dropdown-y12 .nav-dropdown-head { --yc: var(--pc-terracotta); color: var(--pc-terracotta-ink, #9c3d27); }

/* Footer: sister sites and source, under the copyright line */
:root[data-theme] .footer-more {
  margin-top: .9rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem;
  font-size: .78rem; letter-spacing: .02em;
}
:root[data-theme] .footer-more span { color: #a1978a; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; font-weight: 700; }
:root[data-theme] .footer-more a { text-decoration: underline; text-decoration-color: rgba(217,207,187,.3); text-underline-offset: 3px; }
:root[data-theme] .footer-more a:hover { text-decoration-color: currentColor; }

/* ── Home sections, as on the sister site: how to use, cards with a kicker, resources, course at a glance ── */
.study-guide-section--top { margin-top: 0; padding: 0 0 2.25rem; margin-bottom: 2.25rem; border-top: 0; border-bottom: 1px dashed var(--pc-rule-strong); }
.study-guide-section--top .study-guide-header { text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; margin-bottom: 1.4rem; }
.study-guide-section--top .study-guide-title { margin: 0; }
.study-guide-section--top .study-guide-subtitle { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-muted); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
:root[data-theme] .card-top .card-icon { margin: 0; }
.card-kicker { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }
.card-kicker span { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--stock-ink, var(--stock)); }
.card-kicker .card-hrs { color: var(--pc-ink-soft); background: var(--pc-sheet); border: 1px solid var(--pc-rule); border-radius: 4px; padding: .14rem .45rem; letter-spacing: .08em; }
.card-outcomes {
  display: flex; flex-wrap: wrap; gap: .25rem .8rem;
  margin: 0 0 1rem; padding-top: .75rem;
  border-top: 1px dashed var(--pc-rule-strong);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--pc-muted);
}
.card-outcomes b { font-weight: 800; color: var(--stock-ink, var(--stock)); }

:root[data-theme] .topic-card.core { --stock: var(--pc-ink-soft); --stock-ink: var(--pc-ink-soft); }
:root[data-theme="dark"] .topic-card.core { --stock: #cfc4ad; --stock-ink: #e6dcc6; }
:root[data-theme] .year-badge-all { background: var(--pc-ink-soft); color: var(--pc-cream); }
:root[data-theme="dark"] .year-badge-all { background: #cfc4ad; color: #1b1916; }
.topics-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 1.1rem; }
:root[data-theme] .topics-grid--compact .topic-card { padding: 1.2rem 1.2rem 1.05rem; }
.topics-grid--compact .card-top { margin-bottom: .8rem; }
.topics-grid--compact .card-icon { width: 40px; height: 40px; }
.topics-grid--compact .card-title { font-size: 1.05rem; margin-bottom: .35rem; }
.topics-grid--compact .card-desc { font-size: .84rem; margin-bottom: .7rem; }
.topics-grid--compact .card-meta { justify-content: flex-end; }
@media (min-width: 1100px) { .topics-grid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.glance { margin-top: 3.5rem; }
.glance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; }
.glance-card {
  --stock: var(--pc-sage); --stock-ink: var(--pc-sage-ink);
  position: relative; min-width: 0;
  background: var(--pc-cream); background-image: var(--pc-grain);
  border-radius: 6px;
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: inset 0 5px 0 var(--stock), var(--pc-shadow-2);
}
.glance-card.year12 { --stock: var(--pc-terracotta); --stock-ink: var(--pc-terracotta-ink); }
.glance-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.glance-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--stock-ink); }
.glance-hours { font: 700 2.6rem/1 var(--font-display); letter-spacing: -.02em; color: var(--pc-ink); margin-top: .35rem; font-variant-numeric: tabular-nums; }
.glance-hours small { font: 700 .78rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-muted); margin-left: .4rem; }
.glance-delta { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: #6b4a00; background: color-mix(in srgb, var(--pc-mustard) 26%, var(--pc-sheet)); border-radius: 4px; padding: .3rem .55rem; white-space: nowrap; }
:root[data-theme="dark"] .glance-delta { color: #f0b94d; }
.hours-bar { display: flex; gap: 4px; height: 36px; }
.hours-seg {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; padding: 0 .6rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--stock) 16%, var(--pc-sheet));
  box-shadow: inset 0 -3px 0 var(--stock);
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: var(--stock-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
  transition: background 160ms ease;
}
.hours-seg.h40 { flex-grow: 4; } .hours-seg.h30 { flex-grow: 3; }
a.hours-seg:hover { background: color-mix(in srgb, var(--stock) 30%, var(--pc-sheet)); }
.hours-legend { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .3rem; }
.hours-legend li { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--pc-ink-soft); border-bottom: 1px dashed var(--pc-rule-strong); padding-bottom: .3rem; }
.hours-legend li:last-child { border-bottom: 0; }
.hours-legend b { flex: none; white-space: nowrap; font-size: .78rem; font-weight: 800; color: var(--stock-ink); }
.hours-legend a { color: inherit; text-decoration: none; }
.hours-legend a:hover { color: var(--stock-ink); text-decoration: underline; text-underline-offset: 3px; }

.glance-outcomes { background: var(--pc-cream); background-image: var(--pc-grain); border-radius: 6px; box-shadow: var(--pc-shadow-2); }
.glance-outcomes > summary {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.05rem 1.3rem; cursor: pointer; list-style: none;
  font: 600 1.05rem var(--font-display); color: var(--pc-ink);
}
.glance-outcomes > summary::-webkit-details-marker { display: none; }
.glance-outcomes > summary::before {
  content: ''; width: 8px; height: 8px;
  border-right: 2px solid var(--pc-teal); border-bottom: 2px solid var(--pc-teal);
  transform: rotate(-45deg); transition: transform 200ms ease;
}
.glance-outcomes[open] > summary::before { transform: rotate(45deg); }
.glance-outcomes > summary .count { margin-left: auto; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-muted); }
.outcomes-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; padding: 0 1.3rem 1.3rem; border-top: 1px dashed var(--pc-rule-strong); }
.outcome-col { --stock: var(--pc-sage); --stock-ink: var(--pc-sage-ink); }
.outcome-col.year12 { --stock: var(--pc-terracotta); --stock-ink: var(--pc-terracotta-ink); }
.outcome-col h3 { font-family: var(--font-body); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--stock-ink); margin: 1.1rem 0 .5rem; }
.outcome-list { margin: 0; }
.outcome-row { display: grid; grid-template-columns: 5.4rem 1fr; gap: .2rem .75rem; padding: .5rem 0; border-bottom: 1px dashed var(--pc-rule-strong); }
.outcome-row:last-child { border-bottom: 0; }
.outcome-row dt { font-size: .76rem; font-weight: 800; line-height: 1.5; color: var(--stock-ink); }
.outcome-row dd { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--pc-ink-soft); }
@media (max-width: 900px) { .glance-grid, .outcomes-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .outcome-row { grid-template-columns: 1fr; }
  /* The legend below names each focus area, so on a phone the bar is a thin proportional meter */
  .hours-bar { height: 14px; }
  .hours-seg { padding: 0; font-size: 0; }
}
@media (prefers-reduced-motion: reduce) { .hours-seg, .glance-outcomes > summary::before { transition: none; } }

/* The brand mark: braces, stroked in the tile's colour (the markup comes from scripts/site-chrome.py) */
.brand-glyph { width: 22px; height: 22px; display: block; }
.brand-glyph path { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* ── Shared page frame ─────────────────────────────────────────
   One left edge and one right edge for the bar, hero, home sections, topic header, page and footer,
   and one bar height. This block is the same on the sister site (HSC Enterprise Computing Notes, in
   css/theme.css): change both together. Content width is the frame less a gutter each side. */
:root { --frame: 1280px; --frame-pad: 1.5rem; --bar-h: 64px; }
@media (min-width: 1400px) { :root { --frame-pad: 2rem; } }
@media (min-width: 1680px) { :root { --frame: 1520px; } }
:root[data-theme] :is(.nav-inner, .hero-inner, .main-content, .how-inner, .topic-header-inner, .page-layout, .footer-inner, .footer-bottom, .footer-more, .glossary-wrapper) {
  box-sizing: content-box;
  width: min(calc(var(--frame) - 2 * var(--frame-pad)), calc(100% - 2 * var(--frame-pad)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
:root[data-theme] :is(.hero, .topic-header, footer) { padding-inline: 0; }
/* The footer's last two rows keep clear of the back-to-top button where the frame is narrower than the page */
@media (max-width: 1199px) {
  :root[data-theme] :is(.footer-bottom, .footer-more) {
    padding-inline-end: 3.5rem;
    width: calc(min(calc(var(--frame) - 2 * var(--frame-pad)), calc(100% - 2 * var(--frame-pad))) - 3.5rem);
  }
}
/* The bar: brand left, the rail truly centred, actions right */
@media (min-width: 920px) {
  :root[data-theme] .nav-inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  :root[data-theme] .nav-actions { justify-self: end; }
}