/* ============================================================================
   Geneeskundeleren — student UI design system
   Warm paper, aubergine accent. Newsreader headings, IBM Plex Sans UI,
   IBM Plex Mono for codes/timers/badges.
   ==========================================================================*/

:root {
  /* Primary */
  --plum: #6d3f6b;
  --plum-on: #6d3f6b;      /* plum as text — lightens in dark mode */
  --plum-body: #6b5a69;    /* body copy on a plum tint */
  --plum-badge: #dccfda;
  --selected: #ece5eb;
  --avatar-bg: #e3dcd4;
  --avatar-fg: #6b625f;
  --dot: #d3ccc4;
  --scroll-thumb: #ddd6ce;
  --topbar-bg: rgba(253, 252, 251, .9);
  --sticky-bg: rgba(253, 252, 251, .95);
  --hatch-a: #f3efe9;
  --hatch-b: #faf8f5;
  --dot-unseen: #f0e9e2;
  --exam-answered-bg: #e4dae2;
  --exam-answered-line: #cdbcc9;
  --exam-answered-fg: #5d4a5c;
  --plum-hover: #472a48;
  --plum-soft: #f2ebf1;
  --plum-tint: #faf6f9;
  --plum-tint-line: #e6d9e5;
  --plum-nav: #e9e2e8;
  --plum-mid: #c8a3c5;
  --plum-dark-text: #5d3a5b;

  /* Accents */
  --clay: #b9714a;
  --clay-text: #a8552b;
  --clay-label: #a06341;
  --clay-surface: #f7ede6;
  --clay-surface-2: #fdf6f0;
  --clay-surface-3: #fdf4ee;
  --clay-line: #eddcd0;

  --moss: #4e7550;
  --moss-surface: #eef1ea;
  --moss-surface-2: #f1f5f0;
  --moss-line: #bcd0bd;
  --moss-line-2: #dde7dc;

  --rose: #a8443f;
  --rose-surface: #faf1f0;
  --rose-line: #e3c4c2;

  /* Text ramp */
  --ink: #2b2530;
  --ink-2: #3f3843;
  --ink-3: #5d5560;
  --muted: #8a8189;
  --muted-light: #a9a1a8;

  /* Surfaces */
  --paper: #fdfcfb;
  --paper-2: #faf8f5;
  --sidebar: #f6f3ef;
  --card: #ffffff;
  --backdrop: #efece7;

  /* Lines & fills */
  --line: #e8e3de;
  --line-soft: #eee9e3;
  --line-soft-2: #f3efe9;
  --line-soft-3: #f0ebe4;
  --line-hover: #d6cdd5;
  --line-hover-2: #c9bcc7;
  --fill: #ece7e1;
  --fill-2: #f1ece6;
  --fill-3: #e5ded6;

  /* Type */
  --font-ui: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: Newsreader, Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --shadow-sm: 0 1px 1px rgba(43, 37, 48, .03);
  --shadow-card: 0 1px 2px rgba(43, 37, 48, .04);

  --sidebar-w: 252px;
  /* Height of the fixed mobile tab bar, excluding the safe-area inset. Shared so
     the question action bar can sit exactly on top of it. */
  --tabbar-h: 64px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Anchor links (e.g. the summary TOC) must not park their heading under the
     sticky top bar — keep it clear of the bar plus a little breathing room. */
  scroll-padding-top: calc(var(--topbar-h) + 24px);
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--backdrop);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--plum-on); text-decoration: none; }
a:hover { color: var(--plum-hover); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}


/* ============================================================================
   Dark theme — Obsidian-flavoured: near-black grounds, soft grey type, and the
   plum accent lifted so it stays legible. Only the tokens change; every
   component inherits automatically.

   --plum stays a *fill* (white text must survive on it), while --plum-on is
   plum used as text and lightens a long way.
   ==========================================================================*/

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Primary */
  --plum: #7c4f79;
  --plum-on: #c9a2c6;
  --plum-body: #b49bb2;
  --plum-hover: #8f5c8c;
  --plum-soft: #342834;
  --plum-tint: #272127;
  --plum-tint-line: #3d303c;
  --plum-nav: #332933;
  --plum-mid: #9a6797;
  --plum-dark-text: #cfa9cc;
  --plum-badge: #4a3849;
  --selected: #332933;

  /* Accents */
  --clay: #c0805a;
  --clay-text: #d79b6e;
  --clay-label: #bb8a63;
  --clay-surface: #33261d;
  --clay-surface-2: #2b211a;
  --clay-surface-3: #2b211a;
  --clay-line: #46331f;

  --moss: #8fb992;
  --moss-surface: #1f2a20;
  --moss-surface-2: #1c2620;
  --moss-line: #3c5540;
  --moss-line-2: #2f4132;

  --rose: #e07a74;
  --rose-surface: #2e1f1e;
  --rose-line: #55302e;

  /* Text ramp — Obsidian's greys */
  --ink: #dadada;
  --ink-2: #cdcdcd;
  --ink-3: #b3b3b3;
  --muted: #9a9a9a;
  --muted-light: #757575;

  /* Surfaces */
  --paper: #1e1e1e;
  --paper-2: #242424;
  --sidebar: #181818;
  --card: #232323;
  --backdrop: #141414;

  /* Lines & fills */
  --line: #333333;
  --line-soft: #2c2c2c;
  --line-soft-2: #2a2a2a;
  --line-soft-3: #2e2e2e;
  --line-hover: #4d4d4d;
  --line-hover-2: #585858;
  --fill: #2f2f2f;
  --fill-2: #2a2a2a;
  --fill-3: #3a3a3a;

  /* Odds and ends */
  --avatar-bg: #3a3a3a;
  --avatar-fg: #c4c4c4;
  --dot: #4a4a4a;
  --dot-unseen: #2e2e2e;
  --scroll-thumb: #3a3a3a;
  --exam-answered-bg: #3b2f3a;
  --exam-answered-line: #4e3f4d;
  --exam-answered-fg: #c9a2c6;
  --topbar-bg: rgba(30, 30, 30, .9);
  --sticky-bg: rgba(30, 30, 30, .95);
  --hatch-a: #262626;
  --hatch-b: #202020;

  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  /* Primary */
  --plum: #7c4f79;
  --plum-on: #c9a2c6;
  --plum-body: #b49bb2;
  --plum-hover: #8f5c8c;
  --plum-soft: #342834;
  --plum-tint: #272127;
  --plum-tint-line: #3d303c;
  --plum-nav: #332933;
  --plum-mid: #9a6797;
  --plum-dark-text: #cfa9cc;
  --plum-badge: #4a3849;

  /* Accents */
  --clay: #c0805a;
  --clay-text: #d79b6e;
  --clay-label: #bb8a63;
  --clay-surface: #33261d;
  --clay-surface-2: #2b211a;
  --clay-surface-3: #2b211a;
  --clay-line: #46331f;

  --moss: #8fb992;
  --moss-surface: #1f2a20;
  --moss-surface-2: #1c2620;
  --moss-line: #3c5540;
  --moss-line-2: #2f4132;

  --rose: #e07a74;
  --rose-surface: #2e1f1e;
  --rose-line: #55302e;

  /* Text ramp — Obsidian's greys */
  --ink: #dadada;
  --ink-2: #cdcdcd;
  --ink-3: #b3b3b3;
  --muted: #9a9a9a;
  --muted-light: #757575;

  /* Surfaces */
  --paper: #1e1e1e;
  --paper-2: #242424;
  --sidebar: #181818;
  --card: #232323;
  --backdrop: #141414;

  /* Lines & fills */
  --line: #333333;
  --line-soft: #2c2c2c;
  --line-soft-2: #2a2a2a;
  --line-soft-3: #2e2e2e;
  --line-hover: #4d4d4d;
  --line-hover-2: #585858;
  --fill: #2f2f2f;
  --fill-2: #2a2a2a;
  --fill-3: #3a3a3a;

  /* Odds and ends */
  --avatar-bg: #3a3a3a;
  --avatar-fg: #c4c4c4;
  --dot: #4a4a4a;
  --dot-unseen: #2e2e2e;
  --scroll-thumb: #3a3a3a;
  --exam-answered-bg: #3b2f3a;
  --exam-answered-line: #4e3f4d;
  --exam-answered-fg: #c9a2c6;
  --topbar-bg: rgba(30, 30, 30, .9);
  --sticky-bg: rgba(30, 30, 30, .95);
  --hatch-a: #262626;
  --hatch-b: #202020;

  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Dark-mode component touch-ups that tokens alone cannot express */
:root[data-theme="dark"] .gl-heat__cell,
:root:not([data-theme="light"]) .gl-heat__cell { background: #262626; }
:root[data-theme="dark"] .gl-heat__cell[data-level="1"],
:root:not([data-theme="light"]) .gl-heat__cell[data-level="1"] { background: #3b2d3a; }
:root[data-theme="dark"] .gl-heat__cell[data-level="2"],
:root:not([data-theme="light"]) .gl-heat__cell[data-level="2"] { background: #5c4159; }
:root[data-theme="dark"] .gl-heat__cell[data-level="3"],
:root:not([data-theme="light"]) .gl-heat__cell[data-level="3"] { background: #8a5e86; }
:root[data-theme="dark"] .gl-heat__cell[data-level="4"],
:root:not([data-theme="light"]) .gl-heat__cell[data-level="4"] { background: #c9a2c6; }

/* Option result states need their own dark surfaces, not tinted whites */
:root[data-theme="dark"] .gl-option--correct,
:root[data-theme="dark"] .option-label.opt-correct,
:root[data-theme="dark"] .option-label.opt-correct-sel { color: #a9d0ac; }
:root[data-theme="dark"] .gl-option--wrong,
:root[data-theme="dark"] .option-label.opt-wrong-sel { color: #eda29c; }
:root[data-theme="dark"] .gl-option__mark { background: #4a2b29; color: #eda29c; }
:root[data-theme="dark"] .jouw-keuze-badge { background: #4a2b29; color: #eda29c; }
:root[data-theme="dark"] .opt-correct-sel .jouw-keuze-badge { background: #26382a; color: #a9d0ac; }

/* Google's logo keeps its own colours; give the button a dark ground */
:root[data-theme="dark"] .gl-auth__google { background: var(--card); }

/* Quill toolbar icons are strokes on white by default */
:root[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--muted); }
:root[data-theme="dark"] .ql-snow .ql-fill { fill: var(--muted); }
:root[data-theme="dark"] .ql-snow .ql-picker-options { background: var(--card); }

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

.gl-shell { display: flex; min-height: 100vh; background: var(--paper); }

.gl-sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.gl-brand { padding: 20px 18px 14px; display: flex; align-items: center; gap: 10px; }
.gl-brand:hover { color: inherit; }
.gl-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--plum); position: relative; flex: none;
}
.gl-mark::before,
.gl-mark::after { content: ''; position: absolute; background: var(--paper); border-radius: 1px; }
.gl-mark::before { left: 11px; top: 6px; width: 4px; height: 14px; }
.gl-mark::after { left: 6px; top: 11px; width: 14px; height: 4px; }
.gl-wordmark {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink);
}

/* OWE switcher */
.gl-owe-switch { padding: 0 12px 14px; position: relative; }
.gl-owe-switch__btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; cursor: pointer; box-shadow: var(--shadow-sm);
  font: inherit; text-align: left; color: var(--ink);
  transition: border-color 120ms ease;
}
.gl-owe-switch__btn:hover { border-color: var(--line-hover); }
.gl-owe-switch__code {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--plum-on); background: var(--plum-soft);
  padding: 3px 5px; border-radius: 4px; flex: none;
}
.gl-owe-switch__name {
  flex: 1; font-size: 12.5px; font-weight: 500; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-owe-switch__chev {
  width: 12px; height: 12px; flex: none;
  color: var(--muted-light); transition: transform 120ms ease;
}
.gl-owe-switch__btn[aria-expanded="true"] .gl-owe-switch__chev { transform: rotate(180deg); }
.gl-owe-switch__menu {
  position: absolute; left: 12px; right: 12px; top: calc(100% - 6px); z-index: 40;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(43, 37, 48, .1);
  padding: 5px; max-height: 320px; overflow-y: auto;
}
.gl-owe-switch__menu[hidden] { display: none; }
.gl-owe-switch__item {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 7px; font-size: 12.5px; color: var(--ink-3);
}
.gl-owe-switch__item:hover { background: var(--fill); color: var(--ink); }
.gl-owe-switch__item--on { background: var(--plum-nav); color: var(--ink); font-weight: 600; }

/* Nav */
.gl-nav {
  flex: 1; overflow-y: auto; padding: 0 12px 12px;
  display: flex; flex-direction: column; gap: 16px;
}
.gl-nav__group { display: flex; flex-direction: column; gap: 1px; }
.gl-nav__label {
  margin: 0 0 5px 10px; font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted-light);
}
.gl-nav__item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: 7px; font-size: 13px; font-weight: 450; color: var(--ink-3);
  transition: background-color 120ms ease;
}
.gl-nav__item:hover { background: var(--fill); color: var(--ink-3); }
.gl-nav__item--on { background: var(--plum-nav); color: var(--ink); font-weight: 600; }
.gl-nav__item--on:hover { background: var(--plum-nav); color: var(--ink); }
/* Real icons rather than identical dots: with fifteen entries the bullets gave
   the eye nothing to aim at, so every item read as the same item. */
.gl-nav__dot {
  width: 17px; height: 17px; flex: none;
  color: var(--muted-light); stroke-width: 1.7;
}
.gl-nav__item:hover .gl-nav__dot { color: var(--ink-3); }
.gl-nav__item--on .gl-nav__dot { color: var(--plum-on); }
.gl-nav__text { flex: 1; }
.gl-nav__badge {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); background: var(--fill);
  padding: 2px 5px; border-radius: 4px;
}
.gl-nav__item--on .gl-nav__badge { color: var(--plum-on); background: var(--plum-badge); }

/* Sidebar footer */
.gl-sidefoot {
  border-top: 1px solid var(--line); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.gl-streak { display: flex; align-items: center; gap: 8px; }
.gl-streak__bars { display: flex; gap: 2px; }
.gl-streak__bar { width: 5px; height: 14px; border-radius: 2px; background: var(--fill-3); }
.gl-streak__bar--on { background: var(--plum); }
.gl-streak__bar--half { background: var(--plum-mid); }
.gl-streak__label { font-size: 11px; color: var(--muted); }
.gl-profile { display: flex; align-items: center; gap: 9px; color: var(--ink-3); }
.gl-profile:hover { color: var(--ink); }
.gl-avatar {
  width: 24px; height: 24px; border-radius: 7px; background: var(--avatar-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--avatar-fg); flex: none;
}
.gl-profile__name {
  flex: 1; font-size: 12px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.gl-profile__gear { width: 15px; height: 15px; flex: none; color: var(--muted-light); }
.gl-profile:hover .gl-profile__gear { color: var(--ink-3); }

/* Account menu (opens upward, out of the sidebar footer) */
.gl-account { position: relative; }
.gl-profile {
  width: 100%; border: 0; background: transparent; cursor: pointer;
  font: inherit; text-align: left; padding: 4px 2px; border-radius: 7px;
  transition: background-color 120ms ease;
}
.gl-profile:hover { background: var(--fill); }
.gl-account__menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 8px 28px rgba(43, 37, 48, .16);
  padding: 5px;
}
.gl-account__menu[hidden] { display: none; }
.gl-account__email {
  margin: 0; padding: 7px 10px 8px; font-size: 11px; color: var(--muted-light);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.gl-account__item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: 7px; font-size: 12.5px; color: var(--ink-2);
}
.gl-account__item:hover { background: var(--fill); color: var(--ink); }
.gl-account__item svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.gl-account__item:hover svg { color: var(--ink-3); }
.gl-account__sep { height: 1px; background: var(--line-soft); margin: 4px 0; }

/* Main + top bar */
.gl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-topbar {
  height: var(--topbar-h); flex: none; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: var(--topbar-bg); position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px);
}
.gl-crumb { font-size: 12.5px; color: var(--muted-light); }
.gl-crumb:hover { color: var(--ink-3); }
.gl-crumb__sep { font-size: 12.5px; color: var(--muted-light); }
.gl-crumb__current { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.gl-search {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  color: var(--muted-light); font-size: 12px; min-width: 200px; cursor: text;
  font-family: inherit;
}
.gl-search:hover { border-color: var(--line-hover); }
.gl-search__kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--sidebar); padding: 1px 4px; border-radius: 3px;
}
.gl-countdown {
  display: flex; align-items: baseline; gap: 6px; padding: 6px 10px;
  border-radius: 7px; background: var(--clay-surface); border: 1px solid var(--clay-line);
  flex: none;
}
/* Newsreader's numerals sit high in the line box, so aligning the two spans on
   their baseline (not centre) is what makes "28" and "dagen tot 2.1" read level. */
.gl-countdown__n {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--clay-text); line-height: 1;
}
.gl-countdown__l { font-size: 11px; line-height: 1; color: var(--clay-label); }

