:root {
  /* Neutrals carry a slight blue bias toward --blue, so they read as chosen
     rather than as default grey. Hairlines are lighter than before: at
     #d8dee6 every table row drew a line as loud as the data in it. */
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #0f1a24;
  /* Darkened 2026-08-08. #6b8095 measured 4.08:1 on --panel and 3.77:1 on
     --bg -- both under the 4.5:1 WCAG AA floor -- while carrying every
     secondary label, table caption and empty-state line in the console (32
     usages). Now 5.20:1 and 4.80:1. Keep the old value only for non-text use. */
  --muted: #5b6f82;
  --muted-soft: #6b8095;
  --line: #e3e9ee;
  --line-strong: #cfd9e2;
  /* Figures that must line up in a column. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --nav: #101820;
  --nav-muted: #aeb8c2;
  --green: #16885c;
  --blue: #1f6fd1;
  --red: #b42318;
  --amber: #b76e00;
  --cyan: #08778f;
  --soft-green: #e8f6ef;
  --soft-red: #fff0ee;
  --soft-amber: #fff6e5;
  --soft-blue: #edf5ff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 268px;
  padding: 24px 20px;
  background: var(--nav);
  color: #fff;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 30px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: #eaf2ff;
  color: #103b6d;
  font-weight: 900;
}

.brand small {
  display: block;
  margin-top: 2px;
  color: var(--nav-muted);
}

.language-switch {
  display: grid;
  gap: 6px;
  margin: -12px 0 18px;
}

.language-switch label {
  color: var(--nav-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.language-switch select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0 10px;
  background: #172431;
  color: #fff;
  font: inherit;
  font-weight: 800;
}

nav {
  display: grid;
  gap: 6px;
}

nav a {
  padding: 12px 12px 12px 12px;
  border-left: 4px solid transparent;
  border-radius: 8px;
  color: #d8e0e8;
  text-decoration: none;
  transition: all 0.2s ease;
}

nav a.active,
nav a:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

nav a.active {
  border-left-color: #4fa6ff;
}

.shell {
  margin-left: 268px;
  padding: 30px;
}

.topbar {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  max-width: 820px;
  font-size: 34px;
  line-height: 1.12;
}

h2 {
  font-size: 18px;
  line-height: 1.25;
}

.lede {
  max-width: 820px;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.5;
}

.eyebrow {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  min-width: 300px;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  cursor: pointer;
}

button:hover {
  border-color: #b8c2cf;
  background: #f9fbfd;
}

a.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}

a.button-link:hover {
  border-color: #b8c2cf;
  background: #f9fbfd;
}

button.primary,
button.compact,
a.button-link.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

button.compact {
  min-height: 34px;
}

button.secondary {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.notice {
  margin-bottom: 18px;
  border: 1px solid #b8d8c9;
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--soft-green);
  color: #1d4d38;
  line-height: 1.45;
}

.readiness-strip {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
}

.readiness-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.readiness-grid,
.template-groups {
  display: grid;
  gap: 10px;
}

.readiness-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.template-groups {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.readiness-item,
.template-group {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.readiness-item strong,
.template-group strong {
  display: block;
}

.readiness-item span:not(.pill),
.readiness-item small,
.template-group span:not(.pill),
.template-group small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.decision-summary,
.metrics-grid,
.layout {
  display: grid;
  gap: 16px;
}

.decision-summary {
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  align-items: stretch;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
}

.decision-copy {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.summary-card {
  display: grid;
  gap: 5px;
  min-height: 104px;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.summary-card span,
.summary-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.summary-card span {
  font-weight: 800;
  text-transform: uppercase;
}

.summary-card strong {
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.metrics-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  margin-bottom: 16px;
}

.metric,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.metric {
  min-height: 112px;
  padding: 18px;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 32px;
  line-height: 1.1;
}

.metric.danger strong {
  color: var(--red);
}

.metric.positive strong {
  color: var(--green);
}

.overview-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  gap: 16px;
  margin-bottom: 16px;
}

.overview-main {
  min-height: 100%;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.insight-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 138px;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.insight-card strong {
  font-size: 28px;
  line-height: 1.05;
}

.insight-card small {
  color: var(--muted);
  line-height: 1.4;
}

.evidence-list {
  display: grid;
  gap: 10px;
}

.evidence-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.evidence-item span:not(.pill) {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  margin-bottom: 16px;
}

/* One panel per row. The cross-company console's tables are 7 and 8 columns of
   real data; in the two-column grid each panel is ~650px against a 760px table
   min-width, so every row's action column landed outside its card. */
.layout.stacked {
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  min-width: 0;
  padding: 18px;
}

.panel-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eff3f6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.status.ok {
  background: var(--soft-green);
  color: var(--green);
}

.status.warn {
  background: var(--soft-amber);
  color: var(--amber);
}

.summary-line,
.sync-note {
  margin-bottom: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.sync-note {
  margin: 4px 0 0;
  font-size: 13px;
}

.stack-list,
.campaign-list,
.learner-list,
.department-list,
.funnel {
  display: grid;
  gap: 12px;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.config-item,
.campaign-item,
.learner-item,
.stack-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.config-item {
  display: grid;
}

.config-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.config-item strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.campaign-list {
  margin-top: 14px;
}

.stack-item span,
.campaign-item span,
.learner-item span,
.learner-item small,
.stack-item small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.learner-list {
  margin-bottom: 14px;
}

.sync-list {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.inline-form-panel {
  margin: 14px 0;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
}

.admin-form input:focus-visible,
.admin-form select:focus-visible,
.admin-form textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.admin-form input::placeholder,
.admin-form textarea::placeholder {
  color: var(--muted);
}

.admin-form textarea {
  min-height: 76px;
  resize: vertical;
}

.admin-form button {
  justify-self: start;
}

.assign-groups {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.assign-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.assign-group input {
  width: auto;
}

#trainingAssignForm {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
}

.quiz-take {
  display: grid;
  gap: 12px;
}

.quiz-question {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.quiz-question legend {
  font-weight: 750;
  color: var(--ink);
  padding: 0 6px;
}

.quiz-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.quiz-result.pass {
  border-color: #1a7f37;
  background: #eaf6ec;
  color: #1a7f37;
}

.quiz-result.fail {
  border-color: #b42318;
  background: #fff0ee;
  color: #b42318;
}

/* Login page */
.login-body {
  --login-bg: #f5f1e8;
  --login-surface: #fffdf9;
  --login-panel: #263a32;
  --login-panel-2: #355347;
  --login-cta: #ea6d43;
  --login-ink: #18231d;
  --login-muted: #6f786f;
  --login-line: #d7ddd7;
  --login-soft: rgba(24, 35, 29, .08);
  min-height: 100vh;
  margin: 0;
  padding: 28px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, .72), transparent 42%),
    linear-gradient(160deg, #f7f3eb 0%, var(--login-bg) 48%, #ece9e1 100%);
}

.login-shell {
  width: min(1040px, 100%);
}

.login-surface {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--login-surface);
  border: 1px solid rgba(24, 35, 29, .08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(24, 35, 29, .14);
}

.login-brand-panel {
  display: grid;
  gap: 28px;
  align-content: space-between;
  min-height: 640px;
  padding: 36px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, .12), transparent 28%),
    linear-gradient(145deg, var(--login-panel) 0%, var(--login-panel-2) 100%);
  color: #f7f2e8;
}

.login-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-brand-lockup .brand-mark {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}

.login-brand-lockup strong,
.login-brand-lockup small {
  display: block;
}

.login-brand-lockup small {
  margin-top: 3px;
  color: rgba(247, 242, 232, .72);
}

.login-brand-copy {
  display: grid;
  gap: 14px;
  max-width: 360px;
}

.login-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247, 242, 232, .72);
}

