/* ============================================================
   main.css — Cahier
   Sections:
     1. Variables
     2. Reset / base
     3. Typography & shared components
     4. Layout
     5. Topbar
     6. Tabstrip & dropdowns
     7. Flash messages
     8. Forms
     9. Tables
    10. Utilities
    11. Mobile
    12. Tones (shared colour system)
    13. Card
    14. Badge
    15. Profile
    16. Quiz
    17. Code block styling
    18. Unit
    19. Box
    20. OS platform tabs
    21. Test questions
    22. Rubric
    23. Datasets

   Conventions:
     Wrapper     — always content-wrap via base template;
                   never add another wrapping div per page
     Page header — .page-header on the first <header>
                   element in a block
     Section label — .eyebrow on a <p> before a section
                   <h2>; add .eyebrow--ruled when a
                   border separator is needed below it
     Tones        — .urgent / .warning / .info /
                   .success / .neutral applied to
                   .flash, .card, .box, .badge
     Callout box  — .box.neutral (default) or
                   .box.info / .warning etc.
     Lists       — no class needed inside content-wrap;
                   default spacing applies automatically
     Code blocks — <pre class="LANG"><code>…</code></pre>;
                   never add a wrapper div around a pre
   ============================================================ */



/* ── 1. Variables ──────────────────────────────────────────── */
:root {
  --primary:         #003b5c;
  --secondary:       #0085CA;
  --secondary-dark:  #006397;
  --secondary-light: #00a7fd;
  --accent-purple:   #6851e7;
  --accent-green:    #00a075;
  --surface-tint:    #e6fdff;
  --surface-mid:     #f8f9fa;

  --ink:                #1a1a2e;
  --ink-muted:          #4a4a6a;
  --ink-subtle:         #767676;
  --border:             #dde3e8;
  --admin-colour:       #c0392b;
  --admin-colour-light: #f1948a;
  --admin-colour-alpha-20: rgba(192,57,43,.20);

  --tone-urgent-bg:     #fdf0f0;
  --tone-urgent-border: #c0392b;
  --tone-urgent-ink:    #7a1a1a;

  --tone-warning-bg:     #fdf6e3;
  --tone-warning-border: #c07a00;
  --tone-warning-ink:    #6b4200;

  --tone-info-bg:      #ddeeff;
  --tone-info-border:  #0085CA;
  --tone-info-ink:     #003b5c;

  --tone-success-bg:    #d8f6e9;
  --tone-success-border:#00A075;
  --tone-success-ink:   #005c42;

  --tone-neutral-bg:    #f5f2ee;
  --tone-neutral-border:#a89890;
  --tone-neutral-ink:   #3d3028;


  /* -- Console Coding ---------------------------------------- */
    --r-script-bg:  #d8e3eb;
    --r-script-txt: #5482a3;
    --shell-bg:     #f3e2bb;
    --shell-txt:    #c4962d;
    --yaml-bg:      #d0bfec;
    --yaml-txt:     #956ace;
    --rmd-bg:       #d9f1d8;
    --rmd-txt:      #43bb49;
    --css-bg:       #ffe4e1;
    --css-txt:      #d63384;
    --note-light:   #dfebf5;
    --markdown-bg:  #f0f8ff;
    --markdown-txt: #0066cc;
    --html-bg:      #fff2e6;
    --html-txt:     #e65100;
    --javascript-bg: #fff3cd;
    --javascript-txt: #856404;
    --json-bg:      #e8f5e8;
    --json-txt:     #198754;
    --sql-bg:       #f8f9fa;
    --sql-txt:      #6c757d;
    --python-bg:    #e6f3ff;
    --python-txt:   #0052cc;
    --bash-bg:      #f5f5f5;
    --bash-txt: var(--ink);

  --code-default-bg: #eaeaea;

  --shadow-drop:
    0 4px 16px rgba(0,0,0,.10),
    0 1px 4px  rgba(0,0,0,.06);
    
  --nav-height:      52px;
  --tab-height:      44px;
  --max-width:       680px;
  --radius:          4px;
}


/* ── 2. Reset / base ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface-mid);
  color: var(--ink);
  font-family: "Nunito", sans-serif;
  line-height: 1.65;
}

a {
  color: var(--secondary);
  text-decoration: none;
}
a:hover {
  color: var(--secondary-dark);
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}


/* ── 3. Typography & shared components ─────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary);
  margin-bottom: .5rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

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

small,
.text-muted {
  font-size: .875rem;
  color: var(--ink-muted);
}

/* ── Page header (replaces .ds-header, .qz-header,
   .profile-header) ──────────────────────── */

