/* Formation Manda · design system and layout (docs/DESIGN.md). Print rules live in print.css, the
   learner screens in learner.css. Every colour comes from the tokens below; the dark theme follows the
   system setting or the viewer's choice. */

/* ---------- Tokens ---------- */

:root {
  /* Brand: a violet, for fills, active states and links. */
  --color-brand: #7c5bc5;
  --color-brand-strong: #5e42a0;
  --color-brand-text: var(--color-brand-strong);
  --color-brand-soft: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface));
  --color-brand-ring: color-mix(in srgb, var(--color-brand) 35%, transparent);
  --color-on-brand: #ffffff;
  --color-sheen: #ffffff;          /* the light reflected on coloured fills (hero, badges) */

  /* Neutrals */
  --color-canvas: #f3f2f5;        /* background of the admin screens and the sign-in page */
  --color-surface: #ffffff;       /* pages, cards, header */
  --color-surface-soft: #fafafb;  /* table headers, quiet fills */
  --color-ink: #1f1c25;           /* titles, strong text */
  --color-text: #3c3844;          /* body text */
  --color-muted: #6b6773;         /* secondary text (AA on every surface) */
  --color-border: #e9e7ec;
  --color-border-strong: #dbd8e0; /* fields, dividers */
  --color-input: #f8f7fa;
  --color-hover: #f9f8fb;

  /* Status: a fill and its soft background; "-text" is the shade for words on any surface. */
  --color-info: #3b7ac0;     --color-info-soft: #e6eefb;     --color-info-text: #2f6aa8;
  --color-success: #3c8f5b;  --color-success-soft: #e4f2ea;  --color-success-text: #2e7049;
  --color-warning: #b9802b;  --color-warning-soft: #f6ecd8;  --color-warning-text: #84591a;
  --color-danger: #c0493f;   --color-danger-soft: #f7e7e5;   --color-danger-text: #b1433a;
  --color-tooltip: #1f1c25;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Varela Round", var(--font);
  --leading: 1.5;

  --radius-sm: 4px;
  --radius: 5px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(30, 20, 45, .05);
  --shadow-md: 0 1px 2px rgba(30, 20, 45, .05), 0 8px 22px rgba(30, 20, 45, .045);
  --shadow-lg: 0 8px 40px rgba(30, 20, 45, .14);

  --gutter: 16px;
  --header-height: 64px;
  color-scheme: light;
}

/* Dark theme, on screen only (paper stays light): the system setting, unless the viewer forced the light
   theme; or forced (data-theme on <html>, see ApplicationController#current_theme). CSS cannot join a
   media query and an attribute in one selector: the dark palette is written once below, as --dark-*
   variables, and both blocks only point to it (a test checks they stay identical). */
:root {
  --dark-color-brand-text: color-mix(in srgb, var(--color-brand) 52%, #ffffff);
  --dark-color-brand-soft: color-mix(in srgb, var(--color-brand) 22%, var(--color-surface));
  --dark-color-canvas: #131116;
  --dark-color-surface: #1c1a21;
  --dark-color-surface-soft: #19171e;
  --dark-color-ink: #f4f3f7;
  --dark-color-text: #e0dde5;
  --dark-color-muted: #9f9ba7;
  --dark-color-border: #2a2731;
  --dark-color-border-strong: #37333e;
  --dark-color-input: #17151b;
  --dark-color-hover: #221f27;
  --dark-color-info-soft: #1e2f38;
  --dark-color-info-text: #8db7e6;
  --dark-color-success-soft: #16291d;
  --dark-color-success-text: #7cc497;
  --dark-color-warning-soft: #2e2616;
  --dark-color-warning-text: #e0b46c;
  --dark-color-danger-soft: #311c1a;
  --dark-color-danger-text: #cf756d;
  --dark-color-tooltip: #2e2a35;
  --dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --dark-shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
  --dark-shadow-lg: 0 12px 48px rgba(0, 0, 0, .5);
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand-text: var(--dark-color-brand-text);
    --color-brand-soft: var(--dark-color-brand-soft);
    --color-canvas: var(--dark-color-canvas);
    --color-surface: var(--dark-color-surface);
    --color-surface-soft: var(--dark-color-surface-soft);
    --color-ink: var(--dark-color-ink);
    --color-text: var(--dark-color-text);
    --color-muted: var(--dark-color-muted);
    --color-border: var(--dark-color-border);
    --color-border-strong: var(--dark-color-border-strong);
    --color-input: var(--dark-color-input);
    --color-hover: var(--dark-color-hover);
    --color-info-soft: var(--dark-color-info-soft);
    --color-info-text: var(--dark-color-info-text);
    --color-success-soft: var(--dark-color-success-soft);
    --color-success-text: var(--dark-color-success-text);
    --color-warning-soft: var(--dark-color-warning-soft);
    --color-warning-text: var(--dark-color-warning-text);
    --color-danger-soft: var(--dark-color-danger-soft);
    --color-danger-text: var(--dark-color-danger-text);
    --color-tooltip: var(--dark-color-tooltip);
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --shadow-lg: var(--dark-shadow-lg);
    color-scheme: dark;
  }
}