.login-brand-copy h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fffaf2;
}

.login-brand-lede {
  margin: 0;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247, 242, 232, .82);
}

.login-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-trust-list li {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.login-auth-panel {
  display: grid;
  align-content: center;
  padding: 36px 34px;
  background: linear-gradient(180deg, #fffdf9 0%, #f9f7f1 100%);
}

.login-card {
  display: grid;
  gap: 14px;
  color: var(--login-ink);
}

.login-card[hidden] {
  display: none !important;
}

.login-card-head {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}

.login-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--login-muted);
}

.login-card h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--login-ink);
}

.login-lede {
  margin: 0;
  color: var(--login-muted);
  font-size: 14px;
  line-height: 1.6;
}

.login-card label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--login-muted);
}

.login-card input {
  min-height: 50px;
  border: 1px solid var(--login-line);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  font-weight: 500;
  color: var(--login-ink);
  background: rgba(255, 255, 255, .9);
}

.login-card input::placeholder {
  color: color-mix(in srgb, var(--login-muted) 78%, white);
}

.login-card input:focus-visible {
  outline: 2px solid rgba(234, 109, 67, .45);
  outline-offset: 2px;
  border-color: rgba(234, 109, 67, .55);
}

.login-help-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: -2px;
}

.login-inline-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #7e4c2f;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.login-inline-link:focus-visible {
  outline: 2px solid rgba(234, 109, 67, .45);
  outline-offset: 3px;
  border-radius: 4px;
}