/* ── Eyebrow / section label (replaces .ds-section-title,
   .profile-section-title, .title-eyebrow,
   .qz-q-number) ────────────────────────────── */
.eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Bordered variant — used where a ruled underline
   separates the label from the content below it.
   (Replaces the border-bottom on .ds-section-title) */
.eyebrow--ruled {
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

:not(pre) > code {
  font-family: "Courier New", monospace;
  font-size: .875em;
  color: var(--primary);
  background: var(--code-default-bg);
  padding: .1rem .35rem;
  border-radius: 3px;
}
/* ── 4. Layout ─────────────────────────────────────────────── */
.content-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

/* List spacing inside all course content pages */
.content-wrap ul,
.content-wrap ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.content-wrap li {
  margin-bottom: .35rem;
}


/* ── 5. Topbar ─────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--primary);
  border-bottom: 1px solid rgba(255,255,255,.08);
  height: var(--nav-height);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
}

.topbar-brand {
  font-family: "Georgia", serif;
  font-size: 1.2rem;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--surface-mid);
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-brand:hover {
  color: rgba(255,255,255,.75);
  text-decoration: none;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.nav-link {
  padding: .4rem .85rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.80);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-link:hover {
  background: rgba(255,255,255,.10);
  color: var(--surface-mid);
  text-decoration: none;
}

.nav-link--admin {
  color: var(--admin-colour-light);
}
.nav-link--admin:hover {
  background: var(--admin-colour-alpha-20);
  color: var(--admin-colour-light);
}


/* ── Burger ────────────────────────────────────────────────── */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  border-radius: var(--radius);
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── 6. Tabstrip & dropdowns ───────────────────────────────── */
.tabstrip {
  background: var(--surface-mid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
}

.tabstrip-inner {
  display: flex;
  align-items: stretch;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  gap: .125rem;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 1rem;
  height: var(--tab-height);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.tab:hover,
.tab--open {
  background: var(--surface-tint);
  color: var(--ink);
  border-bottom-color: var(--accent-green);
  text-decoration: none;
}
.tab--active,
.tab-dropdown:has(.drop-item--active) > .tab--drop {
  color: var(--primary);
  border-bottom-color: var(--accent-green);
}

/* Caret */
.caret {
  width: 10px;
  height: 6px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
  flex-shrink: 0;
}
[aria-expanded="true"] > .caret {
  transform: rotate(-180deg);
}

/* Dropdown */
.tab-dropdown {
  position: relative;
    /* z-index needed: tabstrip is sticky and creates
     a stacking context; this elevates drop-menu
     above sibling content within that context */
  z-index: 100;
}

.drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-drop);
  list-style: none;
  padding: .375rem 0;
  z-index: 1000;
  animation: dropIn .15s ease;
}
.drop-menu.is-open {
  display: block;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.drop-item {
  display: block;
  padding: .5rem 1rem;
  font-size: .875rem;
  color: var(--ink-muted);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.drop-item:hover {
  background: var(--surface-tint);
  color: var(--primary);
  text-decoration: underline;
}
.drop-item--active {
  color: var(--primary);
  font-weight: 700;
}

/* two-column test/rubric grid */
.drop-menu--grid {
  min-width: 220px;
}
.drop-menu--grid.is-open {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* muted style for rubric column */
.drop-item--muted {
  color: var(--ink-muted);
  font-size: 0.9em;
}

/* indented sub-item in mobile drawer */
.drawer-item--sub {
  padding-left: 2rem;
  font-size: 0.9em;
  color: var(--ink-muted);
}
.drop-header {
  display: block;
  padding: .35rem 1rem .3rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 .75rem .2rem;
  border-bottom: 2px solid var(--accent-green);
}

/* ── 7. Flash messages ─────────────────────────────────────── */
.flash-container {
  max-width: var(--max-width);
  margin: 1rem auto 0;
  padding: 0 1.25rem;
}
.flash {
  padding: .75rem 1.25rem;
  font-size: .9rem;
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: var(--radius);
  width: 100%;
}
@media (min-width: 640px) {
  .flash {
    max-width: 420px;
  }
}

/* ── 8. Forms ──────────────────────────────────────────────── */
.form-wrap {
  max-width: 420px;
  margin: 3rem auto;
  padding: 0 1.25rem;
}

.form-wrap h1 {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .35rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  display: block;
  width: 100%;
  padding: .55rem .75rem;
  font-family: "Nunito", sans-serif;
  font-size: .9375rem;
  color: var(--ink);
  background: var(--surface-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
  margin-bottom: 1.1rem;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(0,133,202,.15);
}

button[type="submit"],
input[type="submit"],
.btn {
  display: inline-block;
  padding: .7rem 1.75rem;
  font-family: "Nunito", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--surface-mid);
  background: var(--primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.btn:hover {
  background: var(--secondary-dark);
  text-decoration: none;
  color: var(--surface-mid);
}

button[type="submit"]:disabled,
input[type="submit"]:disabled {
  background: var(--ink-muted);
  cursor: not-allowed;
}

/* File inputs opt out of the text-input style */
input[type="file"] {
  display: block;
  width: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  font-size: .875rem;
  color: var(--ink-muted);
}

/* Upload form layout */
.upload-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.upload-form label {
  margin-bottom: 0;
}   

/* ── 9. Tables ─────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  margin-bottom: 1.5rem;
}

thead th {
  text-align: left;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 2px solid var(--border);
  padding: .6rem .75rem;
}

tbody td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}

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

tbody tr:hover td {
  background: var(--surface-tint);
}

.grade-scale {
  display: grid;
  grid-template-columns: repeat(8, auto);
  justify-content: start;
  column-gap: .5rem;
}

.grade-scale thead,
.grade-scale tbody,
.grade-scale tr {
  display: contents;
}

#today-marker td {
  background: transparent;
  border: none;
  padding: 2px 6px 6px;
  line-height: 1;
  color: var(--admin-colour);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#today-marker td::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--admin-colour);
  margin-bottom: 2px;
}


/* ── 11. Mobile ────────────────────────────────────────────── */
@media (max-width: 1022px) {
  .burger {
    display: flex;
  }

  .topbar-nav {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--primary);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: .5rem 0;
    gap: 0;
  }
  .topbar-nav.is-open {
    display: flex;
  }

  .nav-link {
    padding: .75rem 1.25rem;
    border-radius: 0;
  }

  .tabstrip {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabstrip::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 580px) {
  .grade-scale thead th { display: none; }
  .grade-scale {
    grid-template-columns: repeat(4, auto);
  }
}

/* ── Mobile course-nav drawer ───────────────────────────── */

@media (max-width: 640px) {

  /* Hide the desktop tabstrip entirely */
  .tabstrip {
    display: none;
  }

  /* Fixed burger button: left edge, vertically centred */
  .course-burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 300;
    width: 66px;
    height: 52px;
    padding: 16px 8px;
    background: var(--primary);
    border: none;
    border-radius: 0 0 0 0;
    cursor: pointer;
    align-items: center;
    /* Subtle right-side shadow to lift off the page */
    box-shadow: -2px 0 8px rgba(0, 0, 0, .25);
  }

  .course-burger span {
    display: block;
    width: 50%;
    height: 3px;
    background: var(--surface-mid);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }

  /* Animate to ✕ when open */
  .course-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .course-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .course-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
.content-wrap { padding-right: 80px }
  /* Dim overlay behind drawer */
  .course-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 310;
    background: rgba(0, 0, 0, .35);
  }
  .course-drawer-overlay.is-open {
    display: block;
  }

  /* The drawer itself — slides in from the right */
  .course-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 320;
    width: min(75vw, 260px);
    background: var(--primary);
    padding: calc(var(--nav-height) + 16px) 0 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    /* Keep aria-hidden offscreen for assistive tech */
  }
  .course-drawer.is-open {
    transform: translateX(0);
  }

  /* Drawer links */
  .drawer-item {
    display: block;
    padding: 12px 24px;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
  }
  .drawer-item:hover,
  .drawer-item:focus {
    background: rgba(255, 255, 255, .08);
    color: var(--surface-mid);
    outline: none;
  }

  /* Active state: accent-green left border + white text */
  .drawer-item--active {
    border-left-color: var(--accent-green);
    color: var(--surface-mid);
    background: rgba(255, 255, 255, .06);
  }

}

/* Hide the course burger above 560 px */
@media (min-width: 641px) {
  .course-burger,
  .course-drawer-overlay,
  .course-drawer {
    display: none;
  }
}

/* ── 12. Tones (shared colour system) ───────────────────────── */
/* Applied to .flash, .card, .box, .badge
   Usage: class="card urgent"  class="flash info"  etc.  */
.urgent {
  background:    var(--tone-urgent-bg);
  border-color:  var(--tone-urgent-border);
  color:         var(--tone-urgent-ink);
}
.warning {
  background:    var(--tone-warning-bg);
  border-color:  var(--tone-warning-border);
  color:         var(--tone-warning-ink);
}
.info {
  background:    var(--tone-info-bg);
  border-color:  var(--tone-info-border);
  color:         var(--tone-info-ink);
}
.success {
  background:    var(--tone-success-bg);
  border-color:  var(--tone-success-border);
  color:         var(--tone-success-ink);
}
.neutral {
  background:    var(--tone-neutral-bg);
  border-color:  var(--tone-neutral-border);
  color:         var(--tone-neutral-ink);
}

/* ── 13. Card ───────────────────────────────────────────────── */
/* Generic bordered card. Pair with a tone class for colour.
   Use .card-grid as the parent for multi-column layouts.    */
.card {
  padding: 2rem 2rem 2rem 1.75rem;
  border-radius: var(--radius);
  border-left: 4px solid transparent;
  box-shadow: var(--shadow-drop);
}

.card-title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .6rem;
  color: inherit;
}

.card-body {
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  opacity: .9;
}

/* Grid layout for sets of cards (e.g. course listings) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill, minmax(260px, 1fr)
  );
  gap: 1.25rem;
}

@media (max-width: 480px) {
  .card {
    padding: 1.5rem 1.25rem 1.5rem 1rem;
  }
  .card-title {
    font-size: 1.2rem;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 14. Badge ──────────────────────────────────────────────── */
/* Inline pill. Pair with a tone class for colour.
   Usage: <span class="badge success">Submitted</span>  */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}


/* ── 15. Profile ───────────────────────────────────────────── */
/* ── Header ─────────────────────────────────── */
.profile-ident {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.profile-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}
.profile-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Table ───────────────────────────────────── */
.profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.profile-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.profile-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--surface-tint);
  color: var(--ink);
  vertical-align: middle;
}
.profile-table tr:last-child td {
  border-bottom: none;
}