.gl-content { flex: 1; min-width: 0; }
.gl-page { padding: 34px 28px 56px; max-width: 1060px; }
.gl-page--narrow { max-width: 760px; }
.gl-page--decks { max-width: 1000px; }
.gl-page--tips { max-width: 900px; }
.gl-page--question { padding: 30px 34px 96px; max-width: 820px; margin: 0 auto; }

/* Mobile tab bar (hidden on desktop) */
.gl-tabbar { display: none; }

/* ------------------------------------------------------------ typography -- */

.gl-h1 {
  margin: 0 0 6px; font-family: var(--font-display); font-size: 28px;
  font-weight: 500; letter-spacing: -.015em; line-height: 1.15; color: var(--ink);
}
.gl-h1--hero { font-size: 30px; }
.gl-h1--doc { font-size: 32px; line-height: 1.15; }
.gl-h2 {
  margin: 0 0 14px; font-family: var(--font-display);
  font-size: 19px; font-weight: 500; color: var(--ink);
}
.gl-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.gl-owe-description { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.gl-owe-description__summary {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer; list-style: none;
}
.gl-owe-description__summary::-webkit-details-marker { display: none; }
.gl-owe-description__summary > span { flex: 1; min-width: 0; }
.gl-owe-description__chev {
  width: 13px; height: 13px; flex: none; margin-top: 4px; color: var(--muted-light);
  transition: transform 120ms ease;
}
.gl-owe-description[open] .gl-owe-description__chev { transform: rotate(180deg); }
.gl-owe-description__full { margin: 8px 0 0; }
.gl-label {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.gl-label--sm { font-size: 11px; letter-spacing: .06em; }
.gl-meta { font-size: 11px; color: var(--muted-light); }
.gl-mono { font-family: var(--font-mono); }
.gl-num {
  font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1;
}

.gl-plum { color: var(--plum-on); }
.gl-moss { color: var(--moss); }
.gl-clay { color: var(--clay-text); }
.gl-rose { color: var(--rose); }
.gl-muted { color: var(--muted); }

/* -------------------------------------------------------------- surfaces -- */

.gl-card {
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); padding: 18px 20px;
}
.gl-card--flush { padding: 0; overflow: hidden; }
.gl-card--paper { background: var(--paper-2); }
.gl-card--sidebar { background: var(--sidebar); }
.gl-card--plum { background: var(--plum-tint); border-color: var(--plum-tint-line); }
.gl-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.gl-card__head--bordered {
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft); margin-bottom: 0;
}

.gl-stat {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); padding: 14px 16px;
}
.gl-stat__v { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1; }
.gl-stat__l { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); }

.gl-grid { display: grid; gap: 10px; }
.gl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gl-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gl-grid--split { grid-template-columns: 1.5fr 1fr; gap: 14px; }
.gl-grid--aside { grid-template-columns: 1fr 300px; gap: 14px; }

/* --------------------------------------------------------------- chips ---- */

.gl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--muted); background: var(--sidebar);
  padding: 3px 6px; border-radius: 5px;
}
.gl-chip--plum { color: var(--plum-on); background: var(--plum-soft); }
.gl-chip--moss { color: var(--moss); background: var(--moss-surface); }
.gl-chip--lg { font-size: 11px; padding: 3px 7px; }

.gl-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 9999px;
  background: var(--sidebar); color: var(--muted); border: 1px solid var(--fill);
}
.gl-pill--plum { background: var(--plum-soft); color: var(--plum-on); border-color: transparent; }
.gl-pill--moss { background: var(--moss-surface); color: var(--moss); border-color: transparent; }
.gl-pill--clay { background: var(--clay-surface); color: var(--clay-text); border-color: transparent; }
.gl-pill--rose { background: var(--rose-surface); color: var(--rose); border-color: transparent; }
.gl-pill--disease {
  font-size: 11.5px; font-weight: 400; color: var(--plum-dark-text);
  background: var(--plum-soft); border: 1px solid var(--plum-tint-line);
  padding: 4px 10px;
}

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

.gl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-3);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.gl-btn:hover { border-color: var(--line-hover); color: var(--ink-3); }
/* `a.gl-btn` inside prose (.gl-reading, .rich-text) would otherwise inherit the
   underlined link treatment — a button is never a link visually. */
.gl-btn, .gl-btn:hover, .gl-btn:focus { text-decoration: none; }
.gl-btn--primary { background: var(--plum); border-color: var(--plum-on); color: #fff; }
.gl-btn--primary:hover { background: var(--plum-hover); border-color: var(--plum-hover); color: #fff; }
.gl-btn--sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.gl-btn--xs { padding: 5px 11px; font-size: 11.5px; border-radius: 8px; }
.gl-btn--block { width: 100%; }
.gl-btn--danger { color: var(--rose); }
.gl-btn--danger:hover { color: var(--rose); border-color: var(--rose-line); }
.gl-btn[disabled] { opacity: .5; cursor: default; }
.gl-btn > svg { width: 13px; height: 13px; flex: none; }
.gl-btn--sm > svg, .gl-btn--xs > svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------- inputs --- */

.gl-input,
.gl-textarea,
.gl-select {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; line-height: 1.5;
}
.gl-input::placeholder,
.gl-textarea::placeholder { color: var(--muted-light); }
.gl-input:focus,
.gl-textarea:focus,
.gl-select:focus {
  outline: none; border-color: var(--plum-mid);
  box-shadow: 0 0 0 3px rgba(109, 63, 107, .08);
}
.gl-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gl-field__label { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.gl-field__help { font-size: 11px; color: var(--muted); }
.gl-field__error { font-size: 11.5px; color: var(--rose); }

/* --------------------------------------------------------------- meters --- */

.gl-bar { height: 5px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.gl-bar--thin { height: 4px; background: var(--fill); }
.gl-bar--thick { height: 6px; }
.gl-bar__fill { height: 100%; border-radius: 4px; background: var(--plum); }
.gl-bar__fill--moss { background: var(--moss); }
.gl-bar__fill--clay { background: var(--clay); }
.gl-bar__fill--mid { background: var(--plum-mid); }

.gl-dots { display: flex; gap: 2.5px; flex: none; }
.gl-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--dot-unseen); }
/* Correct vs wrong has to read at a glance; two tints of plum did not. */
.gl-dot--good { background: var(--moss); }
.gl-dot--weak { background: var(--rose); }

.gl-legend {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; color: var(--muted-light);
}
.gl-legend span { display: flex; align-items: center; gap: 4px; }
.gl-swatch { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.gl-swatch--lg { width: 9px; height: 9px; border-radius: 3px; }

/* ── Weak-spot rows (Mijn stats) ────────────────────────────────────────────
   The five learning objectives the student is losing the most marks on, each
   with the action that fixes it. Deliberately heavier than a list row: this is
   the answer to "where am I bad", so it has to outrank the long list below it. */
.gl-weakrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-soft-2);
}
.gl-weakrow:last-child { border-bottom: 0; }
.gl-weakrow__score {
  flex: none;
  width: 46px;
  font: 600 16px/1 var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gl-weakrow__body { flex: 1; min-width: 0; }
.gl-weakrow__t { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.gl-weakrow__m { margin: 3px 0 0; font-size: 11px; color: var(--muted); }
.gl-weakrow__actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.gl-weakrow--note { background: var(--paper-2); }
@media (max-width: 620px) {
  .gl-weakrow { flex-wrap: wrap; }
  .gl-weakrow__body { flex: 1 1 60%; }
  .gl-weakrow__actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* ── Segmented control ──────────────────────────────────────────────────── */
.gl-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
}
.gl-segmented__b {
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 500 11.5px var(--font-ui);
  cursor: pointer;
}
.gl-segmented__b:hover { color: var(--ink-2); }
.gl-segmented__b.is-active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(43,37,48,.08); }

/* --------------------------------------------------------------- rows ----- */

.gl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line-soft);
  border-radius: 10px; background: var(--paper);
  transition: background-color 120ms ease, border-color 120ms ease;
  color: var(--ink);
}
.gl-row:hover { border-color: var(--line-hover); background: var(--card); color: var(--ink); }
.gl-row__tile {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  background: var(--plum-soft); color: var(--plum-on);
}
.gl-row__tile--clay { background: var(--clay-surface); color: var(--clay-text); }
.gl-row__tile--moss { background: var(--moss-surface); color: var(--moss); }
.gl-row__body { flex: 1; min-width: 0; }
.gl-row__title { margin: 0; font-size: 13px; font-weight: 500; }
.gl-row__sub { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.gl-row__cta { font-size: 11px; color: var(--plum-on); font-weight: 500; flex: none; }

.gl-list-row {
  display: flex; align-items: center; gap: 20px; padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft-2); color: var(--ink);
  transition: background-color 120ms ease;
}
.gl-list-row:last-child { border-bottom: 0; }
.gl-list-row:hover { background: var(--paper-2); color: var(--ink); }

.gl-split-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft-2);
}
.gl-split-row:last-child { border-bottom: 0; }

/* ------------------------------------------------------------- heatmap ---- */