.login-support-note,
.login-help,
.login-switch {
  color: var(--login-muted);
  font-size: 13px;
  line-height: 1.55;
}

.login-help {
  margin: -2px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(38, 58, 50, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.login-switch {
  margin: 2px 0 0;
}

.login-switch a {
  color: var(--login-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-switch a:focus-visible {
  outline: 2px solid rgba(234, 109, 67, .45);
  outline-offset: 3px;
  border-radius: 4px;
}

.login-error {
  background: #fce9e7;
  border: 1px solid #f0b8b2;
  color: #b42318;
  border-radius: 14px;
  padding: 11px 13px;
  font-size: 13.5px;
}

.login-card .primary {
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--login-cta);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(234, 109, 67, .22);
}

.login-card .primary:disabled {
  opacity: .72;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 920px) {
  .login-body {
    padding: 18px;
  }

  .login-surface {
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    min-height: auto;
    gap: 22px;
    padding: 28px 24px;
  }

  .login-auth-panel {
    padding: 28px 24px;
  }
}

@media (max-width: 560px) {
  .login-body {
    padding: 12px;
  }

  .login-brand-panel,
  .login-auth-panel {
    padding: 22px 18px;
  }

  .login-brand-copy h1 {
    font-size: 32px;
  }

  .login-card h2 {
    font-size: 26px;
  }

  .login-help-row {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card .primary,
  .login-inline-link,
  .login-switch a {
    transition: none;
  }
}

/* Session bar (API mode) */
.session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dbe4e6);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 18px;
}

.session-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  flex-wrap: wrap;
}

.session-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1a7f37;
  box-shadow: 0 0 0 3px rgba(26, 127, 55, .18);
}

.session-live {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0a5f56;
  background: #e0f1ee;
  padding: 2px 8px;
  border-radius: 999px;
}

.session-demo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a5a00;
  background: #fff3d6;
  padding: 2px 8px;
  border-radius: 999px;
}

.translation-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
  margin: -4px 0 4px;
}

.translation-result:empty {
  display: none;
}

.translation-result {
  margin-top: 10px;
  border: 1px solid #b8d8c9;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft-green);
  color: #1d4d38;
  font-size: 13px;
  font-weight: 800;
}

.draft-result:empty {
  display: none;
}

.status-card {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border: 1px solid #b8d8c9;
  border-radius: 8px;
  padding: 12px;
  background: var(--soft-green);
  color: #1d4d38;
}

.status-card span {
  color: #1d4d38;
}

.rbac-summary {
  margin-bottom: 16px;
}

.rbac-layout {
  align-items: start;
}

.learner-training-layout {
  grid-template-columns: minmax(0, 1fr);
}

.rbac-role-tabs {
  display: grid;
  gap: 10px;
}

.rbac-role-tab {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 74px;
  justify-items: start;
  border-color: #e5eaf0;
  padding: 12px;
  text-align: left;
}