@media screen {
  :root[data-theme="dark"] {
    --color-brand-text: var(--dark-color-brand-text);
    --color-brand-soft: var(--dark-color-brand-soft);
    --color-canvas: var(--dark-color-canvas);
    --color-surface: var(--dark-color-surface);
    --color-surface-soft: var(--dark-color-surface-soft);
    --color-ink: var(--dark-color-ink);
    --color-text: var(--dark-color-text);
    --color-muted: var(--dark-color-muted);
    --color-border: var(--dark-color-border);
    --color-border-strong: var(--dark-color-border-strong);
    --color-input: var(--dark-color-input);
    --color-hover: var(--dark-color-hover);
    --color-info-soft: var(--dark-color-info-soft);
    --color-info-text: var(--dark-color-info-text);
    --color-success-soft: var(--dark-color-success-soft);
    --color-success-text: var(--dark-color-success-text);
    --color-warning-soft: var(--dark-color-warning-soft);
    --color-warning-text: var(--dark-color-warning-text);
    --color-danger-soft: var(--dark-color-danger-soft);
    --color-danger-text: var(--dark-color-danger-text);
    --color-tooltip: var(--dark-color-tooltip);
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --shadow-lg: var(--dark-shadow-lg);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 16px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-surface);
}

img { max-width: 100%; height: auto; }

/* Hidden means hidden, whatever display a component sets. */
[hidden] { display: none !important; }

a { color: var(--color-brand-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--color-brand-ring); outline-offset: 2px; }

h1, h2, h3, h4 { line-height: 1.25; margin: 1.6em 0 0.6em; color: var(--color-ink); }
h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-top: 0.4em; }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; font-weight: 600; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-surface); padding: 8px 12px; z-index: 30; }
.skip-link:focus { left: 8px; }

/* Every screen uses the full width of the window. */
.container, .container-wide { padding: 24px var(--gutter) 64px; }
@media (min-width: 861px) { :root { --gutter: 32px; } }

.muted { color: var(--color-muted); }
.small { font-size: 0.875rem; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.75rem; font-weight: 700; color: var(--color-muted); }

/* ---------- Logo, menu button, search ---------- */

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); text-decoration: none; margin: 0; }
.logo::before {
  content: "M"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--color-brand); color: var(--color-on-brand); font: 700 1.15rem/1 var(--font-display);
}
.logo-brand { font: 700 1.2rem/1 var(--font-display); }
.logo-script { font: 400 1.2rem/1 var(--font-display); color: var(--color-brand-text); }
.logo-dark { color: var(--color-ink); }

.menu-toggle {
  display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
@media (max-width: 860px) { .menu-toggle { display: inline-flex; } }

.nav-search { position: relative; display: flex; align-items: center; }
.nav-search .icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--color-muted); pointer-events: none; }
.nav-search input[type="search"] {
  height: 38px; min-height: 38px; width: 100%; padding: 0 12px 0 36px; border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); background: var(--color-surface-soft); color: var(--color-text); font: inherit; font-size: 0.875rem;
  text-overflow: ellipsis; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.nav-search input[type="search"]:hover { border-color: var(--color-border-strong); }
.nav-search input[type="search"]:focus { background: var(--color-surface); }
.nav-search input::placeholder { color: var(--color-muted); }

/* ---------- Messages ---------- */