.gl-heat {
  /* Column-major: 7 explicit rows (one per weekday), columns added per week.
     With grid-auto-flow:column the ROWS must be explicit — otherwise each column
     takes a single cell and the grid collapses to one 371-column strip. */
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 53 / 7;   /* keeps the cells square without a fixed pixel size */
}
.gl-heat__cell { border-radius: 2px; background: #f2eee9; min-width: 0; min-height: 0; }
.gl-heat__cell[data-level="1"] { background: #e6dae4; }
.gl-heat__cell[data-level="2"] { background: #c8a3c5; }
.gl-heat__cell[data-level="3"] { background: #9a6797; }
.gl-heat__cell[data-level="4"] { background: #6d3f6b; }
.gl-heat__legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-top: 12px; font-size: 10.5px; color: var(--muted-light);
}
.gl-heat__legend .gl-heat__cell { width: 11px; height: 11px; flex: none; aspect-ratio: auto; }

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

.gl-casus {
  border: 1px solid var(--clay-line); background: var(--clay-surface-2);
  border-radius: 13px; padding: 16px 18px; margin-bottom: 12px;
}
.gl-casus__label {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--clay-text);
}
.gl-casus__text { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

.gl-question {
  border: 1px solid var(--line); background: var(--card);
  border-radius: 13px; padding: 20px; margin-bottom: 14px;
}
.gl-question__text {
  margin: 0; font-family: var(--font-display); font-size: 21px;
  font-weight: 400; line-height: 1.45;
}

.gl-options { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.gl-option {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--line); background: var(--card);
  border-radius: 11px; cursor: pointer; width: 100%; text-align: left;
  font-family: inherit; color: var(--ink-2);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.gl-option:hover { border-color: var(--line-hover-2); }
.gl-option__text { font-size: 13.5px; line-height: 1.5; flex: 1; }
.gl-option__key { font-weight: 600; }
.gl-option__mark {
  font-size: 10.5px; font-weight: 600; padding: 3px 8px;
  border-radius: 9999px; flex: none;
}
.gl-option--correct {
  background: var(--moss-surface-2); border-color: #a8c4a9; color: #2f4f31;
}
.gl-option--wrong {
  background: var(--rose-surface); border-color: #dbaaa7; color: #7a2f2b;
}
.gl-option--wrong .gl-option__mark { background: #f2d7d5; color: #7a2f2b; }
.gl-option--dim { background: var(--paper); color: var(--muted-light); }
.gl-option--dim:hover { border-color: var(--line); }
.gl-option__radio {
  width: 15px; height: 15px; border-radius: 9px;
  border: 1.5px solid var(--dot); background: transparent; flex: none;
}
.gl-option--selected { background: var(--plum-tint); border-color: var(--plum-tint-line); }
.gl-option--selected .gl-option__radio { border-color: var(--plum-on); background: var(--plum); }

.gl-explain {
  border: 1px solid var(--line); border-radius: 13px; background: var(--paper-2);
  padding: 18px 20px; margin-bottom: 14px;
}
.gl-explain__label {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.gl-explain__body { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.gl-linkchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.gl-linkchip {
  font-size: 11.5px; color: var(--plum-on); border: 1px solid var(--plum-tint-line);
  background: var(--plum-tint); padding: 5px 9px; border-radius: 8px;
}
.gl-linkchip--neutral { color: var(--muted); border-color: var(--fill); background: transparent; }
.gl-feedback {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid #efeae3;
}
.gl-nextup {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--plum-tint-line); background: var(--plum-tint);
  border-radius: 11px; padding: 13px 16px;
}

.gl-stickybar {
  /* Fixed, not sticky. `sticky; bottom: 0` only pins while the containing block
     still extends past the viewport, so on a question with a long explanation
     the bar sat at the very end of the page and you had to scroll past
     everything to reach "volgende" — on a phone, for every question. */
  position: fixed;
  left: var(--sidebar-w); right: 0; bottom: 0;
  border-top: 1px solid var(--line);
  background: var(--sticky-bg); backdrop-filter: blur(6px);
  padding: 12px 34px; z-index: 25;
}
.gl-stickybar__inner {
  max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
}

/* ---------------------------------------------------------------- exam ---- */

.gl-exam { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.gl-exam__aside {
  width: 250px; flex: none; border-right: 1px solid var(--line);
  background: var(--paper-2); padding: 26px 20px;
}
.gl-exam__timer {
  border: 1px solid var(--line); background: var(--card); border-radius: 11px;
  padding: 13px 15px; margin-bottom: 20px;
}
.gl-exam__timer-v {
  margin: 0; font-family: var(--font-mono); font-size: 22px;
  font-weight: 500; color: var(--plum-on);
}
.gl-exam__grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 16px;
}
.gl-exam__cell {
  aspect-ratio: 1; border-radius: 5px; background: var(--card);
  border: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-size: 9.5px;
  color: var(--muted-light); cursor: pointer; padding: 0;
}
.gl-exam__cell--answered { background: var(--exam-answered-bg); border-color: var(--exam-answered-line); color: var(--exam-answered-fg); }
.gl-exam__cell--flagged { background: var(--clay-surface); border-color: var(--clay-line); color: var(--clay-text); }
.gl-exam__cell--current { background: var(--plum); border-color: var(--plum-on); color: #fff; }
.gl-exam__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-exam__body { flex: 1; padding: 30px 34px 32px; max-width: 760px; }
.gl-exam__question {
  margin: 0 0 20px; font-family: var(--font-display); font-size: 22px;
  font-weight: 400; line-height: 1.45;
}
.gl-exam__foot {
  position: sticky; bottom: 0; border-top: 1px solid var(--line);
  background: var(--sticky-bg); backdrop-filter: blur(6px);
  padding: 12px 34px; display: flex; align-items: center; gap: 12px;
}

/* ----------------------------------------------------------- flashcards --- */

.gl-flashcard {
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  min-height: 340px; padding: 44px 40px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  cursor: pointer; box-shadow: var(--shadow-card); width: 100%;
  font-family: inherit; color: var(--ink);
  transition: border-color 120ms ease;
}
.gl-flashcard:hover { border-color: var(--line-hover); }
.gl-flashcard__side {
  margin: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-light);
}
.gl-flashcard__face {
  margin: 16px 0 0; font-family: var(--font-display); font-size: 26px;
  font-weight: 400; line-height: 1.4; max-width: 520px;
}
.gl-flashcard__hint { margin: 14px 0 0; font-size: 12.5px; font-style: italic; color: var(--muted); }
.gl-flashcard__cue { margin: 26px 0 0; font-size: 11.5px; color: var(--muted-light); }
.gl-flashcard__media {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft-3);
  max-width: 520px; width: 100%;
}
.gl-rates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gl-rate {
  border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 12px 8px; text-align: center; cursor: pointer;
  font-family: inherit; transition: border-color 120ms ease;
}
.gl-rate:hover { border-color: var(--line-hover-2); }
.gl-rate--1 { background: var(--rose-surface); border-color: var(--rose-line); }
.gl-rate--2 { background: var(--clay-surface); border-color: var(--clay-line); }
.gl-rate--5 { background: var(--moss-surface); border-color: var(--moss-line); }
.gl-rate__n { margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.gl-rate__l { margin: 4px 0 0; font-size: 11px; line-height: 1.3; color: var(--ink-3); }

.gl-stack { display: flex; gap: 2px; flex: none; width: 120px; }
.gl-stack__seg { height: 20px; border-radius: 3px; }
.gl-stack__seg--new { background: var(--plum); }
.gl-stack__seg--learning { background: #d8a884; }
.gl-stack__seg--review { background: #9fb79f; }

/* -------------------------------------------------------------- planner --- */

.gl-planner {
  border: 1px solid var(--line); border-radius: 13px; background: var(--card);
  overflow: hidden; margin-bottom: 16px;
}
.gl-planner__head {
  display: grid; grid-template-columns: 96px repeat(6, 1fr);
  border-bottom: 1px solid var(--line-soft); background: var(--paper-2);
}
.gl-planner__day { padding: 10px 12px; border-left: 1px solid var(--line-soft-3); }
.gl-planner__row {
  display: grid; grid-template-columns: 96px repeat(6, 1fr);
  border-bottom: 1px solid var(--line-soft-2); min-height: 78px;
}
.gl-planner__row:last-child { border-bottom: 0; }
.gl-planner__slot {
  padding: 12px 14px; font-family: var(--font-mono);
  font-size: 10.5px; color: var(--muted-light);
}
.gl-planner__cell { padding: 8px; border-left: 1px solid var(--line-soft-3); }
.gl-block { border-radius: 8px; padding: 8px 9px; height: 100%; border: 1px solid var(--fill); background: #f8f6f2; }
.gl-block__t { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: #4a443f; }
.gl-block__s { margin: 3px 0 0; font-size: 10.5px; color: var(--muted); }
.gl-block--reading { background: #f3f6f2; border-color: var(--moss-line-2); }
.gl-block--reading .gl-block__t { color: #3e5f40; }
.gl-block--questions { background: #f4ecf3; border-color: var(--plum-tint-line); }
.gl-block--questions .gl-block__t { color: var(--plum-dark-text); }
.gl-block--cards { background: var(--clay-surface-3); border-color: var(--clay-line); }
.gl-block--cards .gl-block__t { color: #8f4f27; }

/* -------------------------------------------------------------- reading --- */

.gl-doc { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.gl-toc {
  width: 236px; flex: none; border-right: 1px solid var(--line);
  padding: 28px 18px; background: var(--paper-2);
}
.gl-doc { align-items: flex-start; }
.gl-toc__item {
  display: block; padding: 6px 9px; border-radius: 7px; font-size: 12.5px;
  line-height: 1.35; color: var(--ink-3); transition: background-color 120ms ease;
}
.gl-toc__item:hover { background: var(--fill-2); color: var(--ink-3); }
.gl-toc__item--on { background: var(--selected); font-weight: 600; color: var(--ink); }
.gl-reading { flex: 1; min-width: 420px; padding: 30px 48px 60px; max-width: 760px; }
.gl-reading h2 {
  margin: 26px 0 10px; font-family: var(--font-display);
  font-size: 21px; font-weight: 500; color: var(--ink);
}
.gl-reading h3 { margin: 20px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.gl-reading p { margin: 0 0 20px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.gl-reading ul, .gl-reading ol { margin: 0 0 20px; padding-left: 22px; }
.gl-reading li { font-size: 14px; line-height: 1.8; color: var(--ink-2); margin: 4px 0; }
.gl-reading img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 8px 0; }
.gl-reading table { width: 100%; border-collapse: collapse; margin: 0 0 26px; }
.gl-reading th, .gl-reading td {
  padding: 9px 13px; font-size: 12.5px; text-align: left;
  border-bottom: 1px solid var(--line-soft-2); border-left: 1px solid var(--line-soft-2);
}
.gl-reading th { background: var(--paper-2); font-size: 11.5px; font-weight: 600; }
.gl-reading th:first-child, .gl-reading td:first-child { border-left: 0; }
.gl-reading a { text-decoration: underline; }
.gl-reading a.gl-btn,
.gl-reading a.gl-chip,
.gl-reading a.gl-pill,
.gl-reading a.gl-mynote,
.gl-reading a.gl-linkchip { text-decoration: none; }
.gl-reading blockquote {
  margin: 0 0 20px; padding-left: 14px; border-left: 3px solid var(--plum-tint-line);
  color: var(--ink-3); font-style: italic;
}
.gl-figure {
  border-radius: 12px; border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--hatch-a), var(--hatch-a) 8px, var(--hatch-b) 8px, var(--hatch-b) 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: #a09892;
}
.gl-embed {
  border-radius: 12px; border: 1px solid var(--line); background: var(--sidebar);
  overflow: hidden; aspect-ratio: 16 / 9;
}
.gl-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ----------------------------------------------------------------- chat --- */

.gl-chat { display: flex; height: calc(100vh - var(--topbar-h)); }
.gl-chat__aside {
  width: 236px; flex: none; border-right: 1px solid var(--line);
  background: var(--paper-2); padding: 24px 16px;
}
.gl-chat__mode {
  display: block; width: 100%; text-align: left; padding: 9px 11px;
  border-radius: 9px; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; transition: background-color 120ms ease;
}
.gl-chat__mode:hover { background: var(--fill-2); }
.gl-chat__mode--on { background: var(--selected); }
.gl-chat__mode-t { margin: 0; font-size: 12.5px; font-weight: 450; color: var(--ink-3); }
.gl-chat__mode--on .gl-chat__mode-t { font-weight: 600; color: var(--plum-on); }
.gl-chat__mode-s { margin: 2px 0 0; font-size: 11px; color: var(--muted-light); }
.gl-chat__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-chat__scroll { flex: 1; overflow-y: auto; padding: 30px 28px; }
.gl-chat__thread {
  max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;
}
.gl-msg { display: flex; flex-direction: column; align-items: flex-start; }
.gl-msg--user { align-items: flex-end; }
.gl-bubble {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 4px 16px 16px 16px; padding: 14px 17px; max-width: 88%;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .03);
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
}
.gl-bubble p { margin: 0 0 10px; }
.gl-bubble p:last-child { margin-bottom: 0; }
.gl-bubble--user {
  background: var(--plum); border-color: var(--plum-on); color: #fff;
  border-radius: 16px 16px 4px 16px; padding: 11px 15px; max-width: 78%;
  font-size: 13.5px; line-height: 1.55; box-shadow: none;
}
.gl-composer { border-top: 1px solid var(--line); padding: 16px 28px 20px; background: var(--paper); }
.gl-composer__inner { max-width: 640px; margin: 0 auto; }
.gl-composer__box {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line);
  border-radius: 13px; background: var(--card); padding: 11px 13px;
}
.gl-composer__box:focus-within { border-color: var(--plum-mid); }
.gl-composer__input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 13.5px; color: var(--ink); resize: none;
  max-height: 140px; line-height: 1.5;
}
.gl-composer__input::placeholder { color: var(--muted-light); }
.gl-composer__send {
  width: 30px; height: 30px; border-radius: 9px; background: var(--plum);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 13px; border: 0; cursor: pointer; flex: none;
  transition: background-color 120ms ease, opacity 120ms ease;
}
.gl-composer__send svg { width: 16px; height: 16px; }
.gl-composer__send:hover { background: var(--plum-hover); }
/* Disabled while an answer streams in — say so instead of inviting a second click. */
.gl-composer__send:disabled { opacity: .45; cursor: default; background: var(--plum); }
.gl-composer__note { margin: 9px 0 0; text-align: center; font-size: 11px; color: var(--muted-light); }

/* --------------------------------------------------------------- topics --- */

.gl-topic {
  border: 1px solid var(--line); border-radius: 13px; background: var(--card);
  padding: 16px 18px;
}
.gl-topic--resolved { background: #f7faf6; border-color: var(--moss-line-2); }
.gl-topic--resolved .gl-topic__title { color: var(--muted); text-decoration: line-through; }
.gl-topic__title { margin: 0; font-size: 14px; font-weight: 600; }
.gl-topic__meta { margin: 3px 0 0; font-size: 11px; color: var(--muted-light); }
.gl-topic__note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.65; color: var(--ink-3); }
.gl-editor { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 14px; }
.gl-editor__bar {
  display: flex; gap: 3px; padding: 7px 9px;
  border-bottom: 1px solid var(--line-soft); background: var(--paper-2);
}
.gl-editor__tool {
  width: 24px; height: 22px; border-radius: 5px; display: flex;
  align-items: center; justify-content: center; font-size: 11px;
  color: var(--muted); background: var(--card); border: 1px solid var(--fill);
  cursor: pointer; font-family: inherit; padding: 0;
}
.gl-editor__tool:hover { border-color: var(--line-hover); color: var(--ink-3); }
.gl-editor__area {
  min-height: 110px; padding: 12px; font-size: 13px; line-height: 1.65;
  color: var(--ink-2); outline: none;
}
.gl-editor__area:empty::before { content: attr(data-placeholder); color: #c5bdb5; }

/* -------------------------------------------------------------- banners --- */

.gl-banner {
  border: 1px solid var(--plum-tint-line); background: var(--plum-tint);
  border-radius: 13px; padding: 26px 28px;
  display: flex; align-items: center; gap: 24px;
}
.gl-banner__t {
  margin: 0 0 7px; font-family: var(--font-display); font-size: 20px;
  font-weight: 500; color: var(--plum-dark-text);
}
.gl-banner__b { margin: 0; font-size: 13px; line-height: 1.65; color: var(--plum-body); max-width: 520px; }

/* Compact strip above an adaptive session: which exam it is counting down to,
   and why the session changed strategy when it did. */
.gl-examstrip {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  border: 1px solid var(--plum-tint-line); background: var(--plum-tint);
  border-radius: 10px; padding: 9px 13px;
  font-size: 12.5px; line-height: 1.55; color: var(--plum-body);
}
.gl-examstrip__t { font-weight: 600; color: var(--plum-dark-text); }

/* The strip and the settings button share one row; the strip takes the slack
   and the button keeps its square shape whether or not the strip is shown. */
.gl-sessionbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.gl-sessionbar .gl-examstrip { flex: 1; min-width: 0; }
/* Stays on the right whether or not the strip is there to push it. */
.gl-sessionbar .gl-btn--icononly { margin-left: auto; }

/* Icon-only button — its label lives in aria-label/title. */
.gl-btn--icononly { padding: 8px; gap: 0; flex: none; }
.gl-btn--icononly > svg { width: 17px; height: 17px; }

/* ---------------------------------------------------- question timer --- */

/* Countdown for one question, paced like the real exam. */
.gl-timer { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gl-timer__bar {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--fill); overflow: hidden;
}
.gl-timer__fill {
  height: 100%; width: 100%; border-radius: 999px;
  background: var(--plum); transition: width .25s linear, background-color .3s ease;
}
.gl-timer__t { font-size: 11px; color: var(--muted); min-width: 42px; text-align: right; }
.gl-timer--warn .gl-timer__fill { background: var(--clay); }
.gl-timer--warn .gl-timer__t { color: var(--clay-text); }
.gl-timer--over .gl-timer__fill { background: var(--rose); }
.gl-timer--over .gl-timer__t { color: var(--rose); font-weight: 600; }
/* Answered: the bar freezes and steps back, it is no longer the point. */
.gl-timer--done { opacity: .45; }

/* ------------------------------------------------- session settings --- */

/* One setting: label and explanation on the left, control on the right. */
.gl-setrow {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft-2);
}
.gl-setrow:last-of-type { border-bottom: 0; }
.gl-setrow__text { flex: 1; min-width: 0; }
.gl-setrow__text strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.gl-setrow__text em {
  display: block; margin-top: 2px; font-size: 11.5px; font-style: normal;
  line-height: 1.5; color: var(--muted);
}
label.gl-setrow { cursor: pointer; }

/* iOS-style toggle, driven by a real checkbox for keyboard and screen readers. */
.gl-toggle { position: relative; flex: none; display: inline-flex; }
.gl-toggle input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.gl-toggle__track {
  width: 40px; height: 23px; border-radius: 999px;
  background: var(--fill-3); border: 1px solid var(--line);
  transition: background-color .18s ease, border-color .18s ease;
}
.gl-toggle__track::after {
  content: ""; display: block; width: 17px; height: 17px; margin: 2px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  transition: transform .18s ease;
}
.gl-toggle input:checked + .gl-toggle__track { background: var(--plum); border-color: var(--plum); }
.gl-toggle input:checked + .gl-toggle__track::after { transform: translateX(17px); }
.gl-toggle input:focus-visible + .gl-toggle__track { outline: 2px solid var(--plum-mid); outline-offset: 2px; }

/* Which objectives the current session was narrowed to. */
.gl-topicfilter { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.gl-topicfilter__t { font-size: 11.5px; color: var(--muted); }
/* A single objective's name is a full sentence — keep it to one line. */
.gl-topicfilter .gl-pill {
  max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------- practice exams --- */

/* Duration picker: the first choice of a sitting is how long you have. */
.gl-durations { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-duration { cursor: pointer; }
.gl-duration input { position: absolute; opacity: 0; pointer-events: none; }
.gl-duration__box {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 76px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.gl-duration__box strong { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--ink); }
.gl-duration__box em { font-size: 10.5px; font-style: normal; color: var(--muted); }
.gl-duration:hover .gl-duration__box { border-color: var(--line-hover); }
.gl-duration input:checked + .gl-duration__box { border-color: var(--plum); background: var(--plum-tint); }
.gl-duration input:checked + .gl-duration__box strong { color: var(--plum-dark-text); }
.gl-duration input:focus-visible + .gl-duration__box { outline: 2px solid var(--plum-mid); outline-offset: 2px; }

/* Learn vs test mode. */
.gl-modepick { cursor: pointer; }
.gl-modepick input { position: absolute; opacity: 0; pointer-events: none; }
.gl-modepick__box {
  display: block; height: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card);
}
.gl-modepick__box strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.gl-modepick__box em {
  display: block; margin-top: 3px; font-size: 11.5px; font-style: normal;
  line-height: 1.5; color: var(--muted);
}
.gl-modepick input:checked + .gl-modepick__box { border-color: var(--plum); background: var(--plum-tint); }
.gl-modepick input:focus-visible + .gl-modepick__box { outline: 2px solid var(--plum-mid); outline-offset: 2px; }

/* One past sitting in the list. */
.gl-attemptrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft-2);
  color: inherit; text-decoration: none;
}
.gl-attemptrow:last-child { border-bottom: 0; }
.gl-attemptrow:hover { background: var(--paper-2); }
.gl-attemptrow__t { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.gl-attemptrow__m { font-size: 11.5px; color: var(--muted); }

/* The verdict: does this pace clear the real exam? */
.gl-pacecard { padding: 18px 20px; }
.gl-pacecard--ok { border-color: var(--moss-line, var(--line)); background: var(--moss-surface); }
.gl-pacecard--short { border-color: var(--clay-line); background: var(--clay-surface); }
.gl-pacecard__t { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); }
.gl-pacecard__b { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-3); }

/* --------------------------------------------- practise by topic --- */

/* Recommendation card: title, reason, count, then the button pinned to the
   bottom so a row of cards lines up whatever the text length. */
.gl-reccard { display: flex; flex-direction: column; padding: 16px 18px; }
.gl-reccard__t { margin: 0 0 5px; font-size: 14px; font-weight: 600; color: var(--ink); }
.gl-reccard__b { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.gl-reccard__n { margin: 9px 0 0; font-size: 12px; font-weight: 600; color: var(--plum-on); }
.gl-reccard--weak { border-color: var(--clay-line); background: var(--clay-surface-3); }
.gl-reccard--unpractised { border-color: var(--plum-tint-line); background: var(--plum-tint); }

/* One-click start on a whole week's objectives.  A grid rather than a wrapping
   flex row, so every card is the same width whatever the week is called. */
.gl-weekpicks {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}
.gl-weekpick {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: inherit; text-decoration: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.gl-weekpick:hover { border-color: var(--plum); background: var(--plum-tint); }
.gl-weekpick strong { font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* The theme is what students recognise a week by, but it can run long: one
   line, clipped to the card, so the row stays a grid of equal tiles. */
.gl-weekpick__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--ink-3);
}
.gl-weekpick em { margin-top: 1px; font-size: 11px; font-style: normal; color: var(--muted); }

/* One week of learning objectives, collapsed until opened. */
.gl-weekgroup {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); margin-bottom: 10px; overflow: hidden;
}
.gl-weekgroup__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
.gl-weekgroup__head::-webkit-details-marker { display: none; }
.gl-weekgroup__head:hover { background: var(--paper-2); }
.gl-weekgroup__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.gl-weekgroup__meta { flex: 1; font-size: 11.5px; color: var(--muted); }
.gl-weekgroup__list { border-top: 1px solid var(--line-soft-2); }

.gl-topicrow {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-soft-2); cursor: pointer;
}
.gl-topicrow:last-child { border-bottom: 0; }
.gl-topicrow:hover { background: var(--paper-2); }
.gl-topicrow input { margin-top: 3px; flex: none; accent-color: var(--plum); }
.gl-topicrow__text { flex: 1; min-width: 0; }
.gl-topicrow__text strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.gl-topicrow__text em {
  display: block; margin-top: 2px; font-size: 11.5px; font-style: normal;
  line-height: 1.5; color: var(--muted);
}
.gl-topicrow__stat { display: flex; align-items: center; gap: 8px; flex: none; }
.gl-topicrow__stat .gl-mono { font-size: 11px; color: var(--muted); min-width: 22px; text-align: right; }
/* Nothing to practise here — visible, but not offered. */
.gl-topicrow--empty { opacity: .5; cursor: default; }
.gl-topicrow--empty:hover { background: transparent; }

/* Three-way choice where a plain on/off would throw away the automatic option. */
.gl-seg { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.gl-seg button {
  padding: 6px 11px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--ink-3);
  border-right: 1px solid var(--line-soft);
}
.gl-seg button:last-child { border-right: 0; }
.gl-seg button:hover { background: var(--fill-2); }
.gl-seg button[aria-pressed="true"] { background: var(--plum); color: #fff; }

.gl-empty {
  border: 1px dashed var(--line); border-radius: 13px; background: var(--paper-2);
  padding: 34px 28px; text-align: center; color: var(--muted);
  font-size: 13px; line-height: 1.6;
}

.gl-messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.gl-message {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); background: var(--card);
  border-radius: 11px; padding: 11px 14px; font-size: 12.5px; color: var(--ink-2);
}
.gl-message--success { background: var(--moss-surface-2); border-color: var(--moss-line-2); color: #2f4f31; }
.gl-message--error { background: var(--rose-surface); border-color: var(--rose-line); color: #7a2f2b; }
.gl-message--warning { background: var(--clay-surface); border-color: var(--clay-line); color: #8f4f27; }
.gl-message__close {
  border: 0; background: transparent; cursor: pointer; color: inherit;
  opacity: .55; font-size: 14px; line-height: 1; padding: 0;
}
.gl-message__close:hover { opacity: 1; }

/* ---------------------------------------------------------------- modal --- */

.gl-modal-overlay {
  position: fixed; inset: 0; background: rgba(43, 37, 48, .38);
  backdrop-filter: blur(3px); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.gl-modal-overlay[hidden] { display: none; }
.gl-modal {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  max-width: 420px; width: 100%; padding: 22px 24px;
  box-shadow: 0 10px 40px rgba(43, 37, 48, .18);
}
.gl-modal__t { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.gl-modal__m { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.gl-modal__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ------------------------------------------------------------ utilities --- */

.gl-flex { display: flex; align-items: center; gap: 10px; }
.gl-flex--between { justify-content: space-between; }
.gl-flex--end { align-items: flex-end; }
.gl-flex--start { align-items: flex-start; }
.gl-flex--wrap { flex-wrap: wrap; }
.gl-col { display: flex; flex-direction: column; }
.gl-spacer { flex: 1; }
.gl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-mb-0 { margin-bottom: 0; }
.gl-mb-1 { margin-bottom: 8px; }
.gl-mb-2 { margin-bottom: 14px; }
.gl-mb-3 { margin-bottom: 22px; }
.gl-mb-4 { margin-bottom: 30px; }
.gl-mt-1 { margin-top: 8px; }
.gl-mt-2 { margin-top: 14px; }
.gl-mt-3 { margin-top: 22px; }
.gl-hide { display: none !important; }

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

.gl-navclose { display: none; }

@media (max-width: 1023px) {
  .gl-sidebar { display: none; }

  /* "Meer" used to link straight to one page, which left nine destinations —
     samenvattingen, deadlines, stats, AI-chat and the rest — with no way in on
     a phone. It now opens the real navigation as a sheet, reusing the sidebar
     itself so the two can never drift apart. */
  body.gl-nav-open { overflow: hidden; }
  body.gl-nav-open .gl-sidebar {
    display: flex;
    position: fixed; inset: 0;
    width: 100%; height: 100dvh;
    z-index: 60; overflow-y: auto;
    border-right: 0;
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
  .gl-navclose {
    position: fixed; right: 14px; top: 12px; z-index: 61;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    font-size: 18px; line-height: 1; cursor: pointer;
  }
  body.gl-nav-open .gl-navclose { display: block; }

  .gl-shell { flex-direction: column; }
  .gl-topbar { padding: 0 16px; gap: 10px; }
  .gl-search { display: none; }
  .gl-content { padding-bottom: 72px; }

  /* Room for the fixed tab bar. */
  .gl-page { padding: 20px 16px calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); max-width: none; }
  /* A question page also has the fixed action bar sitting above the tab bar. */
  .gl-page--question { padding: 20px 16px calc(var(--tabbar-h) + 86px + env(safe-area-inset-bottom)); max-width: none; }

  .gl-h1 { font-size: 24px; }
  .gl-h1--hero, .gl-h1--doc { font-size: 24px; line-height: 1.2; }

  .gl-grid--split,
  .gl-grid--aside,
  .gl-grid--3,
  .gl-grid--4 { grid-template-columns: 1fr; }
  .gl-grid--4.gl-grid--keep-2 { grid-template-columns: repeat(2, 1fr); }

  .gl-exam, .gl-doc, .gl-chat { flex-direction: column; height: auto; min-height: 0; }
  .gl-exam__aside, .gl-toc, .gl-chat__aside {
    width: auto; border-right: 0; border-bottom: 1px solid var(--line);
    padding: 16px;
  }
  .gl-exam__body, .gl-reading { padding: 20px 16px 32px; max-width: none; min-width: 0; }
  .gl-exam__foot { padding: 12px 16px; }
  /* Above the tab bar, which is itself fixed to the bottom. */
  .gl-stickybar {
    left: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 10px 16px;
  }
  .gl-chat { height: auto; }
  .gl-chat__scroll { padding: 20px 16px; }
  .gl-composer { padding: 12px 16px 16px; }

  .gl-rates { grid-template-columns: 1fr; }
  .gl-rate { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 46px; }
  .gl-rate__n { width: 12px; }
  .gl-rate__l { margin: 0; font-size: 13px; }

  .gl-flashcard { min-height: 260px; padding: 26px 22px; }
  .gl-flashcard__face { font-size: 21px; }

  .gl-planner { overflow-x: auto; }
  .gl-planner__head, .gl-planner__row { min-width: 720px; }

  .gl-list-row { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .gl-stack { width: 100%; }

  .gl-banner { flex-direction: column; align-items: flex-start; padding: 20px; }

  /* Bottom tab bar */
  .gl-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    border-top: 1px solid var(--line); background: var(--sidebar);
    padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
    /* Explicit height so .gl-stickybar can sit exactly on top of it. */
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  .gl-tabbar__item {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 6px 0; min-height: 46px; justify-content: center;
    font-size: 10px; font-weight: 450; color: var(--muted);
    /* "Meer" is a <button>; the rest are links. */
    background: none; border: 0; font-family: var(--font-ui); cursor: pointer;
  }
  .gl-tabbar__icon { width: 20px; height: 20px; flex: none; color: var(--muted); }
  .gl-tabbar__item--on { color: var(--plum-on); font-weight: 600; }
  .gl-tabbar__item--on .gl-tabbar__icon { color: var(--plum-on); }
}

@media (max-width: 560px) {
  .gl-grid--4.gl-grid--keep-2 { grid-template-columns: 1fr; }
  .gl-countdown__l { display: none; }
}

/* Explanation feedback vote states */
.gl-btn--voted-yes {
  background: var(--moss-surface-2); border-color: var(--moss-line);
  color: #2f4f31; font-weight: 600;
}
.gl-btn--voted-no {
  background: var(--rose-surface); border-color: var(--rose-line);
  color: #7a2f2b; font-weight: 600;
}

/* Rich text inside the student UI (Quill-authored HTML from the admin) */
.rich-text h2 { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin: 20px 0 8px; color: var(--ink); }
.rich-text h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; color: var(--ink); }
.rich-text h4 { font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--ink-2); }
.rich-text p { margin: 0 0 10px; line-height: 1.7; color: var(--ink-2); }
.rich-text ul { list-style: disc; padding-left: 20px; margin: 0 0 10px; }
.rich-text ol { list-style: decimal; padding-left: 20px; margin: 0 0 10px; }
.rich-text li { margin: 3px 0; line-height: 1.7; color: var(--ink-2); }
.rich-text strong { font-weight: 600; }
.rich-text em { font-style: italic; }
.rich-text a { color: var(--plum-on); text-decoration: underline; }
.rich-text img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; display: block; }
.rich-text blockquote {
  border-left: 3px solid var(--plum-tint-line); padding-left: 12px;
  color: var(--ink-3); font-style: italic; margin: 12px 0;
}
/* Vancouver citations: a superscript in the prose links to its entry in the
   "Bronnen" list at the foot of the summary. */
.rich-text sup.gl-cite { font-size: .7em; line-height: 0; white-space: nowrap; }
.rich-text sup.gl-cite a { color: var(--plum-on); text-decoration: none; padding: 0 1px; font-weight: 600; }
.rich-text sup.gl-cite a:hover { text-decoration: underline; }
.rich-text ol.gl-bronnen { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.rich-text ol.gl-bronnen li { margin: 5px 0; line-height: 1.6; }
/* Land a little below the sticky header, and flash the target reference so the
   jump from a superscript is legible. */
.rich-text ol.gl-bronnen li { scroll-margin-top: 90px; border-radius: 6px; }
.rich-text ol.gl-bronnen li:target { background: var(--plum-tint); animation: gl-cite-flash 1.6s ease-out; }
@keyframes gl-cite-flash { 0% { background: var(--plum-tint-line); } 100% { background: transparent; } }
.rich-text table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12.5px; }
.rich-text th, .rich-text td { border: 1px solid var(--line-soft-2); padding: 7px 10px; text-align: left; }
.rich-text th { background: var(--paper-2); font-weight: 600; }
.rich-text pre {
  background: var(--paper-2); border-radius: 8px; padding: 10px 12px;
  font-family: var(--font-mono); font-size: 12px; overflow-x: auto;
}
.rich-text code { background: var(--paper-2); border-radius: 4px; padding: 1px 4px; font-family: var(--font-mono); font-size: .9em; }
.rich-text .ql-align-center { text-align: center; }
.rich-text .ql-align-right { text-align: right; }
.rich-text .ql-indent-1 { padding-left: 3em; }
.rich-text .ql-indent-2 { padding-left: 6em; }

/* Answered state: options stay coloured but are no longer interactive */
.gl-option--frozen { cursor: default; pointer-events: none; }

/* ---------------------------------------------------- exam-take internals --
   These class names are driven by the exam-take JS (question grid state,
   answer result colouring), so they keep their original names.            */

.q-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 16px; }
.q-btn {
  aspect-ratio: 1; width: 100%; border-radius: 5px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-light);
  cursor: pointer; padding: 0;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.q-btn:hover { border-color: var(--line-hover); }
.q-btn.answered { background: var(--exam-answered-bg); border-color: var(--exam-answered-line); color: var(--exam-answered-fg); }
.q-btn.correct { background: var(--moss-surface); border-color: var(--moss-line); color: var(--moss); }
.q-btn.wrong { background: var(--rose-surface); border-color: var(--rose-line); color: var(--rose); }
.q-btn.active { background: var(--plum); border-color: var(--plum-on); color: #fff; }

.exam-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-card { padding: 30px 34px 32px; max-width: 760px; }

.option-label {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--line); background: var(--card); border-radius: 11px;
  cursor: pointer; color: var(--ink-2);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.option-label:hover { border-color: var(--line-hover-2); }
.option-label:has(input:checked) { background: var(--plum-tint); border-color: var(--plum-tint-line); }
.option-radio {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; border-radius: 9px; flex: none;
  border: 1.5px solid var(--dot); background: transparent; margin: 0; cursor: pointer;
}
.option-label:has(input:checked) .option-radio { border-color: var(--plum-on); background: var(--plum); }
.option-letter { font-weight: 600; font-size: 13.5px; flex: none; }
.option-text { flex: 1; font-size: 13.5px; line-height: 1.5; }

/* Result states — the :has() variants beat the checked-state rule above. */
.option-label.opt-correct,
.option-label.opt-correct:has(input:checked),
.option-label.opt-correct-sel,
.option-label.opt-correct-sel:has(input:checked) {
  background: var(--moss-surface-2); border-color: #a8c4a9; color: #2f4f31;
}
.option-label.opt-correct-sel,
.option-label.opt-correct-sel:has(input:checked) { box-shadow: 0 0 0 2px rgba(78, 117, 80, .18); }
.option-label.opt-wrong-sel,
.option-label.opt-wrong-sel:has(input:checked) {
  background: var(--rose-surface); border-color: #dbaaa7; color: #7a2f2b;
  box-shadow: 0 0 0 2px rgba(168, 68, 63, .14);
}
.option-label.opt-neutral,
.option-label.opt-neutral:has(input:checked) {
  background: var(--paper); border-color: var(--line); color: var(--muted-light);
}
.option-label.opt-correct .option-radio,
.option-label.opt-correct-sel .option-radio { border-color: var(--moss); background: var(--moss); }
.option-label.opt-wrong-sel .option-radio { border-color: var(--rose); background: var(--rose); }
.jouw-keuze-badge {
  font-size: 10.5px; font-weight: 600; padding: 3px 8px;
  border-radius: 9999px; flex: none;
  background: #f2d7d5; color: #7a2f2b;
}
.opt-correct-sel .jouw-keuze-badge { background: #d6e4d7; color: #2f4f31; }

@media (max-width: 1023px) {
  .q-card { padding: 20px 16px 28px; max-width: none; }
  .q-grid { grid-template-columns: repeat(10, 1fr); }
}

/* Compatibility: page scripts toggle a plain `hidden` class */
.hidden { display: none !important; }

/* Chat: markdown rendering + typing indicator */
.ai-response h1, .ai-response h2, .ai-response h3 {
  font-family: var(--font-display); font-weight: 500; margin: 14px 0 6px; color: var(--ink);
}
.ai-response h1 { font-size: 18px; }
.ai-response h2 { font-size: 16px; }
.ai-response h3 { font-size: 14px; font-family: var(--font-ui); font-weight: 600; }
.ai-response p { margin: 0 0 10px; }
.ai-response p:last-child { margin-bottom: 0; }
.ai-response ul, .ai-response ol { margin: 8px 0 10px 20px; padding: 0; }
.ai-response ul { list-style: disc; }
.ai-response ol { list-style: decimal; }
.ai-response li { margin-bottom: 4px; }
.ai-response strong { font-weight: 600; }
.ai-response code {
  background: var(--paper-2); padding: 1px 4px; border-radius: 4px;
  font-size: .88em; font-family: var(--font-mono);
}
.ai-response pre {
  background: var(--paper-2); padding: 10px 12px; border-radius: 8px;
  overflow-x: auto; margin: 8px 0;
}
.ai-response pre code { background: none; padding: 0; }
.ai-response blockquote {
  border-left: 3px solid var(--plum-tint-line); padding-left: 12px;
  color: var(--ink-3); margin: 8px 0;
}
.ai-response table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
.ai-response th, .ai-response td { border: 1px solid var(--line-soft-2); padding: 6px 9px; text-align: left; }
.ai-response th { background: var(--paper-2); font-weight: 600; }

.typing-dots span {
  display: inline-block; width: 6px; height: 6px;
  background: var(--muted-light); border-radius: 50%; margin: 0 2px;
  animation: gl-bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes gl-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}

/* ------------------------------------------------------------- search ----- */

.gl-palette {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(43, 37, 48, .34); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.gl-palette[hidden] { display: none; }
.gl-palette__box {
  width: 100%; max-width: 560px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(43, 37, 48, .2);
  overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
.gl-palette__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.gl-palette__input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--ink);
}
.gl-palette__input::placeholder { color: var(--muted-light); }
.gl-palette__esc {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  background: var(--sidebar); padding: 3px 6px; border-radius: 4px; flex: none;
}
.gl-palette__results { overflow-y: auto; padding: 6px; }
.gl-palette__group {
  margin: 8px 0 4px; padding: 0 10px; font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted-light);
}
.gl-palette__item {
  /* Stacked, not side by side: results now carry a sentence-long excerpt, and
     a `flex:1` title next to a `flex:none` subtitle squeezed the title into a
     vertical stack of single words while the excerpt overflowed the box. */
  display: block; padding: 9px 10px;
  border-radius: 8px; color: var(--ink); cursor: pointer; text-decoration: none;
}
.gl-palette__item:hover,
.gl-palette__item--active { background: var(--plum-nav); color: var(--ink); }
.gl-palette__title {
  display: block; font-size: 13px; font-weight: 500; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-palette__sub {
  /* Two lines rather than one truncated one: the excerpt is centred on the
     match, and clipping it to a single line could push the highlighted term
     off the right edge — the one thing the reader is looking for. */
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
  margin-top: 2px; overflow: hidden;
  font-size: 11px; line-height: 1.45; color: var(--muted);
}
.gl-palette__empty {
  padding: 26px 16px; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}

@media (max-width: 1023px) {
  .gl-palette { padding: 8vh 12px 12px; }
  /* The top bar hides the search button on mobile; expose it in the tab bar area */
  .gl-search { display: flex; min-width: 0; }
  .gl-search span:first-child { display: none; }
}

/* ---------------------------------------------------------------- auth ---- */

.gl-auth {
  display: grid; grid-template-columns: 1fr 0.85fr;
  min-height: 100vh; background: var(--paper);
}
.gl-auth__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 56px; max-width: 560px; width: 100%; margin: 0 auto;
}
.gl-auth__brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 32px;
  align-self: flex-start;
}
.gl-auth__brand:hover { color: inherit; }
.gl-auth__card { width: 100%; }
.gl-auth__title {
  margin: 0 0 8px; font-family: var(--font-display);
  font-size: 30px; font-weight: 500; letter-spacing: -.015em; color: var(--ink);
}
.gl-auth__sub { margin: 0 0 26px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.gl-auth__form { display: flex; flex-direction: column; gap: 14px; }
.gl-auth__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0; font-size: 11px; color: var(--muted-light);
}
.gl-auth__divider::before,
.gl-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.gl-auth__google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--card); color: var(--ink-2);
  font-family: inherit; font-size: 13px; font-weight: 500;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.gl-auth__google:hover { border-color: var(--line-hover); background: var(--paper-2); color: var(--ink-2); }
.gl-auth__google svg { width: 17px; height: 17px; flex: none; }
.gl-auth__links {
  margin-top: 26px; display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}
.gl-auth__errors {
  border: 1px solid var(--rose-line); background: var(--rose-surface);
  border-radius: 11px; padding: 12px 14px; margin-bottom: 18px;
}
.gl-auth__errors p { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: #7a2f2b; }
.gl-auth__errors ul { margin: 0; padding-left: 18px; }
.gl-auth__errors li { font-size: 12.5px; line-height: 1.6; color: #7a2f2b; }
.gl-auth__check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-3); cursor: pointer;
}

/* Right-hand panel */
.gl-auth__aside {
  background: var(--sidebar); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 52px; gap: 28px;
}
.gl-auth__quote {
  margin: 0; font-family: var(--font-display); font-size: 22px;
  font-weight: 400; line-height: 1.5; color: var(--ink); max-width: 420px;
}
.gl-auth__marks { display: flex; gap: 5px; }
.gl-auth__marks span {
  width: 26px; height: 6px; border-radius: 3px; background: var(--plum-mid);
}
.gl-auth__marks span:nth-child(1),
.gl-auth__marks span:nth-child(2),
.gl-auth__marks span:nth-child(3) { background: var(--plum); }
.gl-auth__marks span:nth-child(5) { background: var(--fill-3); }

@media (max-width: 900px) {
  .gl-auth { grid-template-columns: 1fr; }
  .gl-auth__aside { display: none; }
  .gl-auth__panel { padding: 32px 20px; justify-content: flex-start; padding-top: 48px; }
  .gl-auth__title { font-size: 26px; }
}

/* Year groups inside the OWE picker */
.gl-owe-year + .gl-owe-year { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.gl-owe-year__head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background-color 120ms ease;
}
.gl-owe-year__head:hover { background: var(--fill); }
.gl-owe-year__label {
  flex: 1; font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.gl-owe-year--open .gl-owe-year__label { color: var(--plum-on); }
.gl-owe-year__count {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted-light);
  background: var(--fill); padding: 2px 5px; border-radius: 4px;
}
.gl-owe-year__chev {
  width: 11px; height: 11px; flex: none; color: var(--muted-light);
  transition: transform 120ms ease;
}
.gl-owe-year--open .gl-owe-year__chev { transform: rotate(180deg); }
.gl-owe-year__list { display: none; padding-top: 2px; }
.gl-owe-year--open .gl-owe-year__list { display: block; }
.gl-owe-year__empty { margin: 0; padding: 12px 10px; font-size: 12px; color: var(--muted); }

/* Thumbs up/down on an explanation */
.gl-vote {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--muted-light); cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.gl-vote svg { width: 14px; height: 14px; }
.gl-vote:hover { border-color: var(--line-hover); color: var(--ink-3); }
.gl-vote--yes {
  background: var(--moss-surface-2); border-color: var(--moss-line); color: var(--moss);
}
.gl-vote--yes svg { fill: rgba(78, 117, 80, .16); }
.gl-vote--yes:hover { color: var(--moss); border-color: var(--moss-line); }
.gl-vote--no {
  background: var(--rose-surface); border-color: var(--rose-line); color: var(--rose);
}
.gl-vote--no svg { fill: rgba(168, 68, 63, .14); }
.gl-vote--no:hover { color: var(--rose); border-color: var(--rose-line); }

/* ------------------------------------------------------- choice badges ---- */
/* Radio inputs styled as clickable chips. The input stays in the DOM (visually
   hidden, not display:none) so it remains focusable and keyboard-navigable. */

.gl-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.gl-choice { display: inline-flex; position: relative; }
.gl-choice input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;
}
.gl-choice__badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 9999px;
  background: var(--card); color: var(--ink-3);
  font-size: 12.5px; font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  user-select: none;
}
.gl-choice__badge:hover { border-color: var(--line-hover); color: var(--ink); }
.gl-choice input[type="radio"]:checked + .gl-choice__badge {
  background: var(--plum); border-color: var(--plum-on); color: #fff; font-weight: 600;
}
.gl-choice input[type="radio"]:focus-visible + .gl-choice__badge {
  outline: none; box-shadow: 0 0 0 3px rgba(109, 63, 107, .18);
}

/* Summary sidebar: weeks -> chapters -> sections */
.gl-toc {
  position: sticky; top: var(--topbar-h); align-self: flex-start;
  /* A fixed height (not max-height) keeps the pane and its right border running
     the full viewport, instead of stopping wherever the list happens to end. */
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
}
.gl-toc__week { padding-bottom: 8px; }
.gl-toc__weeklabel {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 0 3px; padding: 0 9px;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-light);
}
.gl-toc__weeklabel .gl-chip { flex: none; }
.gl-toc__item--empty { color: var(--muted-light); font-style: italic; cursor: default; }
.gl-toc__item--empty:hover { background: transparent; }
.gl-toc__sections {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 4px 9px; padding-left: 9px;
  border-left: 1px solid var(--line);
}
.gl-toc__section {
  display: block; padding: 4px 8px; border-radius: 6px;
  font-size: 11.5px; line-height: 1.35; color: var(--muted);
  transition: background-color 120ms ease, color 120ms ease;
}
.gl-toc__section:hover { background: var(--fill-2); color: var(--ink-3); }
.gl-toc__section--on { color: var(--plum-on); font-weight: 600; }

/* Light/dark toggle in the top bar */
.gl-themetoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; flex: none; padding: 0;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--muted); cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.gl-themetoggle:hover { color: var(--ink-3); border-color: var(--line-hover); }
.gl-themetoggle svg { width: 15px; height: 15px; }
/* Show the icon for the theme you would switch *to*. */
.gl-themetoggle__sun { display: none; }
.gl-themetoggle__moon { display: block; }
:root[data-theme="dark"] .gl-themetoggle__sun { display: block; }
:root[data-theme="dark"] .gl-themetoggle__moon { display: none; }

/* ── "Ik wil het niet weten": blur every score ──────────────────────────────
   Toggled from the top bar; the state lives on <html data-scores="hidden">.
   Anything that tells the student how well they are doing carries
   `.gl-scoreblur`, so one rule covers pages that have not been touched yet. */
.gl-scores__open { display: block; }
.gl-scores__shut { display: none; }
:root[data-scores="hidden"] .gl-scores__open { display: none; }
:root[data-scores="hidden"] .gl-scores__shut { display: block; }
:root[data-scores="hidden"] #gl-scores-toggle { color: var(--plum-on); border-color: var(--plum); }

:root[data-scores="hidden"] .gl-scoreblur {
  filter: blur(6px);
  /* The number is still selectable underneath; this is a "don't show me",
     not a lock. Pointer-events stay on so links inside keep working. */
  transition: filter .18s ease;
}
:root[data-scores="hidden"] .gl-scoreblur:hover,
:root[data-scores="hidden"] .gl-scoreblur:focus-within { filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  :root[data-scores="hidden"] .gl-scoreblur { transition: none; }
}

/* ── The practice question an AI chat was opened from ───────────────────── */
.gl-chatq {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--plum);
  border-radius: 11px;
  background: var(--paper-2);
}
.gl-chatq__text { font-size: 14px; color: var(--ink); }
.gl-chatq__img {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* ── Deadline rows ──────────────────────────────────────────────────────── */
.gl-deadline {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft-2);
}
.gl-deadline:last-child { border-bottom: 0; }
.gl-deadline__when {
  flex: none;
  width: 44px;
  display: grid;
  justify-items: center;
  padding-top: 2px;
}
.gl-deadline__day { font: 500 20px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.gl-deadline__mon { font: 500 9.5px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.gl-deadline__body { flex: 1; min-width: 0; }
.gl-deadline__t { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gl-deadline__m { margin: 3px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.gl-deadline__d { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.gl-deadline__right { flex: none; display: grid; gap: 6px; justify-items: end; }
.gl-deadline__days { font: 500 11px var(--font-mono); color: var(--muted); white-space: nowrap; }
.gl-deadline__days--soon { color: var(--clay-text); }
.gl-deadline--past { opacity: .55; }

/* ── Inline section editor (admin summary page) ─────────────────────────── */
.gl-seceditor {
  padding: 16px 20px 18px;
  border-bottom: 1px solid var(--line-soft-2);
}
.gl-seceditor:last-child { border-bottom: 0; }
.gl-seceditor__head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.gl-seceditor__order {
  flex: none;
  width: 52px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink-2);
  font: 500 12px var(--font-mono);
  text-align: center;
}
.gl-seceditor__title {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: 600 14px var(--font-ui);
}
.gl-seceditor__order:focus,
.gl-seceditor__title:focus { outline: none; border-color: var(--plum); }
.gl-seceditor__del {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--rose);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.gl-seceditor__foot { padding: 14px 20px; border-top: 1px solid var(--line-soft-2); }
/* A section marked for deletion should look struck through before you save. */
.gl-seceditor:has(.gl-seceditor__del input:checked) { opacity: .45; }
.gl-seceditor:has(.gl-seceditor__del input:checked) .gl-seceditor__title { text-decoration: line-through; }
@media (max-width: 560px) {
  .gl-seceditor__head { flex-wrap: wrap; }
  .gl-seceditor__title { flex: 1 1 100%; order: -1; }
}

/* ── Add-your-own-deadline form ─────────────────────────────────────────── */
.gl-deadline-add__summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  font: 600 13.5px var(--font-ui);
  color: var(--ink);
  list-style: none;
}
.gl-deadline-add__summary::-webkit-details-marker { display: none; }
.gl-deadline-add__summary::before {
  content: "+";
  font: 500 15px var(--font-mono);
  color: var(--plum-on);
}
[open] > .gl-deadline-add__summary::before { content: "−"; }
.gl-deadline-add {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft-2);
}
.gl-deadline-add .gl-field { margin-bottom: 0; }
.gl-deadline-add input,
.gl-deadline-add select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--ink);
  font: 400 13px var(--font-ui);
}
.gl-deadline-add input:focus,
.gl-deadline-add select:focus { outline: none; border-color: var(--plum); }
.gl-deadline-add__wide { grid-column: 1 / -1; }
.gl-deadline-add__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
@media (max-width: 560px) {
  .gl-deadline-add { grid-template-columns: 1fr; }
}

/* ── Form-level error (not tied to one field) ───────────────────────────── */
.gl-formerror {
  padding: 11px 14px;
  border: 1px solid var(--rose-line);
  border-left: 3px solid var(--rose);
  border-radius: 10px;
  background: var(--rose-surface);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}
@media (max-width: 560px) {
  .gl-deadline { flex-wrap: wrap; }
  .gl-deadline__right { flex: 1 1 100%; justify-items: start; }
}
.gl-option__mark--ok { background: var(--moss-surface); color: var(--moss); }

/* Sidebar search in the reading view */
.gl-tocsearch {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card);
}
.gl-tocsearch:focus-within { border-color: var(--plum-mid); }
.gl-tocsearch svg { width: 13px; height: 13px; flex: none; color: var(--muted-light); }
.gl-tocsearch input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 12px; color: var(--ink);
}
.gl-tocsearch input::placeholder { color: var(--muted-light); }
.gl-tocsearch input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }
.gl-tocresults { display: flex; flex-direction: column; gap: 2px; }
.gl-tocresults[hidden] { display: none; }
.gl-tocresult {
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 9px; border-radius: 7px; color: var(--ink-3);
}
.gl-tocresult:hover { background: var(--fill-2); color: var(--ink); }
.gl-tocresult__t { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.gl-tocresult__s { font-size: 11px; line-height: 1.45; color: var(--muted); }
.gl-tocresults__empty { margin: 0; padding: 10px 9px; font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------- weekly score bars ------ */

.gl-weekbars {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px; align-items: end; min-height: 190px;
}
.gl-weekbar { display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; }
.gl-weekbar__pct { font-size: 12px; font-weight: 700; line-height: 1; }
.gl-weekbar__pct--good { color: var(--moss); }
.gl-weekbar__pct--mid  { color: var(--clay-text); }
.gl-weekbar__pct--weak { color: var(--rose); }
.gl-weekbar__pct--none { color: var(--muted-light); }
.gl-weekbar__track {
  flex: 1; width: 100%; min-height: 8px; border-radius: 12px;
  background: var(--fill-2); display: flex; align-items: flex-end; overflow: hidden;
}
.gl-weekbar__fill { width: 100%; border-radius: 12px; min-height: 8px; }
.gl-weekbar__fill--good { background: var(--moss); }
.gl-weekbar__fill--mid  { background: var(--clay); }
.gl-weekbar__fill--weak { background: var(--rose); }
.gl-weekbar__fill--none { background: transparent; }
.gl-weekbar__label { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }

/* --------------------------------------------------- week accordion ------- */

.gl-week {
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); overflow: hidden;
}
.gl-week__head {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  cursor: pointer; list-style: none; user-select: none;
}
.gl-week__head::-webkit-details-marker { display: none; }
.gl-week__head:hover { background: var(--paper-2); }
.gl-week__theme { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gl-week__chev {
  width: 12px; height: 12px; flex: none; color: var(--muted-light);
  transition: transform 120ms ease;
}
.gl-week[open] .gl-week__chev { transform: rotate(180deg); }
.gl-week__body { padding: 4px 16px 16px; border-top: 1px solid var(--line-soft); }
.gl-week__goals { font-size: 12.5px; }
.gl-week__goals p { margin: 0 0 6px; line-height: 1.6; }
.gl-week__goals ol, .gl-week__goals ul { margin: 4px 0 8px; padding-left: 20px; }
.gl-week__goals li { margin: 3px 0; line-height: 1.6; }

@media (max-width: 700px) {
  .gl-weekbars { min-height: 150px; gap: 5px; }
  .gl-weekbar__pct { font-size: 10px; }
  .gl-weekbar__label { font-size: 10px; }
}

/* ---------------------------------------------------- block editor -------- */

.gl-editor2 {
  position: relative;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card);
}
.gl-editor2:focus-within { border-color: var(--plum-mid); }
.gl-editor2__surface {
  min-height: 180px; padding: 16px 18px; outline: none;
  font-size: 14px; line-height: 1.75; color: var(--ink-2);
}
.gl-editor2__surface[data-placeholder]:empty::before,
.gl-editor2__surface > p:only-child:empty::before {
  content: attr(data-placeholder); color: var(--muted-light); pointer-events: none;
}
.gl-editor2__surface h2 { font-size: 20px; margin: 18px 0 8px; }
.gl-editor2__surface h3 { font-size: 15px; margin: 16px 0 6px; }
.gl-editor2__surface pre {
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 10px 12px; font-family: var(--font-mono); font-size: 12.5px;
}
.gl-editor2__surface hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.gl-editor2__surface:focus { outline: none; }

.gl-editor2__menu {
  position: absolute; z-index: 60; width: 236px; max-height: 260px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 10px 30px rgba(43, 37, 48, .16); padding: 5px;
}
.gl-editor2__menu[hidden] { display: none; }
.gl-editor2__cmd {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
}
.gl-editor2__cmd.is-active { background: var(--plum-nav); }
.gl-editor2__cmdicon {
  width: 26px; height: 24px; flex: none; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper-2); font-family: var(--font-mono);
  font-size: 10.5px; color: var(--muted);
}
.gl-editor2__cmdlabel { display: block; font-size: 12.5px; font-weight: 500; }
.gl-editor2__cmdhint { display: block; font-size: 10.5px; color: var(--muted); }

.gl-editor2__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--muted-light);
}
.gl-editor2__kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  padding: 1px 5px; border-radius: 4px; color: var(--muted);
}

/* Title field of an own summary */
.gl-notetitle {
  width: 100%; border: 0; outline: none; background: transparent;
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  letter-spacing: -.015em; color: var(--ink);
  padding: 6px 0 14px; margin: 0;
}
.gl-notetitle::placeholder { color: var(--muted-light); }

/* Own notes under an official summary */
.gl-mynotes { margin: 34px 0 26px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.gl-mynote { display: block; padding: 14px 16px; margin-bottom: 10px; }
.gl-mynote:hover { border-color: var(--line-hover); }
.gl-mynote__body { font-size: 12.5px; color: var(--ink-3); }
.gl-mynote__body p { margin: 0 0 4px; line-height: 1.6; }

/* Own explanation on a difficult topic */
.gl-topic__expl { margin: 4px 0 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.gl-topic__expl-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; font-size: 11.5px; font-weight: 600; color: var(--plum-on);
}
.gl-topic__expl-head::-webkit-details-marker { display: none; }
.gl-topic__expl[open] .gl-week__chev { transform: rotate(180deg); }
.gl-topic__expl-body { padding-top: 10px; }

/* Filter tabs on "Moeilijke onderwerpen". Segmented control rather than links,
   so the current view is obvious and each tab carries its own count. */
.gl-topicfilter {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper-2);
}
.gl-topicfilter__tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.gl-topicfilter__tab:hover { background: var(--card); color: var(--ink-2); }
.gl-topicfilter__tab.is-on {
  background: var(--card); color: var(--plum-on);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.gl-topicfilter__count {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  background: var(--line-soft); color: var(--muted);
}
.gl-topicfilter__tab.is-on .gl-topicfilter__count { background: var(--plum-soft); color: var(--plum-on); }

/* --------------------------------------------------------------- table ---- */
/* Wide content must scroll inside its own box, never the page body. */
.gl-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: 13px; background: var(--card);
}
.gl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gl-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 14px; text-align: left;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.gl-table td {
  padding: 9px 14px; vertical-align: top;
  line-height: 1.55; color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft-2);
}
.gl-table tbody tr:last-child td { border-bottom: 0; }
.gl-table tbody tr:hover td { background: var(--paper-2); }
/* A rule above the first row of each source group, instead of repeating the
   book title on every single line. */
.gl-table__groupstart td { border-top: 1px solid var(--line); }
.gl-table tbody tr:first-child.gl-table__groupstart td { border-top: 0; }
.gl-table__src { font-weight: 600; color: var(--ink); }
.gl-table .gl-chip { margin: 0 3px 3px 0; }
.gl-table tr[hidden] { display: none; }

/* ------------------------------------------------------- week overview ---- */

/* Jump strip: the whole block at a glance, horizontally scrollable on mobile. */
.gl-weekstrip {
  /* Wraps onto as many rows as it needs. A block has at most ~8 weeks, so the
     whole thing fits on screen; scrolling it hid weeks behind a gesture. */
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gl-weekstrip__item {
  flex: 1 1 130px; min-width: 118px; max-width: 220px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.gl-weekstrip__item:hover { border-color: var(--plum-mid); background: var(--paper-2); }
.gl-weekstrip__num {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--plum-on);
}
.gl-weekstrip__theme {
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-weekstrip__now {
  align-self: flex-start;
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 4px;
  background: var(--plum-soft); color: var(--plum-on);
}
.gl-weekstrip__item.is-current { border-color: var(--plum); background: var(--plum-soft); }
.gl-weekstrip__item.is-past .gl-weekstrip__theme { color: var(--muted); }

/* One collapsible card per week. */
.gl-weekcard {
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); overflow: hidden;
}
.gl-weekcard--current { border-color: var(--plum-mid); }
.gl-weekcard__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 18px; cursor: pointer; list-style: none;
  background: var(--paper-2);
}
.gl-weekcard__head::-webkit-details-marker { display: none; }
.gl-weekcard__theme { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gl-weekcard__tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.gl-weekcard__tag {
  font-size: 10px; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 5px;
  background: var(--line-soft); color: var(--muted);
}
.gl-weekcard__tag--none { font-style: italic; }
.gl-weekcard__dates { flex: none; white-space: nowrap; }
.gl-weekcard[open] .gl-week__chev { transform: rotate(180deg); }
.gl-weekcard__body { border-top: 1px solid var(--line); }
.gl-weekcard__links {
  gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft-2);
  background: var(--paper-2);
}
.gl-weekcard__section {
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft-2);
}
.gl-weekcard__section:last-child { border-bottom: 0; }
.gl-weekcard__section .rich-text img { max-width: 100%; height: auto; border-radius: 9px; }

