/* ============================================================
   CEGER Training Platform — base stylesheet
   Implements docs/UI_UX_Guide.md v1.0 · skins: docs/UI_THEME_SKINS.md
   ============================================================ */

/* ---------- @font-face: Plus Jakarta Sans (Averta substitute) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-VariableFont_wght.2e5e9c2114db.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-Italic-VariableFont_wght.cc435af87e93.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette */
  --ceger-dark-green:   #006838;
  --ceger-medium-green: #39b54a;
  --ceger-teal:         #21b9a2;
  --ceger-yellow-green: #d7df23;
  --ceger-cream:        #f5f5b7;

  /* Neutrals */
  --neutral-white: #ffffff;
  --neutral-50:    #f7f7f7;
  --neutral-100:   #eef0f0;
  --neutral-200:   #d1d5db;
  --neutral-500:   #6b7280;
  --neutral-700:   #333333;
  --neutral-900:   #1a1a1a;

  /* Semantic */
  --color-error:   #b91c1c;
  --color-warn:    #b45309;
  --color-success: #15803d;

  /* Assessment rating states — drive slider fill + score badge together */
  --rate-unrated: var(--neutral-500);      /* gray  — not yet rated */
  --rate-rated:   var(--ceger-dark-green); /* green — rated */
  --rate-missing: var(--color-error);      /* red   — flagged missing on submit */
  --rate-dno:     #9ca3af;                 /* muted — "did not observe / not done" */

  /* Back-compat: referenced by a few older rules without a definition */
  --ceger-green:   var(--ceger-medium-green);

  /* Functional aliases */
  --color-bg:        var(--neutral-50);
  --color-surface:   var(--neutral-white);
  --color-text:      var(--neutral-700);
  --color-text-muted:var(--neutral-500);
  --color-heading:   var(--ceger-dark-green);
  --color-primary:   var(--ceger-dark-green);
  --color-primary-hover: var(--ceger-medium-green);
  --color-link:      var(--ceger-dark-green);
  --color-link-hover:var(--ceger-medium-green);
  --color-border:    var(--neutral-200);
  --color-divider:   var(--neutral-100);

  /* Spacing (8-pt rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Type scale */
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 10px 15px rgba(0,0,0,0.08);

  /* Layout */
  --container-content: 800px;
  --container-wide:    1200px;

  /* Focus ring (extension — yellow-green for visibility on green primaries) */
  --focus-ring: 0 0 0 2px var(--neutral-white), 0 0 0 4px var(--ceger-yellow-green);
}

/* ---------- Base reset & typography ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Nunito Sans", "Inter",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); font-weight: 600; }
h4 { font-size: var(--fs-md); font-weight: 600; }

p { margin: 0 0 var(--space-3); }

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

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.topbar__brand-logo {
  display: block;
  height: 32px;
  width: auto;
}
.topbar__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.topbar__brand-name {
  color: var(--color-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  text-decoration: none;
}
.topbar__brand-tagline {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.topbar__nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.topbar__nav a:hover {
  color: var(--color-primary);
  background: var(--neutral-50);
}
/* ---------- Account roles + avatar + dropdown ---------- */
.topbar__roles {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topbar__greeting {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.topbar__greeting strong {
  color: var(--color-heading);
  font-weight: 600;
}
@media (max-width: 640px) {
  .topbar__greeting { display: none; }
}
.account {
  position: relative;
}
.account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--neutral-50);
  cursor: pointer;
  overflow: hidden;
}
.account__avatar:hover {
  border-color: var(--color-primary);
}
.account__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account__initials {
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.account__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--space-2);
  z-index: 50;
}
.account__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.account__item:hover {
  background: var(--neutral-50);
  color: var(--color-primary);
}
.account__icon {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}
.account__item:hover .account__icon {
  color: var(--color-primary);
}
.account__item--form {
  padding: 0;
}
.account__item--form button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.account__item--form button:hover {
  background: var(--neutral-50);
  color: var(--color-primary);
}
.account__item--form button:hover .account__icon {
  color: var(--color-primary);
}

/* ---------- Role badges ---------- */
.role {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: var(--space-1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.role--manager    { background: var(--ceger-dark-green);   color: var(--neutral-white); }
.role--trainer    { background: var(--ceger-teal);         color: var(--neutral-white); }
.role--enumerator { background: var(--ceger-yellow-green); color: var(--ceger-dark-green); }
/* Session status badges */
.role--Scheduled  { background: var(--neutral-200);        color: var(--neutral-700); }
.role--InProgress { background: var(--ceger-medium-green); color: var(--neutral-white); }
.role--Closed     { background: var(--neutral-700);        color: var(--neutral-white); }

/* ---------- Container ---------- */
.container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

/* ---------- Hero ---------- */
.hero {
  margin-bottom: var(--space-5);
}
.hero h1 { margin: 0 0 var(--space-1); }
.hero__sub {
  color: var(--color-text-muted);
  margin: 0;
  font-size: var(--fs-lg);
}

/* ---------- Cohort tabs (manager workspace) ---------- */
.cohort-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-divider);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
.cohort-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-weight: 500;
  font-size: var(--fs-md);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cohort-tabs__tab:hover {
  color: var(--ceger-dark-green);
  background: var(--neutral-50);
}
.cohort-tabs__tab--active {
  color: var(--ceger-dark-green);
  border-bottom-color: var(--ceger-medium-green);
  font-weight: 600;
}
.cohort-tabs__count {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  background: var(--neutral-100);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.cohort-tabs__tab--active .cohort-tabs__count {
  background: var(--ceger-cream);
  color: var(--ceger-dark-green);
}
.cohort-tabs__tab--danger {
  color: var(--color-error, #b91c1c);
}
.cohort-tabs__tab--danger.cohort-tabs__tab--active {
  border-bottom-color: var(--color-error, #b91c1c);
  color: var(--color-error, #b91c1c);
}

/* Recompute form on the Performance page — checkbox + button inline */
.recompute-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.recompute-form__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text);
  user-select: none;
}
.recompute-form__opt input { margin: 0; }

/* Reset (danger-zone) form layout */
.reset-form {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  flex-wrap: wrap;
}
.reset-form__label {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-1);
}
.reset-form__input {
  display: block;
  padding: 0.5rem;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  font: inherit;
  min-width: 280px;
}

/* ---------- Panel (card) ---------- */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.panel > h2:first-child,
.panel > h3:first-child { margin-top: 0; }
.panel--accent  { background: var(--ceger-cream); border-color: transparent; }
.panel--warn    { border-left: 4px solid var(--ceger-yellow-green); }
.panel--success { border-left: 4px solid var(--ceger-medium-green); }
.panel--danger  { border-left: 4px solid var(--color-error); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn:hover {
  background: var(--neutral-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--primary {
  background: var(--color-primary);
  color: var(--neutral-white);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--neutral-white);
}
.btn--secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--ceger-cream);
  color: var(--color-primary);
}
.btn--success {
  background: var(--ceger-medium-green);
  color: var(--neutral-white);
  border-color: var(--ceger-medium-green);
}
.btn--danger {
  background: var(--color-error);
  color: var(--neutral-white);
  border-color: var(--color-error);
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text);
}
.btn--ghost:hover {
  background: var(--neutral-50);
}
/* Accent button — uses the enumerator-pill palette so it reads as
   informational (not a primary action). Useful for navigation to
   historical / read-only views like 'Previous'. */
.btn--accent {
  background: var(--ceger-yellow-green);
  color: var(--ceger-dark-green);
  border-color: var(--ceger-yellow-green);
}
.btn--accent:hover {
  filter: brightness(0.95);
  color: var(--ceger-dark-green);
  border-color: var(--ceger-yellow-green);
}
.btn--sm { padding: 0.3rem 0.7rem; font-size: var(--fs-xs); }
.btn--lg { padding: 0.7rem 1.5rem; font-size: var(--fs-md); }

.actions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Forms ---------- */
.field {
  display: block;
  margin-bottom: var(--space-3);
}
.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-heading);
}
.field__label--required::after {
  content: " *";
  color: var(--color-primary);
}
.field__hint {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.field__error,
.errorlist {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--color-error);
}
.field__input,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-md);
}
.field__input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ceger-medium-green);
  box-shadow: 0 0 0 3px rgba(57, 181, 74, 0.18);
}