/* submitted row: subtle green left accent */
.profile-table tr.row--submitted td:first-child {
  border-left: 3px solid var(--accent-green);
  padding-left: calc(0.6rem - 3px);
}

/* ── Column widths ───────────────────────────── */
.col-name  { width: 40%; }
.col-due   { width: 20%; color: var(--ink-muted); }
.col-status{ width: 20%; }
.col-grade { width: 20%; text-align: right; }
.profile-table th.col-grade {
  text-align: right;
}

/* ── Badges ──────────────────────────────────── */
/* .badge is defined in §14; pair with tone class.
   e.g. class="badge success"  class="badge urgent" */

/* ── Grade values ────────────────────────────── */
.grade-val {
  font-weight: 600;
  color: var(--ink);
}
.grade-pending {
  font-size: 0.78rem;
  color: var(--ink-subtle);
  font-style: italic;
}

/* ── Mobile ──────────────────────────────────── */
@media (max-width: 480px) {
  .profile-table { font-size: 0.82rem; }
}

/* ── 16. Quiz take ─────────────────────────────────────────── */


.qz-question {
  margin-bottom: 2.5rem;
}

.qz-q-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.qz-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The whole row is the label — no bare radio visible */
.qz-choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-mid);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  font-weight: 400; /* override global label bold */
}