.rbac-role-tab.active {
  border-color: var(--blue);
  background: var(--soft-blue);
  color: #103b6d;
}

.rbac-role-tab span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.rbac-table {
  min-width: 900px;
}

.switch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 132px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.switch input:disabled + span {
  color: #98a2b3;
}

.training-card {
  width: 100%;
  min-height: 78px;
  color: var(--ink);
  text-align: left;
}

.training-card.active {
  border-color: var(--blue);
  background: var(--soft-blue);
}

.training-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.training-player,
.training-section {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.training-player {
  margin-top: 12px;
}

.training-player span:not(.pill),
.training-player small,
.training-section span:not(.pill),
.training-section small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.training-section-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.training-section.complete {
  border-color: #b8d8c9;
  background: var(--soft-green);
}

.stack-item small {
  font-size: 12px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 92px minmax(120px, 1fr) 56px;
  gap: 12px;
  align-items: center;
}

.bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f5;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.department {
  display: grid;
  gap: 7px;
}

.department-top {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

.department-top strong {
  color: var(--ink);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom-color: var(--line-strong);
}

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

tbody tr:hover td {
  background: var(--soft-blue);
}

/* Figures line up. A column of scores in a proportional font has to be read
   one value at a time; tabular numerals make it comparable at a glance. */
.num,
td.num,
th.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Completion as a shape as well as a number — what needs attention reads
   before anything is parsed. */
.meter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-end;
}

.meter-track {
  width: 72px;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--blue);
}

.meter-fill.low { background: var(--amber); }
.meter-fill.none { background: var(--line-strong); }

/* A name with its context under it, instead of two columns of repetition. */
.cell-title {
  font-weight: 650;
}

.cell-title small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 11.5px;
}

td strong,
td span {
  display: block;
}

td span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.pill.done { background: var(--soft-green); color: var(--green); }
.pill.prog { background: var(--soft-amber); color: var(--amber); }
.pill.todo { background: var(--line); color: var(--muted); }

/* Standing assignment rules, listed under the course they belong to. They sit
   below the row's own actions and read as a footnote to it, not as a peer. */
.standing-rules {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.standing-rules small { color: var(--muted); font-size: 12px; }

.standing-rules .pill {
  align-items: center;
  gap: 6px;
}

/* The Remove control is deliberately quiet: removing a compliance obligation
   should be reachable, never the easiest thing on the row to hit by accident. */
.standing-rules .pill button {
  border: 0;
  background: none;
  padding: 0 0 0 2px;
  color: inherit;
  opacity: 0.7;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.standing-rules .pill button:hover { opacity: 1; }

.pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pill.high {
  background: var(--soft-red);
  color: var(--red);
}

.pill.medium {
  background: var(--soft-amber);
  color: var(--amber);
}

.pill.low {
  background: var(--soft-green);
  color: var(--green);
}

.pill.info {
  background: var(--soft-blue);
  color: var(--cyan);
}

.checklist,
.next-actions {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.checklist {
  list-style: none;
}

.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
}

.check {
  display: grid;
  flex: 0 0 30px;
  min-width: 30px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
}

.check.ok {
  background: var(--soft-green);
  color: var(--green);
}

.check.pending {
  background: #eef1f4;
  color: var(--muted);
}

.next-actions {
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 1120px) {
  .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .overview-cockpit {
    grid-template-columns: 1fr;
  }

  .decision-summary {
    grid-template-columns: 1fr;
  }

  .summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .readiness-grid,
  .template-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sidebar {
    position: static;
    width: auto;
  }

  .shell {
    margin-left: 0;
    padding: 20px;
  }

  .topbar,
  .readiness-head,
  .panel-head {
    display: grid;
  }

  .actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .metrics-grid,
  .overview-cockpit,
  .insight-grid,
  .layout,
  .admin-form,
  .summary-cards,
  .readiness-grid,
  .template-groups {
    grid-template-columns: 1fr;
  }
}
/* === Design Enhancements === */

.page-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shell main > section:not(.notice) {
  animation: fadeIn 0.2s ease;
}

.panel {
  animation: slideUp 0.3s ease;
}

.skeleton {
  background: linear-gradient(90deg, var(--panel) 0%, #f0f3f7 50%, var(--panel) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.print-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.print-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
}

.print-menu button:hover {
  background: var(--bg);
}

.print-menu button:first-child {
  border-radius: 8px 8px 0 0;
}

.print-menu button:last-child {
  border-radius: 0 0 8px 8px;
}

.loading-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 12px;
}

.loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: pulse 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}

.assessment-swimlanes {
  display: grid;
  gap: 16px;
}

.assessment-swimlane {
  display: grid;
  gap: 12px;
}

.assessment-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.assessment-tile {
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 14px;
  text-align: left;
}

.assessment-tile:hover {
  border-color: var(--accent);
}

.assessment-tile.locked {
  opacity: 0.58;
}

.assessment-drawer-card {
  align-items: center;
}

.learn-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(31, 111, 209, 0.14), transparent 32%),
    linear-gradient(180deg, #f5f7fb 0%, #eef3f8 100%);
}