.flash {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 20px;
  border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.9rem; font-weight: 500; color: var(--color-ink);
}
.flash .icon { width: 19px; height: 19px; margin-top: 1px; }
.flash-notice { background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.flash-notice .icon { color: var(--color-success); }
.flash-alert { background: var(--color-danger-soft); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
.flash-alert .icon { color: var(--color-danger-text); }

/* ---------- Buttons ---------- */

.button, .button-secondary, .button-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: var(--radius);
  font: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--color-brand); color: var(--color-on-brand); border: 1px solid transparent; box-shadow: var(--shadow-sm);
  transition: filter .12s ease, box-shadow .12s ease;
}
.button:hover:not([disabled]) { filter: brightness(1.06); color: var(--color-on-brand); }
.button-secondary, .button.button-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); box-shadow: none; }
.button-secondary:hover:not([disabled]), .button.button-secondary:hover:not([disabled]) { filter: none; border-color: var(--color-muted); color: var(--color-text); }
.button-danger, .button.button-danger { background: transparent; color: var(--color-danger-text); border-color: transparent; box-shadow: none; }
.button-danger:hover:not([disabled]), .button.button-danger:hover:not([disabled]) { filter: none; background: var(--color-danger-soft); color: var(--color-danger-text); }
.button-small { min-height: 34px; padding: 0 13px; font-size: 0.8125rem; }
.button-block { width: 100%; }
.button[disabled], .button-secondary[disabled] { opacity: .5; cursor: not-allowed; }
.button-light { background: var(--color-surface); color: var(--color-ink); box-shadow: none; }
.button-light:hover:not([disabled]) { filter: none; background: var(--color-brand-soft); color: var(--color-ink); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0; }
.button-row form { margin: 0; }

/* ---------- Forms ---------- */

.form { max-width: none; }
.field { margin-bottom: 20px; }
.field label, .field .label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); margin-bottom: 8px; }
.field .hint { font-size: 0.8125rem; color: var(--color-muted); margin: 8px 0 0; }
/* A required field: its label carries an asterisk, read from the control itself. */
.field label:has(+ :is(input, select, textarea)[required])::after { content: " *"; color: var(--color-danger-text); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%; min-height: 42px; padding: 8px 13px; font: inherit; font-size: 0.9rem; color: var(--color-text);
  background: var(--color-input); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  transition: box-shadow .12s ease;
}
:is(input, select, textarea):focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-ring); }
::placeholder { color: var(--color-muted); }
select {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23879088' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
textarea { min-height: 120px; line-height: var(--leading); }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; min-height: 320px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-brand); }
.field-inline { display: flex; gap: 10px; align-items: center; }
.field-inline input[type="checkbox"], .field-inline input[type="radio"] { width: 18px; height: 18px; }
.track-access { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.track-access .field-inline { font-size: 0.875rem; font-weight: 500; color: var(--color-text); margin-bottom: 6px; }
.track-access-list { border: 0; margin: 4px 0 0 28px; padding: 0; min-width: 0; }
.track-access-list:disabled { opacity: .45; }
.form-errors {
  padding: 14px 16px; margin-bottom: 20px; border-radius: var(--radius); font-size: 0.9rem; color: var(--color-ink);
  background: var(--color-danger-soft); border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}
.form-errors ul { margin: 6px 0 0; padding-left: 20px; color: var(--color-text); }
.field_with_errors { display: contents; }
.field_with_errors :is(input, textarea, select) { border-color: var(--color-danger); }

/* ---------- Page structure ---------- */

.page-head { margin-bottom: 24px; }
.page-head h1 { margin-bottom: 8px; }
.breadcrumb { font-size: 0.8125rem; color: var(--color-muted); margin: 0 0 6px; }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-brand-text); }

.track-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface-soft); color: var(--color-muted);
  text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.chip:hover { color: var(--color-ink); }
.chip.is-active { background: var(--color-brand-soft); border-color: transparent; color: var(--color-brand-text); }

.empty-state { background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; }
.empty-state h2 { margin-top: 0; font-size: 1rem; }

.progress-bar { height: 8px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin-bottom: 28px; }
.progress-bar span { display: block; height: 100%; background: var(--color-brand); border-radius: 999px; }