.qz-choice:hover {
  background: var(--surface-tint);
  border-color: var(--border);
}

.qz-choice.selected {
  background: var(--primary);
  border-color: transparent;
}

/* Hide the native radio; the custom circle takes its place */
.qz-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.qz-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-mid);
  transition: border-color .12s, background .12s;
}

.qz-choice.selected .qz-radio {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.15);
}

.qz-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-mid);
  display: none;
}

.qz-choice.selected .qz-radio-dot {
  display: block;
}

.qz-choice-text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}

.qz-choice.selected .qz-choice-text {
  color: var(--surface-mid);
}

.qz-divider {
  height: 1px;
  background: var(--border);
  margin: 0 0 2.5rem;
}

.qz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
}

.qz-progress {
  font-size: .875rem;
  color: var(--ink-muted);
}

.qz-back {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: .875rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qz-back:hover {
  color: var(--ink);
}

@media (max-width: 480px) {
  .qz-q-text      { font-size: 1rem; }
  .qz-choice      { padding: 12px 14px; }
  .qz-choice-text { font-size: .95rem; }
}
/* ── Quiz result states ────────────────────────────────────── */

/* No pointer on result page choices */
.qz-choice--static {
  cursor: default;
}

.qz-choice--static:hover {
  background: var(--surface-mid);
  border-color: var(--border);
}

/* Correct answer — green accent */
.qz-choice--correct {
  background: var(--tone-success-bg);
  border-color: var(--tone-success-border);
}

.qz-choice--correct .qz-choice-text {
  color: var(--tone-success-ink);
}

.qz-choice--correct .qz-radio {
  border-color: var(--tone-success-border);
}

/* Wrong selection — red accent */
.qz-choice--incorrect {
  background: var(--tone-urgent-bg);
  border-color: var(--tone-urgent-border);
}

.qz-choice--incorrect .qz-choice-text {
  color: var(--tone-urgent-ink);
}

.qz-choice--incorrect .qz-radio {
  border-color: var(--tone-urgent-border);
}

/* Show the dot on whichever choice the student picked */
.qz-radio-dot--show {
  display: block;
}

.qz-choice--correct .qz-radio-dot--show {
  background: var(--tone-success-border);
}

.qz-choice--incorrect .qz-radio-dot--show {
  background: var(--tone-urgent-border);
}   



/* ── 17. Code Block Styling ────────────────────────────────────── */
pre {
    position: relative;
    background-color: var(--code-default-bg);
    padding-top: 35px;
    padding-left: 15px;
    padding-bottom: 15px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.4;
    overflow-x: auto;
}

pre::before {
    content: "Code";
    color: var(--ink);
    font-size: 12px;
    font-weight: bold;
    padding-left: 16px;
    padding-top: 6px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    background-color: var(--code-default-bg);
    border-radius: var(--radius) var(--radius) 0px 0px;
}

/* Language-specific styling — band only, body stays
   --code-default-bg throughout.                     */
pre.r::before {
    content: "R";
    color: var(--r-script-txt);
    background-color: var(--r-script-bg);
}
pre.rmd::before {
    content: "RMD";
    color: var(--rmd-txt);
    background-color: var(--rmd-bg);
}
pre.qmd::before {
    content: "QMD";
    color: var(--rmd-txt);
    background-color: var(--rmd-bg);
}
pre.shell::before {
    content: "Shell";
    color: var(--shell-txt);
    background-color: var(--shell-bg);
}
pre.yaml::before {
    content: "YAML";
    color: var(--yaml-txt);
    background-color: var(--yaml-bg);
}
pre.css::before {
    content: "CSS";
    color: var(--css-txt);
    background-color: var(--css-bg);
}
pre.markdown::before {
    content: "Markdown";
    color: var(--markdown-txt);
    background-color: var(--markdown-bg);
}
pre.html::before {
    content: "HTML";
    color: var(--html-txt);
    background-color: var(--html-bg);
}
pre.javascript::before {
    content: "JavaScript";
    color: var(--javascript-txt);
    background-color: var(--javascript-bg);
}
pre.json::before {
    content: "JSON";
    color: var(--json-txt);
    background-color: var(--json-bg);
}
pre.sql::before {
    content: "SQL";
    color: var(--sql-txt);
    background-color: var(--sql-bg);
}
pre.python::before {
    content: "Python";
    color: var(--python-txt);
    background-color: var(--python-bg);
}
pre.bash::before {
    content: "Bash";
    color: var(--bash-txt);
    background-color: var(--bash-bg);
}
pre.output::before {
    content: "Output";
    color: var(--ink);
    background-color: var(--code-default-bg);
}

.copy-button {
    position: absolute;
    top: 0px;
    right: 8px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: var(--radius);
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
    width: 28px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

pre:hover .copy-button {
    opacity: 1;
}

.copy-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.copy-button:active {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
}

.copy-button svg {
    width: 16px;
    height: 16px;
    stroke: var(--ink-subtle);
    transition: stroke 0.2s ease;
}

.copy-button:hover svg {
    stroke: var(--ink);
}

.copy-button.copied svg {
    stroke: var(--accent-green);
}

/* ── 18. Unit ──────────────────────────────────────────────── */
.card-img-top > img {
  border-radius: var(--radius);
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

/* ── 19. Box ───────────────────────────────────────────────── */
/* Inset callout block. Pair with a tone class for colour,
   or use .neutral for the default grey.
   Usage: <div class="box info">…</div>               */
.box {
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

/* Fallback when no tone class is present */
.box:not(.urgent):not(.warning):not(.info):not(.success) {
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
  color: var(--tone-info-ink);
}

.box dt {
  font-weight: 700;
  color: var(--primary);
}

.box dd {
  color: var(--ink-muted);
  margin-bottom: .5rem;
}

.box hr {
  margin: .75rem 0;
}

/* ── 20. OS platform tabs ──────────────────────────────────── */
.os-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.os-tab {
  padding: .35rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-mid);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .15s, color .15s,
              border-color .15s;
}

.os-tab:hover {
  background: var(--surface-tint);
  color: var(--ink);
  border-color: var(--secondary);
}

.os-tab--active {
  background: var(--secondary);
  color: var(--surface-mid);
  border-color: var(--secondary);
}

.os-panel {
  margin-top: .25rem;
}

/* ── 21. Test Questions ──────────────────────────────────── */
.questions {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1rem 1.5rem;
}

.questions li {
  padding: .5rem 0 .5rem 1.5rem;
  border-left: 3px solid var(--accent-green);
  margin-bottom: .75rem;
  color: var(--ink);
}
.test-section {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.test-section:first-child {
  border-top: none;
  padding-top: 0;
}
.test-question-block {
  margin-top: 2rem;
  padding-top: 1.5rem;
  position: relative;
}
.test-upload-block {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  position: relative;
}
/* Shared ruled divider for both block types */
.test-question-block::before,
.test-upload-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12.5%;
  width: 75%;
  height: 2px;
  background: var(--primary);
}
/* ── 22. Rubric ────────────────────────────────────────────── */
.rubric {
  margin-bottom: 3rem;
}

.rubric-criterion-block {
  margin-bottom: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.rubric-criterion-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .6rem 1rem;
  background: var(--primary);
  color: var(--surface-mid);
}

.rubric-criterion-name {
  font-weight: 700;
  font-size: .95rem;
}

.rubric-criterion-marks {
  font-size: .85rem;
  opacity: .8;
  white-space: nowrap;
  margin-left: 1rem;
}

.rubric-tier {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 .75rem;
  padding: .65rem 1rem;
  border-top: 1px solid var(--border);
  align-items: start;
}

.rubric-tier-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding-top: .2rem;
  white-space: nowrap;
}

.rubric-tier-text {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.rubric-tier--ex {
  background: var(--tone-success-bg);
}
.rubric-tier--ex .rubric-tier-label {
  color: var(--tone-success-ink);
}

.rubric-tier--sat {
  background: var(--tone-info-bg);
}
.rubric-tier--sat .rubric-tier-label {
  color: var(--tone-info-ink);
}

.rubric-tier--unsat {
  background: var(--surface-mid);
}
.rubric-tier--unsat .rubric-tier-label {
  color: var(--ink-muted);
}

.rubric-total-line {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--ink-muted);
}

/* phone */
@media (max-width: 600px) {
  .rubric-tier {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}

/* ── 23. Reference — Datasets ──────────────────────────── */
/* ── Footer ──────────────────────────────────── */
.ds-card-foot {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ── Tags ────────────────────────────────────── */
.ds-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.ds-tag {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 3px;
  background: var(--surface-tint);
  color: var(--secondary-dark);
  border: 1px solid var(--border);
}

/* ── Meta row ────────────────────────────────── */
.ds-meta {
  font-size: .78rem;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
}

.ds-meta-sep {
  opacity: .4;
}

/* At-a-glance definition list */
.ds-glance {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.5rem;
  margin: .75rem 0 1.5rem;
}

.ds-glance-row { display: contents; }

.ds-glance-row dt {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  white-space: nowrap;
  padding-top: .15rem;
}

.ds-glance-row dd { color: var(--ink); margin: 0; }

/* Column-type pill in the dictionary table */
.ds-type {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: .75rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 3px;
  background: var(--code-default-bg);
  color: var(--ink-muted);
}
.ds-type--chr, .ds-type--character {
  background: var(--r-script-bg);
  color: var(--r-script-txt);
}
.ds-type--dbl, .ds-type--numeric,
.ds-type--int, .ds-type--integer {
  background: var(--rmd-bg);  color: var(--rmd-txt);
}
.ds-type--lgl, .ds-type--logical {
  background: var(--yaml-bg); color: var(--yaml-txt);
}
.ds-type--fct, .ds-type--factor {
  background: var(--shell-bg); color: var(--shell-txt);
}
.ds-type--date, .ds-type--dttm, .ds-type--datetime {
  background: var(--tone-info-bg);
  color: var(--tone-info-ink);
}
a.card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease,
              background .15s ease;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  background: var(--surface-mid);
}