@media (max-width: 640px) {
  .gl-weekcard__tags { display: none; }
}

/* ------------------------------------------------------------- find -------- */

/* Search-term highlight. Soft yellow for every hit, amber for the current one,
   the way an editor's find does it. The colours are set per theme rather than
   through tokens because a highlight has to stay legible against the page in
   both, and dark mode needs a much dimmer yellow.

   Named `gl-hl`, not `gl-mark`: that one is the brand logo in the sidebar,
   which draws a medical cross with ::before/::after — reusing the name stamped
   a plus sign over every highlighted word. */
.gl-hl {
  background: #fdf0a8; color: inherit;
  border-radius: 3px; padding: 0 1px;
}
.gl-hl--on {
  background: #f6b93b; color: #2b2530;
  box-shadow: 0 0 0 1px #d98d13;
}

.gl-find {
  position: fixed; top: 14px; right: 18px; z-index: 60;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.gl-find[hidden] { display: none; }
.gl-find__input {
  width: 190px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper-2); color: var(--ink);
  font-family: var(--font-ui); font-size: 12.5px;
}
.gl-find__input:focus { outline: none; border-color: var(--plum-mid); }
.gl-find__count {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  min-width: 74px; text-align: center; white-space: nowrap;
}
.gl-find__btn {
  border: 0; background: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px;
  color: var(--muted); font-size: 13px; line-height: 1;
}
.gl-find__btn:hover { background: var(--plum-soft); color: var(--plum-on); }