.track-about { margin-top: 32px; border-top: 1px solid var(--color-border); padding-top: 16px; }
.track-about summary { cursor: pointer; font-weight: 600; color: var(--color-ink); min-height: 44px; display: flex; align-items: center; }

.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 24px; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: var(--shadow-md); }
.card h2, .card h3 { margin: 0 0 6px; font-size: 1rem; }

/* ---------- Content (Markdown) ---------- */

.prose { color: var(--color-text); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose li { margin-bottom: 0.3em; }
.prose strong { color: var(--color-ink); }
.prose blockquote {
  margin: 1.2em 0; padding: 14px 18px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-border-strong);
  background: var(--color-surface-soft); border-radius: var(--radius);
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose code { background: var(--color-surface-soft); border: 1px solid var(--color-border); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 0.9em; }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: 2em 0; }

.callout-title { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; color: var(--color-ink); }
.prose .callout-retenir { background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); border-left-color: var(--color-success); }
.prose .callout-attention { background: var(--color-warning-soft); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); border-left-color: var(--color-warning); }
.prose .callout-mandy { background: var(--color-info-soft); border-color: color-mix(in srgb, var(--color-info) 30%, transparent); border-left-color: var(--color-info); }

.table-scroll { overflow-x: auto; margin: 1.2em 0; max-width: 100%; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { border-bottom: 1px solid var(--color-border); padding: 12px 16px; text-align: left; vertical-align: top; }
th { background: var(--color-surface-soft); font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; color: var(--color-muted); }
tbody tr:last-child td { border-bottom: 0; }
td + td, th + th { border-left: 1px solid var(--color-border); }
.data-table td + td, .data-table th + th { border-left: 0; }
.data-table tbody tr:hover td { background: var(--color-hover); }

abbr.term { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; position: relative; }
.term-popup {
  position: absolute; z-index: 20; max-width: min(320px, calc(100vw - 32px)); padding: 10px 12px;
  background: var(--color-tooltip); color: #fff; border-radius: var(--radius); font-size: 0.85rem; line-height: 1.45;
  box-shadow: var(--shadow-lg);
}

.mandy-link { font-weight: 600; }
.mandy-open { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
.mandy-open-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; }
.mandy-open input { width: 9em; min-height: 34px; }
.content-missing, .mandy-invalid { color: var(--color-danger-text); font-style: italic; }

.content-image { margin: 1.4em 0; }
.content-image img { border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.content-image figcaption, .wireframe figcaption { font-size: 0.85rem; color: var(--color-muted); margin-top: 6px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wireframe { margin: 1.4em 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px; }
.wireframe-stage img { display: block; margin: 0 auto; }
.wireframe-stage img[hidden] { display: none; }
.wireframe-controls { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }

/* ---------- Quiz ---------- */

.question-list { list-style: none; padding: 0; margin: 0; counter-reset: question; }
.question-number { margin: 0 0 4px; font-size: 0.8125rem; color: var(--color-muted); }
.question-prompt { font-weight: 600; color: var(--color-ink); margin-bottom: 12px; }
.question-prompt .prose p:last-child { margin-bottom: 0; }
.question fieldset { border: 0; padding: 0; margin: 0; }
.number-input { display: flex; gap: 8px; align-items: center; max-width: 320px; }
.number-input .unit { font-weight: 600; }

.feedback { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid transparent; }
.feedback-correct { background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.feedback-wrong { background: var(--color-danger-soft); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
.feedback-neutral { background: var(--color-surface-soft); border-color: var(--color-border); }
.feedback-title { font-weight: 700; margin: 0 0 4px; }
.feedback-correct .feedback-title { color: var(--color-success-text); }
.feedback-wrong .feedback-title { color: var(--color-danger-text); }
.feedback .prose { color: var(--color-text); }
.feedback p { margin: 0 0 6px; }
.saved-hint { font-size: 0.8125rem; color: var(--color-success-text); margin: 8px 0 0; }

.result-banner { padding: 18px 22px; border-radius: var(--radius-lg); margin: 0 0 24px; border: 1px solid transparent; }
.result-banner h2 { margin: 0 0 6px; }
.result-passed { background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.result-passed h2 { color: var(--color-success-text); }
.result-failed { background: var(--color-warning-soft); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.result-failed h2 { color: var(--color-warning-text); }
.result-banner .button-row { margin-bottom: 0; }

.history { margin-top: 32px; }

/* ---------- Templates, glossary, search ---------- */

.template { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.template h3 { margin-top: 0; }
.template-preview { background: var(--color-surface-soft); border: 1px solid var(--color-border); padding: 14px 16px; border-radius: var(--radius); }
.template-slot { background: var(--color-warning-soft); color: var(--color-warning-text); font-weight: 600; padding: 0 4px; border-radius: var(--radius-sm); }
.copy-status { font-size: 0.875rem; color: var(--color-success-text); }

.glossary dt { font-weight: 600; color: var(--color-ink); margin-top: 18px; font-size: 1rem; }
.glossary dd { margin: 4px 0 0; }
.glossary .aliases { font-size: 0.875rem; color: var(--color-muted); }
.letter-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.letter-nav a {
  min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface);
  color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 0.875rem;
}
.letter-nav a:hover { border-color: var(--color-brand); color: var(--color-brand-text); }

.search-form { display: flex; gap: 12px; margin-bottom: 24px; }
.search-results { list-style: none; padding: 0; }
.search-results li { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.search-results h2 { font-size: 1.05rem; margin: 0 0 4px; }
.search-results .kind { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted); }
.search-results p { margin: 4px 0 0; }
mark { background: var(--color-warning-soft); color: inherit; padding: 0 2px; border-radius: 2px; }

.callout-title::before { margin-right: 6px; }
.callout-retenir .callout-title::before { content: "✓"; color: var(--color-success-text); }
.callout-attention .callout-title::before { content: "⚠"; color: var(--color-warning-text); }
.callout-mandy .callout-title::before { content: "↗"; color: var(--color-info-text); }

/* ---------- Progress and celebrations ---------- */

.progress-ring {
  --size: 52px;
  --percent: 0;
  flex: none; width: var(--size); height: var(--size); border-radius: 50%;
  display: inline-grid; place-items: center;
  background: conic-gradient(var(--color-brand) calc(var(--percent) * 1%), var(--color-border) 0);
  position: relative; font-size: 0.75rem; font-weight: 700; color: var(--color-ink);
}
.progress-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--color-surface); }
.progress-ring > span { position: relative; }
.progress-ring-large { --size: 88px; font-size: 1.05rem; }
.progress-ring-large::before { inset: 9px; }
.progress-ring.is-complete { background: var(--color-brand); }
.progress-ring.is-complete::before { background: var(--color-brand-soft); }
.progress-ring.is-complete > span { color: var(--color-brand-text); font-size: 1.3em; }


.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.confetti span {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: 0.9;
  animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--drift), 105vh) rotate(540deg); opacity: 0.6; }
}

/* ---------- Sign in ---------- */

.sign-in-page { background: var(--color-canvas); }
.sign-in {
  max-width: 420px; margin: 8vh auto; padding: 32px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.sign-in h1 { font-size: 1.4rem; }
@media (max-width: 480px) { .sign-in { margin: 0; border: 0; border-radius: 0; min-height: 100vh; } }

/* ---------- Admin: common to both layouts ---------- */

.admin-page { font-size: 0.875rem; }
.admin-page h1 { font-size: 1.55rem; }
.admin-page h2 { font-size: 1.05rem; }
.admin-page :is(.button, .button-secondary, .button-danger) { min-height: 34px; padding: 0 13px; font-size: 0.8125rem; }
.admin-page .button-small { min-height: 30px; padding: 0 10px; font-size: 0.78rem; }
.admin-page .prose { font-size: 1rem; }

.admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.admin-toolbar h1 { margin: 0; }
.admin-toolbar h2 { margin: 0; }
.filter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.filter-form .field { margin: 0; min-width: 200px; }
.data-table td.actions { white-space: nowrap; text-align: right; }
.data-table td.actions form { display: inline; }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-off { color: var(--color-danger-text); font-weight: 600; }
.form-wide { max-width: none; }
.admin-page .track-switcher { margin-bottom: 16px; }
.admin-section { margin-bottom: 32px; }
.form-grid { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: none; }

.stat-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 20px; min-width: 180px; box-shadow: var(--shadow-sm); color: var(--color-muted); }
.stat strong { display: block; font-size: 1.75rem; letter-spacing: -.02em; color: var(--color-ink); }

.upload-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.upload-grid figure { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px; }
.upload-grid img { display: block; max-height: 140px; margin: 0 auto 8px; object-fit: contain; }
.upload-grid code { font-size: 0.8rem; }

.syntax-help { font-size: 0.85rem; margin: 8px 0 16px; }
.syntax-help summary { cursor: pointer; font-weight: 600; color: var(--color-ink); }
.syntax-help code { background: var(--color-surface-soft); border: 1px solid var(--color-border); padding: 1px 4px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.choice-rows { display: grid; gap: 8px; margin-bottom: 8px; }
.choice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.choice-row label { font-weight: 400; display: inline-flex; gap: 6px; align-items: center; margin: 0; white-space: nowrap; }

/* Lists of cards: chapters and quiz questions (drag and drop), the recap and the quiz of a module. */
.list-cards { list-style: none; margin: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.list-cards + .list-cards { margin-top: 12px; }
.list-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.list-card:first-child { border-top: 0; }
.list-card:hover { background: var(--color-hover); }
.list-card-body { min-width: 0; flex: 1; }
.list-card-title { font-weight: 600; color: var(--color-ink); text-decoration: none; }
.list-card:hover .list-card-title { color: var(--color-brand-text); }
.list-card-title::after { content: ""; position: absolute; inset: 0; } /* the whole card opens the item */
.list-card-meta { margin: 2px 0 0; font-size: 0.8125rem; color: var(--color-muted); }
.list-card-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.list-card-actions form { margin: 0; }
.list-card-action { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); }
.sortable-item.is-dragged { opacity: 0.4; }
.sortable-handle { position: relative; z-index: 1; display: grid; place-items: center; cursor: grab; color: var(--color-muted); user-select: none; }
.sortable-number { min-width: 1.5em; font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.sortable-status { min-height: 1.5em; margin: 6px 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-success-text); }

/* Deleting, at the bottom of an edit page. */
.danger-zone { margin-top: 40px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--color-danger) 25%, var(--color-border)); border-radius: var(--radius-lg); background: var(--color-surface); }
.danger-zone h2 { margin: 0 0 4px; font-size: 0.95rem; }
.danger-zone p { margin: 0 0 12px; color: var(--color-muted); font-size: 0.8125rem; }
.danger-zone form { margin: 0; }

/* Dialog: unsaved changes of the admin forms. */
.dialog {
  width: min(480px, calc(100vw - 2 * var(--gutter))); padding: 0; overflow: hidden;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgba(18, 15, 24, .5); backdrop-filter: blur(1px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 12px; }
.dialog-head h2 { margin: 0; font-size: 1.1rem; }
.dialog-body { padding: 0 20px 20px; }
.dialog-body p { margin: 0; }
.dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface-soft); }
.dialog-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-muted); cursor: pointer; }
.dialog-close:hover { background: var(--color-hover); color: var(--color-ink); }

