/* ============================================================
   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;

  /* Fieldwork delivery codes — SurveyCTO against the ASSIGNED TARGET.
     The words finally match the colours: over target is good, under target
     is not. Every one clears 4.5:1 on white, because they are carried by
     11px bold text. */
  --cmp-match:      #006838;  /* green  — on target, exactly                */
  --cmp-short:      #b3261e;  /* red    — UNDER target: the shortfall       */
  --cmp-ahead:      #1a5fb4;  /* blue   — OVER target: costs nothing        */
  --cmp-unreported: #b45309;  /* orange — arrived, but no stratum recognised */
  --cmp-note:       #6b7280;  /* grey   — the reporting check, never an alarm */
  --cmp-short-bg:   #fdf3f2;  /* the only row tint: under-target rows only  */
  --cmp-ahead-bg:   #f2f6fc;

  /* 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;
}
/* The User Guide link sits on the main bar beside the role badge. It was only
   ever inside the account dropdown, where people did not find it. */
.topbar__guide { white-space: nowrap; }
@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;
  font-weight: 600;   /* make the question stand out from the helper text below */
}
.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;
}

/* Roster-table tools: live search box + click-to-sort columns (see table_tools.js) */
.table-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.75rem; }
.table-tools__search { min-width: 240px; max-width: 360px; }
.table-tools__count { font-size: var(--fs-sm); }
table.js-sortable th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.js-sortable th.is-sortable:hover { color: var(--color-primary); }
table.js-sortable th .sort-ind { opacity: 0.7; font-size: 0.8em; }

/* 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); }
/* Resource audience "Target" badges — the role a file is gated to. */
.pill--enumerator { background: #dcfce7; color: #166534; }
.pill--trainer    { background: #dbeafe; color: #1e40af; }
.pill--manager    { background: #f3e8ff; color: #6b21a8; }
.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; font-weight: 600; }  /* bold the question prompt */
.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: 600; 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; }
  .no-print, .table-tools { display: none !important; }
  table.js-sortable th .sort-ind { 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); }