@media (max-width: 640px) {
  .gl-find { left: 12px; right: 12px; top: 8px; }
  .gl-find__input { flex: 1; width: auto; }
}



/* Buttons reused as filter tabs need the browser's own chrome removed. */
button.gl-topicfilter__tab {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 500;
}


/* The exam question a topic was filed from: casus, image, options and the
   official explanation, set apart from the student's own notes above it. */
.gl-topic__q {
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: 11px;
  background: var(--paper-2);
}
.gl-topic__q .gl-casus:last-child,
.gl-topic__q .gl-options:last-child,
.gl-topic__q > .rich-text:last-child { margin-bottom: 0; }
.gl-topic__q img { max-width: 100%; height: auto; }

/* Collapsed "Jouw uitleg" is a single line; the editor only grows once opened. */
.gl-topic__expl:not([open]) .gl-topic__expl-body { display: none; }
.gl-topic__expl[open] .gl-editor2__surface { min-height: 150px; }


/* Saved conversations in the chat sidebar */
.gl-chat__aside { display: flex; flex-direction: column; overflow-y: auto; }
.gl-chat__list { overflow-y: auto; }
.gl-chat__row {
  display: flex; align-items: center; gap: 2px;
  border-radius: 7px; position: relative;
}
.gl-chat__row:hover { background: var(--fill-2); }
.gl-chat__row--on { background: var(--selected); }
.gl-chat__item {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
  padding: 7px 4px 7px 9px; border-radius: 7px; color: var(--ink-3);
}
.gl-chat__row:hover .gl-chat__item,
.gl-chat__row--on .gl-chat__item { color: var(--ink); }
.gl-chat__item-t { flex: 1; min-width: 0; font-size: 12.5px; }
.gl-chat__pin { flex: none; display: inline-flex; color: var(--muted-light); }
.gl-chat__pin[hidden] { display: none; }
.gl-chat__pin svg { width: 11px; height: 11px; }
.gl-chat__more {
  flex: none; width: 24px; height: 24px; margin-right: 4px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--muted-light); cursor: pointer; opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.gl-chat__more svg { width: 14px; height: 14px; }