/* ---------- Messages ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.message {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
}
.message--info    { background: var(--ceger-cream); color: var(--neutral-700); }
.message--success { background: #dcfce7; color: var(--color-success); }
.message--warning { background: #fef3c7; color: var(--color-warn); }
.message--error   { background: #fee2e2; color: var(--color-error); }

.muted { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ---------- Auth screens (login, password reset) ---------- */
.auth-shell {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background:
    radial-gradient(at 100% 0%, rgba(33,185,162,0.08) 0%, transparent 50%),
    radial-gradient(at 0% 100%, rgba(0,104,56,0.06) 0%, transparent 55%),
    var(--color-bg);
}
.auth {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  padding: var(--space-5) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
.auth__logo {
  display: block;
  height: 64px;
  margin: 0 auto var(--space-3);
}
.auth h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xl);
  text-align: center;
}
.auth__sub {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  text-align: center;
  font-size: var(--fs-sm);
}
.auth__form label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-heading);
}
.auth__form button[type="submit"] {
  margin-top: var(--space-4);
  width: 100%;
  padding: 0.65rem;
  font-size: var(--fs-md);
}
.auth__footer {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  text-align: center;
}
.auth__footer a { color: var(--color-link); }

/* ---------- Footer ---------- */
.footer {
  --footer-green: #006838;
  --footer-yellow-green: #d7df23;
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-5) var(--space-4) var(--space-4);
  font-size: var(--fs-xs);
  background: var(--footer-green);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  max-width: 1100px;
  margin: 0 auto;
}
.footer__col {
  flex: 1 1 220px;
  min-width: 200px;
}
.footer__logo {
  height: 52px;
  width: auto;
  margin-bottom: var(--space-2);
}
.footer__logo-link {
  display: inline-block;
}
.footer__brand {
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.footer__brand:hover {
  color: var(--footer-yellow-green);
}
.footer__head {
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--footer-yellow-green);
  margin-bottom: var(--space-2);
}
.footer__muted {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0.25rem 0;
}
.footer__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0.35rem 0;
}
.footer__ico {
  flex: 0 0 auto;
  color: var(--footer-yellow-green);
}
.footer__link {
  color: #fff;
  text-decoration: none;
}
.footer__link:hover {
  color: var(--footer-yellow-green);
  text-decoration: underline;
}
.footer__social {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.footer__soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.footer__soc:hover {
  color: var(--footer-yellow-green);
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Upload / loading indicator ---------- */
.upload-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.upload-indicator[hidden] { display: none; }
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Confirm modal (custom confirm() replacement) ---------- */
/* Namespaced .confirm-modal* to avoid colliding with the Alpine .modal below. */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.confirm-modal[hidden] { display: none; }
.confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 20, 0.5);
}
.confirm-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 30rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: var(--space-4);
  animation: modal-in 0.15s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.confirm-modal__message {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ============================================================
   WIZARD STYLES — Phase 2B
   ============================================================ */

/* Assessment table on trainer home + review */
.assess-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.assess-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--color-heading);
  border-bottom: 2px solid var(--color-divider);
  font-weight: 700;
}
.assess-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.assess-table tr:hover td { background: var(--neutral-50); }
.assess-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.assess-table .total-row td { background: var(--ceger-cream); border-top: 2px solid var(--color-divider); }

/* Generic data table — used in self-assessment + lists. Full-width by default. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.data-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--color-heading);
  border-bottom: 2px solid var(--color-divider);
  font-weight: 700;
}
.data-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.data-table tr:hover td { background: var(--neutral-50); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Zebra striping for the standard data tables ───────────────────────────
   Subtle green-grey on even body rows; special rows (total) and hover sit on
   top (higher specificity + later in the cascade so they always win). */