/* Content editor (Toast UI), in the colours of the page. */
.content-editor .toastui-editor-defaultUI { border-color: var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); }
.content-editor .ProseMirror, .content-editor .toastui-editor-contents { font-family: var(--font); font-size: 1rem; }
.content-editor .toastui-editor-defaultUI .toastui-editor-contents { color: var(--color-text); }
.editor-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.875em; font-weight: 600; cursor: default; }
.editor-chip-mandy { background: var(--color-brand-soft); color: var(--color-brand-text); }
.editor-chip-image, .editor-chip-wireframe { background: var(--color-info-soft); color: var(--color-info-text); }
.content-editor .toastui-editor-md-tab-container { display: none !important; }
.content-editor { isolation: isolate; }
.content-editor .toastui-editor-toolbar { position: sticky; top: var(--sticky-top, var(--header-height)); z-index: 30; background: var(--color-surface); }
.content-editor .toastui-editor-toolbar-group:has(.editor-mode-toggle) { margin-left: auto; }
.content-editor .editor-mode-toggle { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 28px; margin: 4px 8px; padding: 0; border: 0; background: none; font: 600 0.8rem var(--font); color: var(--color-muted); cursor: pointer; }
.content-editor .editor-mode-toggle[aria-checked="true"] { color: var(--color-ink); }
.content-editor .toastui-editor-defaultUI-toolbar .editor-mode-toggle:not(:disabled):hover { border: 0; background: none; }
.editor-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--color-border-strong); transition: background 0.15s; }
.editor-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.15s; }
.editor-mode-toggle[aria-checked="true"] .editor-switch { background: var(--color-brand); }
.editor-mode-toggle[aria-checked="true"] .editor-switch::after { transform: translateX(14px); }
.editor-mode-toggle:focus-visible { outline: 3px solid var(--color-brand-ring); outline-offset: 2px; border-radius: 4px; }