.gl-chat__row:hover .gl-chat__more,
.gl-chat__row--on .gl-chat__more,
.gl-chat__more[aria-expanded="true"] { opacity: 1; }
.gl-chat__more:hover { background: var(--fill); color: var(--ink-3); }

/* Shared floating context menu */
.gl-ctxmenu {
  position: fixed; z-index: 130; min-width: 186px; padding: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 10px 32px rgba(43, 37, 48, .18);
}
.gl-ctxmenu[hidden] { display: none; }
.gl-ctxmenu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
  font-family: inherit; font-size: 12.5px; color: var(--ink-2);
  cursor: pointer; text-align: left;
}
.gl-ctxmenu__item:hover { background: var(--fill); color: var(--ink); }
.gl-ctxmenu__item svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.gl-ctxmenu__item:hover svg { color: var(--ink-3); }
.gl-ctxmenu__item--danger { color: var(--rose); }
.gl-ctxmenu__item--danger svg { color: var(--rose); }
.gl-ctxmenu__item--danger:hover { background: var(--rose-surface); color: var(--rose); }
.gl-ctxmenu__sep { height: 1px; background: var(--line-soft); margin: 4px 0; }

/* Own notes in the reading sidebar */
.gl-toc__item--mine { display: flex; align-items: baseline; gap: 6px; }
.gl-toc__mine {
  flex: none; font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--plum-on); background: var(--plum-soft);
  padding: 1px 4px; border-radius: 3px;
}
.gl-toc__add {
  display: block; padding: 5px 9px; border-radius: 6px;
  font-size: 11px; color: var(--muted-light);
}
.gl-toc__add:hover { background: var(--fill-2); color: var(--plum-on); }