.assess-table tbody tr:nth-child(even) > td,
.assess-table tbody tr:nth-child(even) > th,
.data-table  tbody tr:nth-child(even) > td,
.data-table  tbody tr:nth-child(even) > th { background: #f2f7f3; }
.assess-table tbody tr.total-row > td { background: var(--ceger-cream); }
.assess-table tbody tr:hover > td,
.assess-table tbody tr:hover > th,
.data-table  tbody tr:hover > td,
.data-table  tbody tr:hover > th { background: #e6efe9; }

/* Extend striping to the specialised comparison / matrix / trajectory tables.
   Stripe & hover live on the ROW (not the cell) so their semantic cell colours
   — compare delta up/down, flagged variance cells, header cells — paint over
   the stripe and stay visible. */
.compare-table  tbody tr:nth-child(even),
.matrix-table   tbody tr:nth-child(even),
.variance-table tbody tr:nth-child(even),
.traj-table     tbody tr:nth-child(even) { background: #f2f7f3; }
.compare-table  tbody tr:hover,
.matrix-table   tbody tr:hover,
.variance-table tbody tr:hover,
.traj-table     tbody tr:hover { background: #e6efe9; }

/* Two or more buttons side-by-side inside one table cell. */
.action-cell {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Self-assessment history chart wrapper — full-width, max ~720px. */
.history-chart svg {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Big-number stats cards. */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.stat-card {
  background: var(--kpi-bg, var(--color-surface));
  border: 1px solid var(--color-divider);
  border-top: 4px solid var(--kpi-accent, var(--ceger-dark-green));
  border-radius: 6px;
  padding: var(--space-3);
  text-align: center;
}
.stat-card__num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--kpi-accent, var(--ceger-green));
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-card__small {
  font-size: 0.7em;
  color: var(--color-muted, #888);
  font-weight: 500;
}
.stat-card__lbl {
  margin-top: var(--space-1);
  color: var(--color-muted, #555);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Self-assessment compare matrix.
   Item column is wide and sticky; submission columns are fixed width. */
.compare-scroll {
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.compare-table th,
.compare-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  text-align: center;
  vertical-align: middle;
}
.compare-table thead th {
  background: var(--neutral-50, #fafafa);
  border-bottom: 2px solid var(--color-divider);
  color: var(--color-heading);
  font-weight: 700;
}
.compare-table th.compare-table__item-head,
.compare-table td.compare-table__item-cell {
  text-align: left;
  min-width: 220px;
  position: sticky;
  left: 0;
  background: var(--color-surface, #fff);
  z-index: 1;
}
.compare-table thead .compare-table__item-head {
  background: var(--neutral-50, #fafafa);
}
.compare-table__item-cell .item__code { margin-right: var(--space-2); }
.compare-table__col-head { min-width: 110px; }

.compare-table__cell {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.compare-table__score { display: inline-block; }
.compare-table__delta {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--color-muted, #666);
}
.compare-table__cell--up {
  background: rgba(57, 181, 74, 0.15);   /* green tint */
  color: #066624;
}
.compare-table__cell--up .compare-table__delta { color: #066624; }
.compare-table__cell--down {
  background: rgba(234, 179, 8, 0.18);   /* amber tint */
  color: #92400e;
}
.compare-table__cell--down .compare-table__delta { color: #92400e; }

/* Filter chips (compare matrix section filter) */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.filter-chips__label {
  font-weight: 600;
  color: var(--color-muted, #555);
  font-size: var(--fs-sm);
  margin-right: var(--space-1);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filter-chip:hover {
  border-color: var(--ceger-dark-green);
}
.filter-chip--on {
  background: var(--ceger-dark-green);
  color: var(--neutral-white);
  border-color: var(--ceger-dark-green);
}
.filter-chip--ghost {
  background: transparent;
  border-style: dashed;
  font-size: var(--fs-xs);
  color: var(--color-muted, #666);
}

/* Section block inside a compare matrix */
.compare-section {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
}
.compare-section:first-of-type {
  margin-top: var(--space-2);
}
.compare-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ceger-dark-green);
  color: var(--ceger-dark-green);
  font-size: var(--fs-md);
}
.compare-section__code {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: var(--ceger-cream, #fdf6e3);
  color: var(--ceger-dark-green);
  border-radius: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.compare-section__count {
  font-weight: 400;
  font-size: var(--fs-sm);
}

/* Self-assessment compact item layout: header line (score + code + label),
   slider, tick marks, DNO toggle, optional note. */
.self-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.self-item:last-child { border-bottom: 0; }

.self-item__inner { position: relative; }
.self-item__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: nowrap;
  padding-right: 3.6rem;            /* reserve space for the pinned rating badge */
}
.self-item__prompt {
  flex: 1;
  min-width: 0;
}
.self-item__saved-slot {
  flex-shrink: 0;
  min-width: 4rem;
  text-align: right;
}

/* DNO state: dim everything except the DNO toggle itself, so the user
   still has a clear affordance to un-tick it. */
.self-item__inner--dno .self-item__head,
.self-item__inner--dno .self-item__slider,
.self-item__inner--dno .self-item__ticks,
.self-item__inner--dno .self-item__note {
  opacity: 0.4;
}

/* ---- Shared rating-state feedback (self-assessment + trainer assessment) ----
   A `.rate-state--*` class on the item container sets --rate-color, which both
   the score badge and the slider fill/thumb read. States: unrated (gray),
   rated (green), missing (red, set only when the user tries to submit with an
   item still unrated), dno (muted). */
.rate-state--unrated { --rate-color: var(--rate-unrated); }
.rate-state--rated   { --rate-color: var(--rate-rated); }
.rate-state--missing { --rate-color: var(--rate-missing); }
.rate-state--dno     { --rate-color: var(--rate-dno); }

.rate-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--rate-color, var(--rate-unrated));
  color: #fff;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: background-color 0.15s ease;
}
.rate-badge__num {
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.rate-badge__den {
  font-size: 0.6rem;
  opacity: 0.85;
  margin-top: 1px;
}
.rate-state--dno .rate-badge__num { font-size: 0.72rem; letter-spacing: 0.02em; }

/* Pin the self-assessment badge to the item's top-right so a long, wrapping
   prompt can never run underneath it (the mobile overlap bug). */
.rate-badge--pinned { position: absolute; top: 0; right: 0; }

/* Missing items pulse briefly so they're findable after a blocked submit. */
.rate-state--missing .rate-badge { animation: rate-pulse 1s ease-in-out 2; }
@keyframes rate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(185, 28, 28, 0); }
}

/* Slider fill + thumb follow the rating state (native range + accent-color). */
.self-item__slider,
.item__slider { accent-color: var(--rate-color, var(--rate-unrated)); }

/* Alpine cloak — prevents flash of pre-init UI on first load. */
[x-cloak] { display: none !important; }

/* Generic modal (Alpine-driven). Backdrop covers the viewport, panel centered. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-3);
}
.modal {
  background: white;
  border-radius: 8px;
  padding: var(--space-4);
  max-width: 480px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}
.modal h3 {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-heading);
}
.modal p {
  margin: 0 0 var(--space-3) 0;
}
.modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.self-item__slider {
  width: 100%;
  margin: 0;
}
.self-item__slider:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.self-item__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-muted, #666);
  font-variant-numeric: tabular-nums;
  padding: 0 0.4rem;
}

.self-item__dno {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  user-select: none;
}
.self-item__dno input { margin: 0; }

.self-item__note {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  font: inherit;
  font-size: var(--fs-sm);
  box-sizing: border-box;
  resize: vertical;
}

/* Status pills */
.pill {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.pill--score-good { background: #dcfce7; color: var(--color-success); font-weight: 600; }
.pill--score-ok   { background: #fef3c7; color: #b45309; font-weight: 600; }
.pill--score-low  { background: #fee2e2; color: #b91c1c; font-weight: 600; }
.pill--score-none { background: var(--neutral-100); color: var(--neutral-500); }
.pill--draft      { background: var(--neutral-100); color: var(--neutral-700); }
.pill--partial    { background: var(--neutral-100); color: var(--neutral-700); }
.pill--empty      { background: var(--neutral-100); color: var(--neutral-500); }
.pill--all_dno    { background: #fef3c7; color: var(--color-warn); }
.pill--complete   { background: #dcfce7; color: var(--color-success); }
.pill--submitted  { background: var(--ceger-medium-green); color: white; }
.pill--reopened   { background: #fef3c7; color: var(--color-warn); }
.pill--locked     { background: var(--neutral-200); color: var(--neutral-700); }
.pill--meta       { background: var(--neutral-100); color: var(--neutral-500); }

/* Wizard header above the rail+main grid */
.wizard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.wizard-header h1 { margin: 0; font-size: var(--fs-xl); }
.wizard-header__trail {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.wizard-header__desc { color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.wizard-header__meta { display: flex; gap: var(--space-3); }
/* Statistics cards. Every card carries the coloured "tint" treatment used on
   the Enumerator Performance page: an accent top-border, soft tint background
   and accent-coloured number, driven by --kpi-accent / --kpi-bg. Cards in a
   .kpi-row auto-cycle through the palette below (no per-card markup needed);
   an inline --kpi-accent always overrides. */
.kpi {
  display: flex;
  flex-direction: column;
  background: var(--kpi-bg, var(--color-surface));
  border: 1px solid var(--color-divider);
  border-top: 4px solid var(--kpi-accent, var(--ceger-dark-green));
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-width: 100px;
  align-items: center;
}
.kpi__num { font-size: var(--fs-lg); font-weight: 700; color: var(--kpi-accent, var(--color-heading)); }
.kpi__lbl { font-size: var(--fs-xs); color: var(--color-text-muted); }
.kpi__num--sm { font-size: var(--fs-md); }
.kpi--tint { border-top: 4px solid var(--kpi-accent, var(--color-divider)); background: var(--kpi-bg, var(--color-surface)); }
.kpi--tint .kpi__num { color: var(--kpi-accent, var(--color-heading)); }

/* Auto-cycling accent palette for stats rows (kpi-row) and the older
   stats-cards grid — every stats card matches the coloured pattern. */
.kpi-row .kpi:nth-child(6n+1), .stats-cards .stat-card:nth-child(6n+1), .exam-grid .exam-card:nth-child(6n+1) { --kpi-accent:#006838; --kpi-bg:#e9f4ee; }
.kpi-row .kpi:nth-child(6n+2), .stats-cards .stat-card:nth-child(6n+2), .exam-grid .exam-card:nth-child(6n+2) { --kpi-accent:#178f7d; --kpi-bg:#e4f2ef; }
.kpi-row .kpi:nth-child(6n+3), .stats-cards .stat-card:nth-child(6n+3), .exam-grid .exam-card:nth-child(6n+3) { --kpi-accent:#7c3aed; --kpi-bg:#f2ecfd; }
.kpi-row .kpi:nth-child(6n+4), .stats-cards .stat-card:nth-child(6n+4), .exam-grid .exam-card:nth-child(6n+4) { --kpi-accent:#2563eb; --kpi-bg:#eaf0fd; }
.kpi-row .kpi:nth-child(6n+5), .stats-cards .stat-card:nth-child(6n+5), .exam-grid .exam-card:nth-child(6n+5) { --kpi-accent:#e58a00; --kpi-bg:#fdf3e2; }
.kpi-row .kpi:nth-child(6n+6), .stats-cards .stat-card:nth-child(6n+6), .exam-grid .exam-card:nth-child(6n+6) { --kpi-accent:#39b54a; --kpi-bg:#eaf7ec; }

/* Wizard grid: left rail + main column */
.wizard {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .wizard { grid-template-columns: 1fr; }
}

.wizard__main {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* Left rail */
.rail {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.rail__step { border-bottom: 1px solid var(--color-divider); }
.rail__step:last-child { border-bottom: none; }
.rail__step a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.rail__step a:hover { background: var(--neutral-50); }
.rail__code {
  display: inline-block;
  font-weight: 700;
  color: var(--color-heading);
  font-size: var(--fs-md);
}
.rail__title {
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.rail__status {
  grid-column: 2;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.rail__step--current a {
  border-left-color: var(--ceger-medium-green);
  background: var(--ceger-cream);
}
.rail__step--complete .rail__code { color: var(--color-success); }
.rail__step--partial  .rail__code { color: var(--color-warn); }
.rail__step--all_dno  .rail__code { color: var(--color-text-muted); }
.rail__step--review .rail__code { color: var(--ceger-dark-green); }

/* Module intro + form */
.module-intro { margin-bottom: var(--space-4); }
.module-intro p:last-child { margin-bottom: 0; }
.module-form { display: block; }

/* Field grid for section A */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-4);
}
@media (max-width: 600px) { .field-grid { grid-template-columns: 1fr; } }

/* Rubric anchor reference (collapsible) */
.rubric-anchors {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-50);
  margin-top: var(--space-2);
}
.rubric-anchors summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-heading);
}
.rubric-anchors dl {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
}
.rubric-anchors dt { font-weight: 700; color: var(--color-heading); }
.rubric-anchors dd { margin: 0; }

/* Section DNO toggle */
.section-dno-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--ceger-cream);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* Item list (rubric items) */
.item-list { list-style: none; padding: 0; margin: 0; }
.item-list--dno { opacity: 0.55; pointer-events: none; }
.item-list--dno input[type="range"] { pointer-events: none; }

.item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.item:last-child { border-bottom: none; }
.item__head {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  align-items: baseline;
}
.item__code {
  font-weight: 700;
  color: var(--ceger-dark-green);
  background: var(--ceger-cream);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  min-width: 40px;
  text-align: center;
}
.item__label { flex: 1; }
.item__controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
}
.item__slider {
  width: 100%;
  margin: 0;
}
.item__slider:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.item__dno {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  user-select: none;
  cursor: pointer;
}
.item__ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  padding: 0 4px;
}
.item--dno { background: var(--neutral-50); }

/* Scenario list (Section I) */
.scenario-list { list-style: none; padding: 0; margin: 0; }
.scenario {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.scenario:last-child { border-bottom: none; }
.scenario__head { display: flex; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-2); }
.scenario__prompt { font-weight: 500; font-size: var(--fs-md); flex: 1; }
.scenario__expected {
  background: var(--ceger-cream);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
  font-size: var(--fs-sm);
}
.scenario__expected summary {
  cursor: pointer; font-weight: 600; color: var(--color-heading);
}
.scenario__expected p { margin: var(--space-1) 0 0; }
.scenario--dno { opacity: 0.55; }

/* Module action footer */
.module-actions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.module-actions__right { display: flex; gap: var(--space-2); }

/* Item autosave indicator (Phase 2C) */
.item__saved-slot {
  margin-left: auto;
  min-width: 100px;
  text-align: right;
}
.item__saved {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-success);
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  animation: fadeOut 4s ease forwards;
}
.item__saved .muted { color: var(--color-success); opacity: 0.7; }
@keyframes fadeOut {
  0%   { opacity: 0; transform: translateY(-2px); }
  10%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Allow the item head to space the saved indicator to the right */
.item__head { flex: 1 0 auto; }

/* Horizontal scroll wrapper for wide tables (Phase 4 polish) */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--space-4));
  padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
  .table-scroll { margin: 0; padding: 0; }
}

/* Manager matrix table (Phase 2C) */
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}
.matrix-table th, .matrix-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.matrix-table th {
  text-align: left;
  color: var(--color-heading);
  background: var(--neutral-50);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.matrix-trainer-cat { font-size: var(--fs-xs); }

/* Tests-tab matrix (Phase 2) */
.tests-matrix__cell {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  text-align: center;
}
.tests-matrix__cell a { text-decoration: none; }
.tests-matrix__cell .pill { font-size: var(--fs-sm); padding: 0.25rem 0.6rem; }
.tests-matrix__cell-parts {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.tests-matrix__cell-meta {
  font-size: var(--fs-xs);
  color: var(--color-warn, #b45309);
}
.tests-filter {
  display: inline-flex;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.tests-filter a {
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  border-right: 1px solid var(--color-divider);
}
.tests-filter a:last-child { border-right: none; }
.tests-filter a:hover { background: var(--neutral-50); color: var(--ceger-dark-green); }
.tests-filter a.is-active {
  background: var(--ceger-dark-green);
  color: white;
}

/* Performance dashboard sub-nav (Phase 3) */
.perf-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-4);
  padding: 0.6rem 0.75rem;
  background: var(--neutral-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 10;
}
.perf-subnav a {
  text-decoration: none;
  color: var(--ceger-dark-green);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
}
.perf-subnav a:hover {
  background: var(--ceger-cream);
}
.perf-subnav__sep {
  color: var(--color-text-muted);
  align-self: center;
  font-size: var(--fs-xs);
}

.perf-section {
  scroll-margin-top: 80px;
}

/* Compare table — trainee columns */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.compare-table th, .compare-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.compare-table thead th {
  background: var(--neutral-50);
  color: var(--color-heading);
  font-weight: 600;
  text-align: center;
}
.compare-table thead th:first-child { text-align: left; }
.compare-table td.metric-label {
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: left;
  white-space: nowrap;
}
.compare-table td.trainee-cell {
  text-align: center;
}
.compare-bar {
  display: inline-block;
  width: 100%;
  height: 6px;
  background: var(--neutral-100);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.2rem;
}
.compare-bar__fill {
  display: block;
  height: 100%;
  background: var(--ceger-medium-green);
  border-radius: 3px;
}
.compare-bar__fill--low  { background: #ef4444; }
.compare-bar__fill--ok   { background: #f59e0b; }
.compare-bar__fill--good { background: var(--ceger-medium-green); }

/* Variance matrix */
.variance-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.variance-table th, .variance-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-divider);
  text-align: center;
}
.variance-table thead th { background: var(--neutral-50); color: var(--color-heading); font-weight: 600; }
.variance-table td.row-label { text-align: left; font-weight: 600; }
.variance-table td.stdev-cell { font-weight: 600; }
.variance-table td.stdev-cell.is-flagged { background: #fee2e2; color: #b91c1c; }
.variance-table td.stdev-cell.is-flagged::before { content: "⚠ "; }

/* Calibration scatter */
.scatter-wrap {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: flex-start;
}
.scatter-wrap svg { max-width: 100%; height: auto; }
.scatter-legend {
  font-size: var(--fs-sm);
  min-width: 220px;
}
.scatter-legend dt {
  font-weight: 600;
  margin-top: 0.5rem;
  color: var(--color-heading);
}
.scatter-legend dd {
  margin: 0 0 0.3rem 0;
  color: var(--color-text-muted);
}

/* Trajectory sparkline */
.sparkline-cell svg { display: block; }
.traj-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.traj-table th, .traj-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-divider);
  text-align: center;
}
.traj-table thead th { background: var(--neutral-50); color: var(--color-heading); font-weight: 600; }
.traj-table td.row-label { text-align: left; font-weight: 600; }

/* Read-only transcript */
.readonly-dl {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}
.readonly-dl dt { font-weight: 600; color: var(--color-heading); }
.readonly-dl dd { margin: 0; }

/* ============================================================
   EXAM STYLES — Phase 3B
   ============================================================ */

/* Home page — role workspace cards (title + description + action) */
.home-section {
  margin-top: var(--space-4);
}
.home-section > h2 {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-heading);
}
.home-section__sub {
  margin-top: var(--space-3);
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.home-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 4px solid var(--ceger-dark-green);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
/* Stripe modifiers — only override the left-border colour. Default = green
   (do-work). Accent = lime (look-back / diagnostic). Admin = teal.
   Danger = red (destructive). */
.home-card--accent { border-left-color: var(--ceger-yellow-green); }
.home-card--admin  { border-left-color: var(--ceger-teal); }
.home-card--danger { border-left-color: var(--color-error, #b91c1c); }
.home-card__meta {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-muted, #666);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.home-card__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--fs-lg);
  color: var(--color-heading);
}
.home-card__desc {
  flex: 1;
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text);
  line-height: 1.5;
}
.home-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: auto;
}

/* Trainee exams home grid */
.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.exam-card {
  background: var(--kpi-bg, var(--color-surface));
  border: 1px solid var(--color-divider);
  border-top: 4px solid var(--kpi-accent, var(--ceger-dark-green));
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.exam-card__head h2 { color: var(--kpi-accent, var(--color-heading)); }
.exam-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.exam-card__head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  flex: 1;
}
.exam-card__actions {
  margin-top: auto;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-3);
}

/* Exam header (practice + graded) */
.exam-header {
  margin-bottom: var(--space-4);
}
.exam-header__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.exam-header h1 { margin: 0; font-size: var(--fs-xl); }

/* Question prompt + options */
.q-prompt {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
}
.q-options {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}
.q-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.q-option:hover {
  background: var(--neutral-50);
  border-color: var(--ceger-medium-green);
}
.q-option input[type="radio"] {
  margin-top: 3px;
}
.q-rating {
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: var(--space-3);
  align-items: center;
}
.q-rating .item__ticks { grid-column: 1; }

.q-form { display: block; }

/* Timer */
.exam-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-width: 120px;
}
.exam-timer__lbl {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.exam-timer__num {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}
.exam-timer--warn .exam-timer__num { color: var(--color-warn); }
.exam-timer--danger .exam-timer__num { color: var(--color-error); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* Graded grid (per-part panels) */
.graded-grid { display: block; }
.q-block {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.q-block:last-child { border-bottom: none; }
.q-block__head {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-bottom: var(--space-2);
}
.q-block__prompt { flex: 1; font-weight: 500; }

/* Screen-reader only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Exam results summary (Phase 3C) */
.results-summary {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.result-q {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.result-q:last-child { border-bottom: none; }

/* Content management (Phase 2E) */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-3);
}

/* KPI row (Phase 4B) */
.kpi-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.kpi-row .kpi { flex: 1 0 140px; }

/* Memo editor (Phase 5A) */
.memo-editor {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-sm);
  line-height: 1.5;
  min-height: 600px;
  width: 100%;
}

/* ==========================================================================
   Content Table of Contents — expandable Module > Topic > Lesson tree
   ========================================================================== */
.toc {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--color-surface);
}
.toc th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--color-heading);
  border-bottom: 2px solid var(--color-divider);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.toc td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}
.toc tr:hover > td { background: var(--neutral-50); }
.toc .toc-col-action { text-align: right; white-space: nowrap; }

/* Row tiers — subtle left accent + indentation as you drill down */
.toc-row--module > td:first-child { font-weight: 700; color: var(--color-heading); }
.toc-row--topic  > td { background: var(--neutral-50); }
.toc-row--topic  .toc-label { padding-left: var(--space-4); }
.toc-row--lesson .toc-label  { padding-left: calc(var(--space-4) * 2); }
.toc-row--lesson > td { background: var(--color-surface); }

.toc-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.toc-muted { color: var(--color-text-muted); }

/* Count pill that doubles as the expand/collapse control */
.toc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  line-height: 1.4;
}
.toc-pill:hover { border-color: var(--ceger-medium-green); color: var(--color-heading); }
.toc-pill[disabled] { cursor: default; opacity: 0.55; }
.toc-pill[disabled]:hover { border-color: var(--color-border); color: var(--color-text); }
.toc-chevron { transition: transform 0.15s ease; font-size: 0.85em; }
.toc-chevron--open { transform: rotate(90deg); }

/* Action dropdown */
.toc-menu { position: relative; display: inline-block; }
.toc-menu__btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm, 6px);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.toc-menu__btn:hover { border-color: var(--ceger-medium-green); color: var(--color-heading); }
.toc-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 30;
  padding: var(--space-1) 0;
}
.toc-menu__list a,
.toc-menu__list button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.45rem var(--space-3);
  font-size: var(--fs-sm);
  text-align: left;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
}
.toc-menu__list a:hover,
.toc-menu__list button:hover { background: var(--neutral-50); }
.toc-menu__list .toc-menu__danger { color: var(--color-error); }
.toc-menu__sep { height: 1px; background: var(--color-divider); margin: var(--space-1) 0; }
.toc-menu__form { margin: 0; }

/* Breadcrumbs — content drill-down (Content > Module > Topic > Lesson) */
.breadcrumbs {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.breadcrumbs a { color: var(--color-link); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-link-hover); text-decoration: underline; }
.breadcrumbs__sep { color: var(--color-border); }
.breadcrumbs__current { color: var(--color-text); font-weight: 600; }

/* Prerequisite chips list on module/topic pages */
.prereq-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.prereq-list li a {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--ceger-medium-green);
  border-radius: 999px;
  font-size: var(--fs-sm);
  text-decoration: none;
}

/* ToC overview column — truncated by default, expands with the module row */
.toc-overview { max-width: 30rem; color: var(--color-text); }
.toc-overview .toc-ov-full { color: var(--color-text); }
.toc-more {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.35rem;
  color: var(--color-link);
  cursor: pointer;
  font-size: var(--fs-xs);
  text-decoration: underline;
  white-space: nowrap;
}
.toc-more:hover { color: var(--color-link-hover); }
.toc-title-link { font-weight: inherit; }
.toc-num { color: var(--color-text-muted); font-weight: 600; margin-right: 0.15rem; }

/* Lesson progress bar (content tables + dashboard) */
.progress { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.progress__bar {
  display: inline-block;
  width: 5rem;
  height: 0.5rem;
  background: var(--neutral-100);
  border-radius: 999px;
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  background: var(--ceger-medium-green);
  border-radius: 999px;
}
.progress__fill--done { background: var(--ceger-dark-green); }
.progress__pct { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.toc .progress__bar { width: 4rem; }

/* Lesson done / status pills */
.lesson-status { font-size: var(--fs-xs); font-weight: 600; }
.lesson-status--done { color: var(--color-success); }
.lesson-status--prog { color: var(--color-warn); }
.lesson-status--none { color: var(--color-text-muted); }

/* Mark-complete bar on the lesson page */
.completion-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3); margin-bottom: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px);
  background: var(--neutral-50);
}
.completion-bar__meta { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Milestone checklist on the lesson page */
.milestones .ms-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.milestones .ms-item { padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); }
.milestones .ms-item:first-child { border-top: none; }
.ms-label { display: flex; gap: var(--space-2); align-items: flex-start; cursor: pointer; }
.ms-label input { margin-top: 0.25rem; }

/* Emeralds self-assessment 0–10 scale */
.sa-item { border: none; padding: var(--space-3) 0; margin: 0; border-bottom: 1px solid var(--color-divider); }
.sa-item:last-child { border-bottom: none; }
.sa-item__text { padding: 0 0 var(--space-2); font-weight: 400; }
.sa-scale { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sa-scale__opt { display: inline-flex; flex-direction: column; align-items: center; cursor: pointer; font-size: var(--fs-xs); color: var(--color-text-muted); }
.sa-scale__opt input { margin: 0 0 0.15rem; }
.sa-scale__opt input:checked + span { color: var(--ceger-dark-green); font-weight: 700; }

/* Calibration bands (self-vs-exam) */
.band { display:inline-block; padding:0.15rem 0.55rem; border-radius:999px; font-size:var(--fs-xs); font-weight:600; }
.band--well  { background:#dcfce7; color:#15803d; }
.band--over  { background:#fee2e2; color:#b91c1c; }
.band--under { background:#fef9c3; color:#b45309; }
.band--incomplete { background:var(--neutral-100); color:var(--color-text-muted); }
.gap-pos { color:#b91c1c; } .gap-neg { color:#b45309; } .gap-zero { color:#15803d; }

/* Self-vs-quiz mini bars + cohort band summary (E4 calibration visuals) */
.cmp { display:inline-block; width:9rem; }
.cmp__row { display:flex; align-items:center; gap:0.3rem; font-size:var(--fs-xs); line-height:1.5; }
.cmp__lbl { width:2.4rem; color:var(--color-text-muted); }
.cmp__track { flex:1; height:0.45rem; background:var(--neutral-100); border-radius:999px; overflow:hidden; }
.cmp__fill { display:block; height:100%; border-radius:999px; }
.cmp__fill--self { background:var(--ceger-teal); }
.cmp__fill--quiz { background:var(--ceger-dark-green); }
.cmp__val { width:2.4rem; text-align:right; font-variant-numeric:tabular-nums; }
.band-summary { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin:var(--space-3) 0; }
.band-summary .band { font-size:var(--fs-sm); }

/* Breadcrumb home icon */
.breadcrumbs__home { display:inline-flex; align-items:center; color:var(--color-link); }
.breadcrumbs__home:hover { color:var(--color-link-hover); }
.breadcrumbs__home svg { display:block; }

/* ============================================================
   "Nouveau" skin — opt-in editorial theme (footer toggle).
   Every rule is gated under :root[data-skin="nouveau"], so this
   block is INERT by default and cannot affect the classic look.
   Presentational only — a greener paper background, an ambient green
   backdrop, and more elevated/rounded cards with soft accents. Keeps the
   platform's Plus Jakarta Sans (no font change) and changes no layout or
   structure. See base.html for the toggle + the server-side cookie stamp.
   ============================================================ */

/* Toggle control — sits in the footer; a white pill readable on the green band. */
.skin-toggle {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ceger-dark-green);
  background: var(--neutral-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35em 0.95em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1.4;
}
.skin-toggle::before {
  content: "";
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--neutral-500);
}
.skin-toggle:hover { border-color: var(--ceger-dark-green); }
:root[data-skin="nouveau"] .skin-toggle::before { background: var(--ceger-teal); }

/* --- The full "Nouveau" redesign — reproduces the artifact preview:
   soft green paper + ambient green backdrop, INK serif headings with green
   accents, and elevated top-accent cards with a hover lift. --- */
:root[data-skin="nouveau"] {
  /* DARK editorial theme — reproduces the artifact's dark mode */
  --neutral-50:      #0e1512;
  --neutral-100:     #1a231e;
  --neutral-200:     #2a352e;
  --neutral-500:     #9db1a5;
  --neutral-700:     #e8efe9;
  --neutral-900:     #f3f7f4;
  --color-bg:        #0e1512;
  --color-surface:   #151f1b;
  --color-text:      #e8efe9;
  --color-text-muted:#9db1a5;
  --color-heading:   #eef4ef;        /* light page headings; green stays the accent */
  --color-border:    #243029;
  --color-divider:   #243029;
  --ceger-dark-green:#4cbe79;        /* brighter green for links/buttons/accents on dark */
  --radius-md:       16px;
  --radius-lg:       22px;
  --shadow-sm:       0 1px 2px rgba(0,0,0,.30), 0 10px 26px rgba(0,0,0,.42);
  --shadow-md:       0 6px 16px rgba(0,0,0,.45), 0 24px 52px rgba(0,0,0,.55);
  --font-head:       Georgia, "Iowan Old Style", "Times New Roman", serif;
}
/* Ambient green glow over the dark ground (body keeps Plus Jakarta Sans) */
:root[data-skin="nouveau"] body {
  background:
    radial-gradient(1200px 560px at 100% -8%, rgba(33,185,162,.10), transparent 60%),
    radial-gradient(1000px 640px at -8% 108%, rgba(76,190,121,.08), transparent 60%),
    var(--color-bg);
}
/* Editorial serif headings (ink), balanced */
:root[data-skin="nouveau"] h1,
:root[data-skin="nouveau"] h2,
:root[data-skin="nouveau"] h3,
:root[data-skin="nouveau"] h4,
:root[data-skin="nouveau"] h5,
:root[data-skin="nouveau"] h6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
:root[data-skin="nouveau"] .hero h1 { font-size: 2.7rem; }
:root[data-skin="nouveau"] .hero__sub { font-size: 1.12rem; }

/* Program / home cards → green TOP accent, rounder, hover lift, green serif title */
:root[data-skin="nouveau"] .home-card {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--ceger-dark-green);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
:root[data-skin="nouveau"] .home-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
:root[data-skin="nouveau"] .home-card--accent { border-top-color: var(--ceger-yellow-green); }
:root[data-skin="nouveau"] .home-card--admin  { border-top-color: var(--ceger-teal); }
:root[data-skin="nouveau"] .home-card--danger { border-top-color: var(--color-error, #b91c1c); }
:root[data-skin="nouveau"] .home-card__title { color: var(--ceger-dark-green); }

/* Panels & KPI tiles — rounder with a soft lift */
:root[data-skin="nouveau"] .panel,
:root[data-skin="nouveau"] .kpi {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

/* Login — richer green wash + elevated, accented card */
:root[data-skin="nouveau"] .auth-shell {
  background:
    radial-gradient(at 100% 0%, rgba(33,185,162,.18) 0%, transparent 52%),
    radial-gradient(at 0% 100%, rgba(0,104,56,.13) 0%, transparent 55%),
    var(--color-bg);
}
:root[data-skin="nouveau"] .auth {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--ceger-dark-green);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(16,40,28,.08), 0 30px 64px rgba(16,40,28,.12);
}

/* (iii) Nouveau: the account dropdown had a hard-coded white bg — make it dark
   so its (light) Profile / Sign out text is readable. */
:root[data-skin="nouveau"] .account__menu {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}

/* (iv) General (both skins): anchor the footer to the bottom when the page
   content is short — a standard flex sticky-footer. width:100% is required
   because the content wrappers use `margin:0 auto`, and auto margins would
   otherwise cancel flex stretch and shrink the column (which collapsed the
   card grid to one column). */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main.container,
body > .auth-shell,
body > .container {
  flex: 1 0 auto;
  width: 100%;
}
.footer { flex-shrink: 0; }

/* (iii) Uniform metrics for both account-menu items — the Profile <a> and the
   Sign-out <button> — so their padding/height match exactly (the button's
   `font: inherit` was letting line-height drift). */
/* Uniform metrics for the account-menu items. The form wrapper (Sign out) is
   EXCLUDED here — it must keep its padding:0 so the padding lives only on its
   inner <button>; otherwise the wrapper + button double-pad Sign out, making it
   taller than the Profile / User Guide links. */
.account__item:not(.account__item--form),
.account__item--form button {
  padding: var(--space-2);
  line-height: 1.4;
  font-size: var(--fs-sm);
}

/* Nouveau: dark-theme the TinyMCE editor CHROME (toolbar, menus, borders). The
   editable area is themed in-iframe by js/tinymce_upload.js. Gated + inert in
   Classic. */
:root[data-skin="nouveau"] .tox.tox-tinymce { border-color: var(--color-border); }
:root[data-skin="nouveau"] .tox .tox-editor-header,
:root[data-skin="nouveau"] .tox .tox-toolbar-overlord,
:root[data-skin="nouveau"] .tox .tox-toolbar__primary,
:root[data-skin="nouveau"] .tox .tox-menubar,
:root[data-skin="nouveau"] .tox .tox-statusbar {
  background: var(--color-surface);
  border-color: var(--color-border);
}
:root[data-skin="nouveau"] .tox .tox-tbtn,
:root[data-skin="nouveau"] .tox .tox-mbtn,
:root[data-skin="nouveau"] .tox .tox-tbtn__select-label,
:root[data-skin="nouveau"] .tox .tox-statusbar,
:root[data-skin="nouveau"] .tox .tox-statusbar a { color: var(--color-text) !important; }
/* buttons must be transparent so the dark toolbar shows through — the oxide skin
   ships them white, which hides the (dark) default icons under Nouveau */
:root[data-skin="nouveau"] .tox .tox-tbtn,
:root[data-skin="nouveau"] .tox .tox-mbtn { background-color: transparent !important; }
:root[data-skin="nouveau"] .tox .tox-tbtn svg,
:root[data-skin="nouveau"] .tox .tox-mbtn svg,
:root[data-skin="nouveau"] .tox .tox-tbtn__select-chevron svg,
:root[data-skin="nouveau"] .tox .tox-icon svg { fill: var(--color-text) !important; }
:root[data-skin="nouveau"] .tox .tox-tbtn:hover,
:root[data-skin="nouveau"] .tox .tox-mbtn:hover { background-color: rgba(255,255,255,.10) !important; }
:root[data-skin="nouveau"] .tox .tox-tbtn--enabled,
:root[data-skin="nouveau"] .tox .tox-tbtn--enabled:hover { background-color: rgba(76,190,121,.22) !important; }
/* Toolbar dropdown menus (lists / format), rendered in the aux portal */
:root[data-skin="nouveau"] .tox .tox-menu { background: var(--color-surface); border-color: var(--color-border); }
:root[data-skin="nouveau"] .tox .tox-collection__item { color: var(--color-text); }
:root[data-skin="nouveau"] .tox .tox-collection__item--active { background: rgba(76,190,121,.18); }
:root[data-skin="nouveau"] .tox .tox-collection__item-icon svg { fill: var(--color-text); }

/* Reusable modal chrome (Bootstrap-style structure, themed to our tokens so it
   works in both skins): a header with a title + close ✕, a body, and a footer
   for actions. Put on the dialog: padding:0; overflow:hidden. */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.modal-title { margin: 0; font-size: var(--fs-lg); }
.modal-x {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.05em 0.3em;
  border-radius: var(--radius-sm);
}
.modal-x:hover { color: var(--color-text); background: rgba(127, 127, 127, 0.14); }
.modal-body { padding: var(--space-4); }
.modal-foot {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* Nouveau: the authored INFO/STAR instruction call-outs inside lesson content
   carry INLINE light backgrounds (#f4f8f5 green, #fdf7ee amber), so under the
   dark skin they became a light box holding Nouveau's light text — invisible
   (see the "You are assessed three ways…" card). Repaint them to a translucent
   tinted panel and force legible text; links keep their own colour. !important is
   required to beat the inline style. Matched on the inline colour so any content
   built from the same INFO/STAR constants is covered. */
:root[data-skin="nouveau"] .content-body div[style*="#f4f8f5"] {
  background: rgba(76, 190, 121, 0.10) !important;
  border-left-color: var(--ceger-dark-green) !important;
}
:root[data-skin="nouveau"] .content-body div[style*="#fdf7ee"] {
  background: rgba(224, 138, 30, 0.14) !important;
  border-left-color: #e0a44e !important;
}
:root[data-skin="nouveau"] .content-body div[style*="#f4f8f5"],
:root[data-skin="nouveau"] .content-body div[style*="#fdf7ee"],
:root[data-skin="nouveau"] .content-body div[style*="#f4f8f5"] :not(a),
:root[data-skin="nouveau"] .content-body div[style*="#fdf7ee"] :not(a) {
  color: var(--color-text) !important;
}

/* ============================================================
   Online User Guide (/help/) — token-based, works in both skins.
   ============================================================ */
.guide-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.guide-toolbar .guide-rolebanner { flex: 1 1 320px; margin: 0; }
.guide-toolbar .btn { flex: 0 0 auto; white-space: nowrap; }

/* two-column layout: sticky TOC + readable content column */
.guide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .guide-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-6); }
}

.guide-toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-3) var(--space-4);
}
.guide-toc > summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--color-heading);
  list-style-position: inside;
}
.guide-toc nav { display: flex; flex-direction: column; margin-top: var(--space-2); }
.guide-toc nav a {
  display: block;
  padding: 3px 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
}
.guide-toc nav a:hover { color: var(--ceger-dark-green); border-left-color: var(--ceger-dark-green); }
.guide-toc__head {
  margin-top: var(--space-3);
  font-weight: 700;
  color: var(--color-heading) !important;
  padding-left: var(--space-2) !important;
}
.guide-toc__head:first-child { margin-top: 0; }
@media (min-width: 900px) {
  .guide-toc { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
  .guide-toc > summary { display: none; }        /* desktop: always expanded, no toggle */
  .guide-toc[open] nav, .guide-toc nav { display: flex !important; }
}

.guide-main { min-width: 0; max-width: 68ch; }
.guide-main p, .guide-main li { line-height: 1.65; }
/* justified body with hyphenation so line-end words break cleanly instead of
   leaving big inter-word gaps ("rivers"). Needs lang on <html> (set to "en"). */
.guide-main p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* section spacing + anchor offset so headings clear the top bar */
.guide-section { margin-bottom: var(--space-6); }
.guide-section [id], .guide-section h3[id] { scroll-margin-top: 90px; }
.guide-section > h3 { scroll-margin-top: 90px; margin-top: var(--space-5); }

.guide-part {
  scroll-margin-top: 90px;
  margin-top: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--ceger-dark-green);
  color: var(--color-heading);
}
.guide-section:first-child .guide-part { margin-top: 0; }
.guide-part__note { font-weight: 400; font-size: var(--fs-md); color: var(--color-text-muted); }

/* figures / screenshots */
.guide-fig { margin: var(--space-4) 0; }
.guide-fig img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}
.guide-fig figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* call-out asides (info = green, caution = amber) — tinted, both skins */
.guide-note, .guide-caution {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--ceger-dark-green);
  border-radius: var(--radius-sm, 6px);
  background: rgba(47, 125, 79, 0.08);
  color: var(--color-text);
}
.guide-note :last-child, .guide-caution :last-child { margin-bottom: 0; }
.guide-note :first-child, .guide-caution :first-child { margin-top: 0; }
.guide-caution {
  border-left-color: #e08a1e;
  background: rgba(224, 138, 30, 0.10);
}
:root[data-skin="nouveau"] .guide-note { background: rgba(76, 190, 121, 0.10); border-left-color: var(--ceger-dark-green); }
:root[data-skin="nouveau"] .guide-caution { background: rgba(224, 138, 30, 0.14); border-left-color: #e0a44e; }

/* print: drop chrome + the TOC, let the guide flow full width */
@media print {
  .topbar, .footer, .guide-toolbar, .guide-toc, .skin-toggle { display: none !important; }
  .guide-layout { display: block; }
  .guide-main { max-width: none; }
  .guide-fig img { box-shadow: none; }
  .guide-part { break-after: avoid; }
  .guide-section { break-inside: auto; }
}

/* ============================================================
   Guided tour (Driver.js) — popover themed to our tokens so it
   matches both the Classic and Nouveau skins. Scoped via the
   popoverClass "ceger-tour" set in js/tours.js.
   ============================================================ */
.driver-popover.ceger-tour {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.30);
  max-width: 340px;
}
.driver-popover.ceger-tour .driver-popover-title { color: var(--color-heading); font-size: var(--fs-lg); font-weight: 700; }
.driver-popover.ceger-tour .driver-popover-description { color: var(--color-text); line-height: 1.55; }
.driver-popover.ceger-tour .driver-popover-progress-text { color: var(--color-text-muted); font-size: var(--fs-sm); }
.driver-popover.ceger-tour .driver-popover-close-btn { color: var(--color-text-muted); }
.driver-popover.ceger-tour .driver-popover-close-btn:hover { color: var(--color-text); }
.driver-popover.ceger-tour button.driver-popover-next-btn,
.driver-popover.ceger-tour button.driver-popover-prev-btn {
  text-shadow: none;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.35rem 0.8rem;
}
.driver-popover.ceger-tour button.driver-popover-next-btn {
  background: var(--ceger-dark-green);
  color: #fff;
  border: 1px solid var(--ceger-dark-green);
}
.driver-popover.ceger-tour button.driver-popover-next-btn:hover { filter: brightness(1.06); }
.driver-popover.ceger-tour button.driver-popover-prev-btn {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
/* arrow must match the popover ground (Driver hard-codes it white) */
.driver-popover.ceger-tour .driver-popover-arrow-side-left  { border-left-color:   var(--color-surface) !important; }
.driver-popover.ceger-tour .driver-popover-arrow-side-right { border-right-color:  var(--color-surface) !important; }
.driver-popover.ceger-tour .driver-popover-arrow-side-top   { border-top-color:    var(--color-surface) !important; }
.driver-popover.ceger-tour .driver-popover-arrow-side-bottom{ border-bottom-color: var(--color-surface) !important; }

/* link-styled button (used for the wizard "Take a quick tour" trigger) */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--ceger-dark-green);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.linklike:hover { filter: brightness(1.1); }