/* --- Place picker: District > Subcounty > Parish > Village ------------- */
.placepicker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .75rem; margin: .15rem 0 .3rem; }
@media (max-width: 34rem) { .placepicker { grid-template-columns: 1fr; } }
.placepicker__level { display: flex; flex-direction: column; gap: .15rem; }
.placepicker__level label { font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: #5c6b62; }
.placepicker__select { width: 100%; }
.placepicker__select:disabled { background: #f4f6f5; color: #9aa5a0; }
.placepicker__hint { font-size: .78rem; color: #5c6b62; margin: .1rem 0 .6rem; }

/* --- Field rendering: required markers and hints ---------------------- */
/* Two columns, and every row spans both by default. A field the form marks as
   half-width takes one column, so two adjacent half-width fields fall side by
   side without the template needing to know which pairs with which — a short
   date and a short select on separate full-width rows waste the space between
   them. Collapses to one column on a phone, where side-by-side is worse. */
.formfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: .9rem; }
.formfields__row { grid-column: 1 / -1; margin: 0 0 .75rem; }
.formfields__row--half { grid-column: span 1; }
@media (max-width: 34rem) {
  .formfields { grid-template-columns: 1fr; }
  .formfields__row--half { grid-column: 1 / -1; }
}
.formfields__row > label { display: block; font-weight: 600; margin-bottom: .2rem; }
.formfields__row input[type=text], .formfields__row input[type=number],
.formfields__row input[type=date], .formfields__row input[type=file],
.formfields__row select, .formfields__row textarea { width: 100%; }
.formfields__row input[type=checkbox] { width: auto; }
.formfields__help { font-size: .8rem; color: #5c6b62; margin: .18rem 0 0; }
.formfields__error { font-size: .82rem; color: #b3261e; margin: .18rem 0 0;
  font-weight: 600; }
.formfields__row--error input, .formfields__row--error select,
.formfields__row--error textarea { border-color: #b3261e; }
.formfields__legend { font-size: .8rem; color: #5c6b62; margin: .1rem 0 .8rem; }
abbr.req { color: #b3261e; font-weight: 700; text-decoration: none;
  border: 0; margin-left: .15rem; }

/* --- Task-assignment filters and report actions ----------------------- */
.fpr-filters { display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  align-items: flex-end; margin: .6rem 0 .3rem; padding: .6rem .7rem;
  background: #f4f8f5; border: 1px solid #dfe5e1; }
.fpr-filters label { display: flex; flex-direction: column; gap: .15rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #5c6b62; }
.fpr-filters select { font-size: .82rem; min-width: 9rem; }
.fpr-filters__count { font-size: .8rem; color: #5c6b62; margin: .1rem 0 .5rem; }
.fpr-pdf-hint { font-size: .78rem; color: #5c6b62; display: inline-block;
  margin-left: .3rem; }

/* --- SurveyCTO vs progress, on an enumerator's page -------------------- */
/* Styled here rather than in _qual_style.html: this partial is included on the
   progress pages, which do not load that stylesheet, and a table that inherits
   browser defaults shrinks to its content and wraps every label. */
.cmp__intro { font-size: .85rem; color: #5c6b62; margin: .1rem 0 .6rem; }
.cmp__verdict { padding: .5rem .7rem; margin: 0 0 .8rem;
  border-left: 3px solid #21b9a2; background: #f4f8f5; font-size: .9rem; }
.cmp__verdict--ok { border-left-color: var(--cmp-match); }
/* over = OVER TARGET, so blue. The alarm belongs on the shortfall, and only
   on the shortfall: colouring an over-delivery red sent supervisors after
   enumerators who had already finished their assignment. */
.cmp__verdict--over { border-left-color: var(--cmp-ahead);
  background: var(--cmp-ahead-bg); }
.cmp__verdict--under { border-left-color: var(--cmp-short);
  background: var(--cmp-short-bg); }
.cmp__verdict--quiet { border-left-color: var(--cmp-note); }
.cmp__verdict--warn { border-left-color: var(--cmp-unreported);
  background: #fdf8ef; }
.cmp__verdict--bad { border-left-color: var(--cmp-short);
  background: var(--cmp-short-bg); }

table.cmp-table { width: 100%; border-collapse: collapse; font-size: .88rem;
  /* fixed layout so the columns take the shares set below rather than
     sizing to their text, which left every number bunched at the left
     with one enormous empty column on the right */
  table-layout: fixed; }
table.cmp-table th, table.cmp-table td { padding: .5rem .6rem; text-align: left;
  vertical-align: middle; }
table.cmp-table thead th, table.cmp-table tr:first-child th { font-size: .68rem;
  text-transform: uppercase; letter-spacing: .06em; color: #5c6b62;
  font-weight: 700; border-bottom: 2px solid #006838; white-space: nowrap; }
/* Stripes. The rows are direct children of <table>, so the browser's implicit
   <tbody> holds them all INCLUDING the header row — nth-child counts from the
   header, so "even" is the 1st, 3rd, 5th data row. */
table.cmp-table tr:nth-child(even) { background: #f6f9f7; }
table.cmp-table tr { border-bottom: 1px solid #eef2ef; }
table.cmp-table td.n, table.cmp-table th.n { text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cmp-table td:nth-child(2) { font-weight: 500; }
/* Column shares, summing to 100. The four count columns get equal widths so
   the figures line up as a block and can be compared down as well as across;
   the verdict takes the rest because it is the only column with a sentence. */
table.cmp-table th:nth-child(1) { width: 5%; }
table.cmp-table th:nth-child(2) { width: 24%; }
table.cmp-table th:nth-child(3),
table.cmp-table th:nth-child(4),
table.cmp-table th:nth-child(5),
table.cmp-table th:nth-child(6) { width: 11%; }
table.cmp-table th:nth-child(7) { width: 27%; }
table.cmp-table td:nth-child(2) { overflow-wrap: anywhere; }
table.cmp-table tr.tot { background: #eef4f0; }
table.cmp-table tr.tot td { font-weight: 700; border-top: 2px solid #006838;
  border-bottom: none; }
.cmp__tag { font-size: .8rem; font-weight: 600; }
.cmp__tag--ok { color: var(--cmp-match); }
.cmp__tag--over { color: var(--cmp-ahead); }
.cmp__tag--under { color: var(--cmp-short); }
.cmp__tag--unreported { color: var(--cmp-unreported); }
/* The reporting check. Grey on purpose and never anything else: it answers a
   different question from the colours above, and when it had a colour of its
   own people read it as a second alarm. */
.cmp__note { color: var(--cmp-note); font-size: .78rem; font-weight: 400; }
/* Severity, for the tables that are NOT a SurveyCTO/returns comparison --
   the consent panels. They must not borrow over/under, whose colours now
   carry a direction those tables do not have. */
.cmp__tag--warn { color: var(--cmp-unreported); }
.cmp__tag--bad { color: var(--cmp-short); }
.cmp__tag--quiet { color: #8a938d; font-weight: 400; }

/* Row tint, under-target only. Every row is already tagged, so tinting more
   than one state turns the table into a colour chart and the eye stops picking
   out the one that matters. The rule outranks the even-row stripe. */
table.cmp-table tr.is-short, table.cmp-table tr.is-short:nth-child(even) {
  background: var(--cmp-short-bg);
  box-shadow: inset 3px 0 0 var(--cmp-short);
}
.cmp__foot { font-size: .8rem; color: #5c6b62; margin: .6rem 0 0; }
.cmp-th__short { display: none; }
/* The reason box while "Completed" is selected. The script sets this, so a
   browser with JS off simply gets the server's message instead. */
input[name="declared_note"].is-required { border-color: #c77700;
  background: #fffaf2; }
/* The refresh time. Stated before the figures because an enumerator reads the
   red box first, and the cut-off is what makes it readable. */
.cmp__asat { font-size: .85rem; line-height: 1.5; color: #123d24;
  background: #f2f7f4; border-left: 3px solid #21b9a2;
  padding: .5rem .7rem; margin: 0 0 .7rem; border-radius: 0 3px 3px 0; }
.cmp__calm { display: block; margin-top: .35rem; font-size: .82rem;
  font-weight: 400; color: #5c6b62; }
@media (max-width: 40rem) {
  table.cmp-table { font-size: .8rem; }
  table.cmp-table th, table.cmp-table td { padding: .4rem .35rem; }
  /* The headers were `white-space: nowrap`, which is fine while the columns are
     wide enough to hold them. On a phone the 11% count columns are about 48px
     and "SURVEYCTO" needs roughly 70px, so with table-layout:fixed the text
     overflowed its cell and printed straight over its neighbours -- the header
     row read as one run-together word. Let them wrap instead. */
  table.cmp-table thead th, table.cmp-table tr:first-child th {
    white-space: normal; letter-spacing: .01em;
    font-size: .6rem; line-height: 1.25; }
  table.cmp-table th.n, table.cmp-table td.n { white-space: normal; }
  /* No `overflow-wrap: anywhere` on the headers. Letting them break mid-word
     stopped the collision but produced "SURV / EYCT / O", so instead each count
     column is given enough room for its own word and the longest label is
     abbreviated (see .cmp-th__long / .cmp-th__short in the markup). The shares
     below are measured in the browser against a 540px phone, not estimated:
     SURVEYCTO is the widest remaining header at 69px and gets 73, REPORTED
     needs 61 and gets 64. The room comes from the two columns that wrap at
     spaces anyway -- the category label and the verdict sentence. */
  table.cmp-table th:nth-child(1) { width: 7%; }
  table.cmp-table th:nth-child(2) { width: 21%; }
  table.cmp-table th:nth-child(3) { width: 11%; }
  table.cmp-table th:nth-child(4) { width: 14.5%; }
  table.cmp-table th:nth-child(5) { width: 16.5%; }
  table.cmp-table th:nth-child(6) { width: 10%; }
  table.cmp-table th:nth-child(7) { width: 20%; }
  /* "Difference" cannot fit its column on a phone and is the one header with a
     short form everybody reads the same way. */
  .cmp-th__long { display: none; }
  .cmp-th__short { display: inline; }
}

@media print { a.no-print-link { color: inherit; text-decoration: none; } }