/* Quiet autosave indicator */
.gl-savestate { font-size: 11px; color: var(--muted-light); transition: color 120ms ease; }
.gl-savestate.is-saving { color: var(--muted); }
.gl-savestate.is-saved { color: var(--moss); }
.gl-savestate.is-error { color: var(--rose); }

/* ------------------------------------------------ full-page note editor ---- */

.gl-notepage {
  max-width: 780px; margin: 0 auto;
  padding: 26px 28px 40vh;   /* deep bottom pad so the caret is never at the edge */
}
.gl-notepage__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; min-height: 26px;
}
.gl-notepage__more {
  width: 26px; height: 26px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--muted-light); cursor: pointer;
}
.gl-notepage__more:hover { background: var(--fill); color: var(--ink-3); }
.gl-notepage__more svg { width: 15px; height: 15px; }

/* On this page the editor is the page: no border, no card, no visible box. */
.gl-editor2--page { border: 0; background: transparent; border-radius: 0; }
.gl-editor2--page:focus-within { border: 0; }
.gl-editor2--page .gl-editor2__surface {
  padding: 0; min-height: 60vh; font-size: 15px; line-height: 1.8;
}
.gl-editor2--page .gl-editor2__surface h2 { font-size: 24px; }
.gl-editor2--page .gl-editor2__surface h3 { font-size: 18px; }