/* ---------- Side menu (learners and admin) ---------- */

.side-nav { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 11px; border-radius: var(--radius);
  color: var(--color-muted); text-decoration: none; font-weight: 500;
}
.side-nav a .icon { width: 18px; height: 18px; opacity: .8; }
.side-nav a:hover { background: var(--color-brand-soft); color: var(--color-brand-text); }
.side-nav a.is-active { background: var(--color-brand-soft); color: var(--color-brand-text); font-weight: 600; }
.side-nav h2 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted); margin: 16px 11px 4px; }
.side-nav h2:first-child { margin-top: 0; }
.side-nav h2 label { all: inherit; margin: 0; }
.admin-track-select { margin: 0 0 6px; min-height: 38px; font-weight: 600; color: var(--color-ink); }
.account { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 0.875rem; }
.account form { margin: 0; }
.account .button { width: 100%; justify-content: flex-start; border-color: transparent; }
.theme-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 6px; }
.theme-switch-label { font-size: 0.8125rem; color: var(--color-muted); }
.theme-switch-options { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-lg); background: var(--color-surface-soft); border: 1px solid var(--color-border); }
.theme-switch-options button {
  display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--color-muted); cursor: pointer;
}
.theme-switch-options button:hover { color: var(--color-ink); }
.theme-switch-options button[aria-pressed="true"] { background: var(--color-brand-soft); color: var(--color-brand-text); }
.theme-switch-options .icon { width: 15px; height: 15px; }
/* A module of the learner menu: its state as an icon, its title on one line. */
.side-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Admin layout: a sidebar the height of the window, a top bar ---------- */