.learn-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.learn-topbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.learn-topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.learn-topbar nav a {
  border-left: 0;
  border: 1px solid rgba(16, 24, 32, 0.08);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
}

.learn-topbar nav a:hover,
.learn-topbar nav a.active {
  background: #fff;
  border-color: rgba(31, 111, 209, 0.24);
  color: var(--blue);
}

.learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
  gap: 18px;
  margin-bottom: 18px;
}

.learn-card {
  border: 1px solid rgba(16, 24, 32, 0.08);
  border-radius: 18px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 50px rgba(16, 24, 32, 0.08);
}

.learn-card h1,
.learn-card h2,
.learn-card h3 {
  margin: 0;
}

.learn-card p {
  color: var(--muted);
  line-height: 1.55;
}

.learn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.learn-kpis,
.learn-grid {
  display: grid;
  gap: 16px;
}

.learn-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.learn-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.learn-metric {
  display: grid;
  gap: 6px;
}

.learn-metric strong {
  font-size: 28px;
}

.learn-stack {
  display: grid;
  gap: 12px;
}

.learn-course {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(16, 24, 32, 0.08);
  border-radius: 14px;
  background: #fff;
}

.learn-course-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.learn-course small,
.learn-list li {
  color: var(--muted);
}

.learn-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.learn-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.learn-note {
  margin-top: 16px;
  font-size: 14px;
}