/* Placeholder on the empty document */
.gl-editor2__surface > p:only-child:empty::before,
.gl-editor2__surface > p:only-child > br:only-child::before {
  content: attr(data-ph); color: var(--muted-light);
}

/* Pinned / recent grouping in the chat sidebar */
.gl-chat__lists { overflow-y: auto; flex: 1; min-height: 0; }
.gl-chat__group[hidden] { display: none; }
.gl-chat__grouplabel { margin: 0 0 6px 6px; }
.gl-chat__group + .gl-chat__group { margin-top: 14px; }
/* A pinned conversation reads as pinned at a glance, not just by position. */
.gl-chat__pin { color: var(--plum-on); }
.gl-chat__pin svg { width: 12px; height: 12px; }
.gl-chat__row[data-pinned="1"] .gl-chat__item-t { font-weight: 500; }

/* Inline rename field, sized to the row it replaces */
.gl-chat__rename {
  flex: 1; min-width: 0; width: 100%;
  font-family: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--plum-mid);
  border-radius: 6px; padding: 3px 6px; outline: none;
}

/* ------------------------------------------------------- aantekeningen ---- */

.gl-suggest {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  padding: 14px 16px; border: 1px solid var(--plum-tint-line);
  background: var(--plum-tint); border-radius: 13px; color: var(--ink);
  transition: border-color 120ms ease;
}
.gl-suggest:hover { border-color: var(--plum-mid); color: var(--ink); }
.gl-suggest__icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--plum-on);
}
.gl-suggest__icon svg { width: 17px; height: 17px; }
.gl-suggest__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gl-suggest__label {
  font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--plum-on);
}
.gl-suggest__title { font-size: 14px; font-weight: 600; }
.gl-suggest__meta { font-size: 11.5px; color: var(--plum-body); }
.gl-suggest__cta { flex: none; font-size: 12px; font-weight: 500; color: var(--plum-on); }

.gl-notecard { display: flex; flex-direction: column; gap: 6px; min-height: 148px; padding: 16px; }
.gl-notecard:hover { border-color: var(--line-hover); }
.gl-notecard__title {
  margin: 0; font-family: var(--font-display); font-size: 16.5px;
  font-weight: 500; line-height: 1.25; color: var(--ink);
}
.gl-notecard__body { flex: 1; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.gl-notecard__date { margin: 0; }

@media (max-width: 700px) {
  .gl-suggest { flex-wrap: wrap; }
  .gl-suggest__cta { width: 100%; }
}

/* --------------------------------------------- selectable note cards ------ */

.gl-notewrap { position: relative; }

.gl-notecheck {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 22px; height: 22px; cursor: pointer;
  opacity: 0; transition: opacity 120ms ease;
}
.gl-notewrap:hover .gl-notecheck,
.gl-notewrap.is-selected .gl-notecheck,
.is-selecting .gl-notecheck { opacity: 1; }
.gl-notecheck input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.gl-notecheck__box {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--card);
  color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.gl-notecheck__box svg { width: 12px; height: 12px; }
.gl-notecheck:hover .gl-notecheck__box { border-color: var(--line-hover); }
.gl-notecheck input:checked + .gl-notecheck__box {
  background: var(--plum); border-color: var(--plum); color: #fff;
}
.gl-notecheck input:focus-visible + .gl-notecheck__box {
  box-shadow: 0 0 0 3px rgba(109, 63, 107, .18);
}
.gl-notewrap.is-selected .gl-notecard {
  border-color: var(--plum-tint-line); background: var(--plum-tint);
}

/* Selection action bar */
.gl-selbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 9px 12px; border: 1px solid var(--plum-tint-line);
  background: var(--plum-tint); border-radius: 11px;
  position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 15;
}
.gl-selbar[hidden] { display: none; }
.gl-selbar__all {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-3); cursor: pointer;
}
.gl-selbar__count { font-size: 12px; font-weight: 600; color: var(--plum-on); }


/* Find highlights in dark mode: dim the yellow right down so it reads as a
   highlight rather than a flashlight. Declared after the theme blocks because
   these are literal colours, not tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gl-hl { background: #6b5d1f; color: #f2eddc; }
  :root:not([data-theme="light"]) .gl-hl--on { background: #b8860b; color: #1e1e1e; box-shadow: 0 0 0 1px #d9a520; }
}
:root[data-theme="dark"] .gl-hl { background: #6b5d1f; color: #f2eddc; }
:root[data-theme="dark"] .gl-hl--on { background: #b8860b; color: #1e1e1e; box-shadow: 0 0 0 1px #d9a520; }


/* -------------------------------------------- wat kan je verwachten ------- */

.gl-expect__summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.gl-expect__summary > div {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--card);
}
.gl-expect__num {
  margin: 0; font-family: var(--font-display); font-size: 26px;
  line-height: 1; font-weight: 500; color: var(--plum);
}
.gl-expect__num--clay { color: var(--clay-text); }
.gl-expect__num--moss { color: var(--moss); }
.gl-expect__lbl { margin: 4px 0 0; font-size: 11px; color: var(--muted); }

.gl-expect__addhead {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
}
.gl-expect__addhead::-webkit-details-marker { display: none; }
details[open] > .gl-expect__addhead .gl-week__chev { transform: rotate(180deg); }

.gl-expect {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
}
.gl-expect--done { background: var(--paper-2); border-color: var(--line-soft); }
.gl-expect--done .gl-expect__topic { color: var(--muted); text-decoration: line-through; }

.gl-expect__check { flex: none; margin: 1px 0 0; }
.gl-expect__box {
  width: 19px; height: 19px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--line-strong, var(--line));
  background: var(--paper-2); color: transparent;
  font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.gl-expect__box:hover { border-color: var(--plum-mid); }
.gl-expect__box.is-on {
  background: var(--moss); border-color: var(--moss); color: #fff;
}

.gl-expect__body { flex: 1; min-width: 0; }
.gl-expect__topic { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gl-expect__notes { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.gl-expect__notes p { margin: 0 0 6px; }
.gl-expect__meta { margin: 6px 0 0; font-size: 11px; color: var(--muted-light); }

.gl-expect__side {
  flex: none; display: flex; align-items: center; gap: 8px;
}
.gl-expect__del {
  border: 0; background: none; cursor: pointer;
  color: var(--muted-light); font-size: 17px; line-height: 1;
  width: 22px; height: 22px; border-radius: 6px;
}
.gl-expect__del:hover { background: var(--rose-surface); color: var(--rose); }

@media (max-width: 640px) {
  .gl-expect__summary { grid-template-columns: 1fr; }
  .gl-expect__side { flex-direction: column-reverse; align-items: flex-end; }
}


/* ------------------------------------------------- admin editor pages ----- */
/* Used by the rewritten summary editor; generic enough for any admin form. */

.gl-editor-page { max-width: 860px; margin: 0 auto; }
.gl-editor-page__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.gl-editor-page__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.gl-backlink {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--plum-on); text-decoration: none;
}
.gl-backlink svg { width: 13px; height: 13px; }
.gl-backlink:hover { text-decoration: underline; }

.gl-req { color: var(--rose); }

.gl-autobadge {
  margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  background: var(--plum-soft); color: var(--plum-on);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.gl-autobadge[hidden] { display: none; }

.gl-input--mono { font-family: var(--font-mono); font-size: 12.5px; }

.gl-alert {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper-2); color: var(--ink-2);
  font-size: 12.5px; line-height: 1.6; margin-bottom: 14px;
}
.gl-alert--error {
  border-color: var(--rose-line); background: var(--rose-surface); color: var(--rose);
}

/* Checkbox picker — replaces `<select multiple>`, which needs Ctrl-clicking
   and silently drops the whole selection on a plain click. */
.gl-checkgrid {
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper-2); padding: 10px;
}
.gl-checkgrid__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
}
.gl-checkgrid__count {
  min-width: 20px; padding: 1px 5px; border-radius: 5px; text-align: center;
  background: var(--line-soft); color: var(--muted);
  font-family: var(--font-mono); font-size: 10px;
}
.gl-checkgrid__count.is-on { background: var(--plum-soft); color: var(--plum-on); }
.gl-checkgrid__filter { margin-bottom: 7px; font-size: 12px; padding: 5px 8px; }
.gl-checkgrid__list { max-height: 210px; overflow-y: auto; }
.gl-checkgrid__list ul { margin: 0; padding: 0; list-style: none; }
.gl-checkgrid__list li { margin: 0; }
.gl-checkgrid__list li[hidden] { display: none; }
.gl-checkgrid__list label {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 4px 5px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
.gl-checkgrid__list label:hover { background: var(--fill); }
.gl-checkgrid__list input { margin-top: 2px; flex: none; accent-color: var(--plum); }
.gl-checkgrid__empty { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-light); }

/* Published toggle */
.gl-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.gl-switch input { width: 17px; height: 17px; accent-color: var(--plum); flex: none; }
.gl-switch strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.gl-switch em { display: block; font-size: 11px; font-style: normal; color: var(--muted); }

/* One section of a summary, listed under the metadata form. */
.gl-sectionrow {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft-2);
}
.gl-sectionrow:last-child { border-bottom: 0; }
.gl-sectionrow:hover { background: var(--paper-2); }
.gl-sectionrow__order {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--plum-soft); color: var(--plum-on);
  font-family: var(--font-mono); font-size: 10.5px;
}
.gl-sectionrow__body { flex: 1; min-width: 0; }
.gl-sectionrow__title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.gl-sectionrow__excerpt {
  margin: 3px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted);
}

@media (max-width: 720px) {
  .gl-editor-page__footer { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------ AI drawer --- */
/* The tutor as a panel beside the question instead of a new tab: you keep the
   question, your answer and the explanation in view while you ask about them.
   The full chat page is still one click away from its header. */

.gl-aiside {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: 420px;
  max-width: 100vw; z-index: 90;
  display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: -12px 0 34px rgba(43, 37, 48, .10);
  transform: translateX(100%); transition: transform 220ms ease;
}
.gl-aiside--open { transform: translateX(0); }
.gl-aiside[hidden] { display: none; }

.gl-aiside__head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.gl-aiside__t {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink);
}
.gl-aiside__icon {
  flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.gl-aiside__icon:hover {
  background: var(--plum-soft); border-color: var(--plum-tint-line); color: var(--plum-on);
}
.gl-aiside__icon:focus-visible { outline: 2px solid var(--plum-mid); outline-offset: 2px; }
.gl-aiside__icon svg { width: 15px; height: 15px; }

.gl-aiside__scroll { flex: 1; overflow-y: auto; padding: 18px 16px; }
.gl-aiside__scroll .gl-chat__thread { max-width: none; gap: 16px; }
.gl-aiside__scroll .gl-bubble { max-width: 100%; font-size: 13px; }
.gl-aiside .gl-composer { padding: 12px 14px 14px; }
.gl-aiside .gl-composer__inner { max-width: none; }

/* Quick openers for the question the chat is about. These are buttons, not the
   badges `gl-pill` is normally used for, so they carry their own hover state —
   without it nothing tells you they can be clicked. */
.gl-aiside__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gl-aiside__chip {
  display: inline-flex; align-items: center; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 500; text-align: left;
  padding: 5px 11px; border-radius: 9999px;
  background: var(--card); color: var(--ink-3); border: 1px solid var(--line);
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.gl-aiside__chip:hover {
  background: var(--plum-soft); color: var(--plum-on); border-color: var(--plum-tint-line);
}
.gl-aiside__chip:active { background: var(--selected); }
.gl-aiside__chip:focus-visible { outline: 2px solid var(--plum-mid); outline-offset: 2px; }

/* With the drawer open the page gives up the width instead of hiding under it,
   so the question, the explanation and the footer buttons all stay reachable. */
body.gl-has-aiside .gl-main { padding-right: 420px; transition: padding-right 220ms ease; }

/* On a phone the drawer is the page; on a wide screen the question stays put. */
@media (max-width: 880px) {
  .gl-aiside { top: 0; width: 100%; }
  .gl-aiside__head { padding-top: 14px; }
  body.gl-has-aiside .gl-main { padding-right: 0; }
}