.app-shell { display: flex; min-height: 100vh; background: var(--color-canvas); --sticky-top: 0px; }
.app-sidebar {
  position: sticky; top: 0; width: 256px; height: 100vh; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
}
.app-sidebar-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; padding: 18px 18px 10px; }
.app-sidebar-brand small { flex-basis: 100%; }
.app-sidebar-menu { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-sidebar-brand small { display: block; margin: 2px 0 0 46px; font-size: 0.75rem; font-weight: 500; color: var(--color-muted); }
.app-sidebar-scroll { flex: 1; overflow-y: auto; padding: 6px 14px 14px; }
.app-sidebar-foot { padding: 0 14px 12px; }
.app-sidebar-user { display: flex; align-items: center; gap: 12px; padding: 6px 8px; font-size: 0.8125rem; }
.app-sidebar-user b { display: block; color: var(--color-ink); font-weight: 600; }
.app-sidebar-user span { color: var(--color-muted); font-size: 0.75rem; }
.app-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius); background: var(--color-brand-soft); color: var(--color-brand-text); font-weight: 700; font-size: 0.8125rem; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--header-height); padding: 0 32px; background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.app-topbar .nav-search { width: 340px; max-width: 100%; min-width: 0; flex: 0 1 auto; }
.app-topbar .nav-search input { width: 100%; }
.app-shell .content-editor { --sticky-top: var(--header-height); }
.app-content { flex: 1; padding: 24px 32px 48px; }
.app-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px; }
.app-panel > :first-child { margin-top: 0; }
@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .app-sidebar-menu { display: none; }
  .app-sidebar-menu.is-open { display: flex; }
  .app-sidebar-brand { padding: 12px var(--gutter); }
  .app-topbar { position: static; padding: 0 var(--gutter); }
  .app-topbar-right { flex: 1; }
  .theme-switch-options button { width: 44px; height: 40px; }
  .app-topbar .nav-search { width: 100%; }
  .app-content { padding: 16px var(--gutter) 40px; }
  .app-panel { padding: 16px; }
}