@media (max-width: 900px) {
  .learn-hero,
  .learn-grid {
    grid-template-columns: 1fr;
  }

  .learn-kpis {
    grid-template-columns: 1fr;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
@media (max-width: 560px) {
  .shell {
    padding: 16px;
  }

  h1 {
    font-size: 28px;
  }

  .metrics-grid {
    gap: 12px;
  }

  .funnel-row {
    grid-template-columns: 78px minmax(90px, 1fr) 42px;
    gap: 8px;
  }
}

@media print {
  /* Chrome and Safari drop background colours when printing, so a dark panel
     becomes unreadable dark-on-white. Force a plain ground and let borders
     carry the structure. */
  :root { --bg: #fff; --panel: #fff; --ink: #000; --muted: #444; }
  body { background: #fff; color: #000; }

  .sidebar,
  nav,
  .actions,
  .inline-actions,
  .session-bar,
  .language-switch,
  button {
    display: none;
  }

  .shell {
    margin-left: 0;
    padding: 0;
  }

  .panel,
  .metric,
  .notice,
  .decision-summary,
  .readiness-strip {
    break-inside: avoid;
  }

  /* The certificate is the artefact a learner hands to somebody else. Records
     already carry a number and a verification code; until now there was no way
     to produce a document, so learners screenshotted a number that "looks
     fake". This makes the browser's own Save as PDF the deliverable — it is
     NOT a PDF library and nothing here claims generated PDFs exist. */
  .certificate,
  .certificate-card,
  [data-certificate] {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 2px solid #000;
    border-radius: 0;
    padding: 32px;
    margin: 0;
  }

  /* The two values that let a third party CHECK the certificate must never be
     the part that gets clipped. */
  .certificate-number,
  .certificate-verify,
  [data-certificate-number],
  [data-verify-code] {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  /* The person and the course are what make it a certificate rather than a
     receipt; give them the weight they need on paper. */
  .cert-name {
    display: block;
    margin-top: 8px;
    font-size: 20px;
    font-weight: 800;
    color: #000;
  }

  .cert-course {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    color: #000;
  }

  a[href]::after { content: ""; }
  @page { margin: 16mm; }
}

/* One-time credential hand-off. Shown once after a learner is created, then
   never again — there is no email sending on this platform, so it has to be
   legible enough to transcribe correctly on the first read. */
.one-time-password {
  display: inline-block;
  margin: 6px 8px 6px 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: 0.04em;
  user-select: all;
}

/* The `hidden` attribute must actually hide.
   Any class that sets `display` (.admin-form label uses `display: grid`) beats
   the browser's own [hidden] rule, because a UA stylesheet loses to an author
   one. That silently defeated hidden on the provisioning form: a learner's
   password field stayed visible, offering the operator a credential choice the
   server ignores — the exact thing generated passwords exist to prevent.
   Author-level and !important so the attribute means what it says. */
[hidden] {
  display: none !important;
}

/* Empty / placeholder states. Used 13 times across the console ("Loading
   organisations…", "Select an organisation to see every learner's score") and
   never defined, so every one of them rendered as unstyled body text at full
   contrast — competing with the real data instead of receding behind it. */
.empty {
  margin: 0;
  padding: 14px 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* --- Bulk roster import -----------------------------------------------------
   These controls previously used a `.field` class that does not exist in this
   stylesheet, so the whole panel rendered as unstyled browser defaults next to
   a correctly styled form. They now use .admin-form like every other form here,
   plus the few additions below that grid does not cover. */

/* A control that spans both columns of .admin-form's two-column grid. */
.admin-form .span-2 {
  grid-column: 1 / -1;
}

/* The roster is data, not prose: tabular figures and a monospaced face make a
   misaligned column visible while pasting, before the preview has to say so. */
/* Selector carries .admin-form deliberately: `.admin-form textarea` sets
   `font: inherit` and outranks a bare `.roster-input`, so the monospaced face
   silently lost the cascade and the roster rendered in the body font. */
.admin-form textarea.roster-input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  min-height: 150px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* The default file input renders as an unstyled OS control ("Choose File | No
   file chosen") that ignores every other control's shape. Hide it and drive it
   from its own label so it matches the buttons around it. */
.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.file-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* Visually hidden but still focusable and still clickable via its label. Also
   scoped under .admin-form so `.admin-form input { width: 100% }` cannot win. */
.admin-form .file-button input[type="file"],
.file-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.file-button span {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.file-button:hover span {
  border-color: var(--brand, #1d4ed8);
  color: var(--brand, #1d4ed8);
}

/* Keyboard users get the same affordance as mouse users: the input is visually
   hidden but still focusable, so surface its focus on the visible label. */
.file-button input[type="file"]:focus-visible + span {
  outline: 2px solid var(--brand, #1d4ed8);
  outline-offset: 2px;
}

/* A control that cannot be used yet should look it. Previously the course
   selector stayed enabled and held a single option reading "Pick an existing
   organisation first" — an open dropdown containing an instruction instead of
   choices reads as broken rather than as not-yet-ready. */
.admin-form select:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
}

.field-hint {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

/* Average score is derived from a subset of the completion figure — only the
   learners who finished. Rendered as an equal sibling it read as a
   contradiction ("33% complete / 100% average"). The indent and the hairline
   encode the dependency: this number hangs off the one above it. */
.stat-derived {
  display: grid;
  gap: 2px;
  margin: 12px 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
}

.stat-derived span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.stat-derived strong { font-size: 16px; color: var(--muted); }
.stat-derived small { color: var(--muted); font-size: 12px; }

/* A department that was never set. Named, not blanked — and never sorted to
   the top of a table whose value is naming people. */
.unassigned { font-style: italic; color: var(--muted); }
[data-gap="department"] { border-left: 2px dashed var(--amber); }