:root {
  --qv-ink: #0e2329;
  --qv-petrol: #16333b;
  --qv-petrol-2: #1e404a;
  --qv-stone: #f1eee6;
  --qv-stone-2: #eae4d6;
  --qv-slate: #4a5a5d;
  --qv-gold: #d7a54a;
  /* Darkened from #bf4738, which sat at 3.87:1 on its own soft background and so failed
     WCAG AA for body text. It is the colour of the pills that say overdue, expired, failed
     and revoked - the ones a compliance manager scans a dashboard looking for, and the ones
     that matter most to whoever cannot quite read them. 4.54:1 now. */
  --qv-alert: #ad4033;
  --qv-alert-soft: #f3ddd8;
  --qv-surface: #fbfaf5;
  --qv-white: #fff;
  --qv-line: #e2dccc;
  --qv-petrol-soft: #e4ebea;
  --qv-track: #dcd6c6;
  --qv-font: Optima, "Optima nova", Candara, "Gill Sans", "Gill Sans MT", "Segoe UI", system-ui, sans-serif;
  --qv-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --qv-radius: 14px;
  --qv-radius-sm: 10px;
  --qv-control-height: 42px;
  --qv-shadow-sm: 0 1px 2px rgba(14, 35, 41, .05);
  --qv-shadow: 0 1px 2px rgba(14, 35, 41, .04), 0 10px 26px rgba(14, 35, 41, .07);
  --qv-focus: rgba(22, 51, 59, .24);
}

/* One field.
   Height, padding, border colour and corner radius were declared separately by the invite
   form, the people filters, the certificate search, the sign-in link row and the dashboard
   filters - five opinions about what a text box is. Two of them ended up on the same row as a
   button and stood two pixels taller than it, which is the kind of thing nobody can name and
   everybody can see.
   Declared here as one rule so a field added tomorrow is the same field. Written with real
   selectors rather than :where() so it beats the per-screen leftovers it replaces; a screen
   that genuinely needs something different can still say so with a class. */
:is(.csl-single-page, .csl-login-shell, .csl-dashboard, .csl-company-dashboard, .csl-course, .csl-knowledge-check, .csl-certificate-verifier, .csl-tutor-workspace)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select) {
  box-sizing: border-box;
  min-height: var(--qv-control-height);
  padding: 0 12px;
  border: 1px solid var(--csl-line, var(--qv-line));
  border-radius: var(--csl-control-radius, 10px);
  background: var(--qv-white);
  color: var(--csl-ink, var(--qv-ink));
  font: inherit;
}
/* A checkbox at the browser's default 13px is a hard thing to hit with a thumb, and these are
   how somebody selects the people they are about to assign training to. Radios are left alone:
   the brand colour picker hides its radio from sight and puts the swatch in its place, so
   sizing them here would put two controls where there is one.
   The accent colour also makes a ticked box look like part of this product rather than part of
   the operating system. */
:is(.csl-single-page, .csl-login-shell, .csl-dashboard, .csl-company-dashboard, .csl-course, .csl-knowledge-check, .csl-certificate-verifier, .csl-tutor-workspace)
  input[type="checkbox"] {
  width: 20px;
  height: 20px;
  /* A flex row will squeeze a box down to 16px wide and leave it 20 tall, which reads as a
     rendering fault rather than as a checkbox. */
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--csl-accent, var(--qv-petrol));
}

/* A textarea is the one field that is allowed to be taller: it holds more than a line. */
:is(.csl-single-page, .csl-login-shell, .csl-dashboard, .csl-company-dashboard, .csl-course, .csl-knowledge-check, .csl-certificate-verifier, .csl-tutor-workspace) textarea {
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--csl-line, var(--qv-line));
  border-radius: var(--csl-control-radius, 10px);
  background: var(--qv-white);
  color: var(--csl-ink, var(--qv-ink));
  font: inherit;
}

:where(.csl-single-page, .csl-login-shell, .csl-dashboard, .csl-course, .csl-knowledge-check, .csl-certificate-verifier, .csl-tutor-workspace) {
  --csl-ink: var(--qv-ink);
  --csl-muted: var(--qv-slate);
  --csl-line: var(--qv-line);
  --csl-border: var(--qv-line);
  --csl-soft: var(--qv-stone);
  --csl-accent: var(--qv-petrol);
  --csl-accent-hover: var(--qv-petrol-2);
  --csl-accent-soft: var(--qv-petrol-soft);
  --csl-action: var(--qv-petrol);
  --csl-action-hover: var(--qv-petrol-2);
  --csl-brand: var(--qv-petrol);
  --csl-login-accent: var(--qv-petrol);
  --csl-danger: var(--qv-alert);
  --csl-danger-soft: var(--qv-alert-soft);
  --csl-focus: var(--qv-focus);
  --csl-control-radius: var(--qv-radius-sm);
  --csl-control-height: var(--qv-control-height);
  color: var(--qv-ink);
  font-family: var(--qv-font);
}

.csl-lms-portal-page {
  background: var(--qv-stone);
}

.csl-lms-portal-page .wp-block-post-title {
  display: none;
}

/* Written for a site running somebody else's theme, where main is whatever that theme made
   it. The Quovia theme has its own portal shell, which already says where the page begins -
   and these two disagreed by four pixels and twenty-four, so the lesson screen sat slightly
   wider and slightly lower than every other portal page on the same site. Defensive CSS
   should stop at the point something is defending it. */
.csl-lms-portal-page main:not(.qv-portal-main) {
  margin-block-start: 24px !important;
}

.csl-lms-portal-page :where(.site-main, .entry-content, .wp-block-post-content) {
  min-width: 0;
}

.csl-login-shell {
  background: var(--qv-stone);
}

/* Every card in the portal, wherever it is rendered. Content Studio's panels used to define
   their own surface and line in a stylesheet printed from PHP, which is why that screen read
   as a different application however carefully its colours were matched by hand. */
.csl-login-card,
.csl-dashboard-card,
.csl-dashboard-table-wrap,
.csl-dashboard-empty,
.csl-compliance-queue,
.csl-compliance-reports,
.csl-evidence-timeline,
.csl-company-invite-form,
.csl-company-invitations,
.csl-knowledge-check,
.csl-company-dashboard .csl-dashboard-section,
.csl-tutor-panel,
.csl-tutor-editor,
.csl-tutor-metrics article,
.csl-tutor-scorm,
.csl-quiz-import,
.csl-review-queue {
  border-color: var(--qv-line);
  background: var(--qv-surface);
}

.csl-login-card {
  /* Falls back to petrol, but yields to the company's own colour when the sign-in page is
     reached through their portal link. This rule loads after csl.css at equal specificity,
     so writing the petrol flat here silently won the cascade and the client's colour never
     appeared however carefully it was set upstream. */
  border-top-color: var(--csl-login-accent, var(--qv-petrol));
  border-radius: var(--qv-radius);
  box-shadow: var(--qv-shadow);
}

.csl-product-brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  color: var(--qv-ink);
  font-size: calc(18px * var(--csl-a11y-scale, 1));
  font-weight: 700;
  line-height: 1;
}

.csl-product-brand img {
  width: 34px;
  height: 34px;
}

.csl-login-company-logo + .csl-dashboard-kicker {
  margin-top: 4px;
}

/* The portal shells take their column from csl.css and their distance from the edge of the
   screen from the page around them. Subtracting 40px again here inset them a second time, so
   the content sat 20px further in than the mark above it - and left the two disagreeing about
   where the page begins. The lesson and course screens joined that shell, so they left here
   too; the certificate verifier is reached signed-out and draws its own page. */
.csl-certificate-verifier {
  width: min(1180px, calc(100% - 40px));
  box-sizing: border-box;
}

.csl-dashboard-header,
.csl-company-dashboard .csl-dashboard-header,
.csl-tutor-header {
  border-color: var(--qv-line) !important;
  border-top-color: var(--qv-petrol) !important;
  border-radius: var(--qv-radius) !important;
  background: var(--qv-surface) !important;
  box-shadow: var(--qv-shadow-sm);
}

/* The header of every surface, drawn once. Content Studio was in the rule above - which sets
   the colour of the top rule - but not in this one, which sets its width and the padding. It
   therefore drew its own 4px rule from a token of its own, and when that token was retired the
   rule silently vanished while the colour rule stayed: a header that looked almost right.
   Two rules for one thing is how "almost right" happens. */
.csl-dashboard-header,
.csl-company-dashboard .csl-dashboard-header,
.csl-tutor-header {
  box-sizing: border-box;
  padding: 28px !important;
  border: 1px solid var(--qv-line) !important;
  border-top: 4px solid var(--qv-petrol) !important;
}

.csl-learner-dashboard .csl-dashboard-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.csl-learner-dashboard .csl-dashboard-header > :first-child {
  margin-top: 0;
}

.csl-dashboard-kicker,
.csl-certificate-verifier-kicker,
.csl-knowledge-heading > span,
.csl-company-section-heading .csl-dashboard-kicker {
  color: var(--qv-slate) !important;
  font-size: calc(11px * var(--csl-a11y-scale, 1));
  letter-spacing: .14em;
}

.csl-dashboard-card,
.csl-dashboard-filters,
.csl-dashboard-table-wrap,
.csl-dashboard-empty,
.csl-compliance-queue,
.csl-compliance-reports,
.csl-evidence-timeline,
.csl-company-invite-form,
.csl-company-invitations,
.csl-knowledge-check,
.csl-company-dashboard .csl-dashboard-section,
.csl-tutor-panel,
.csl-tutor-editor,
.csl-tutor-metrics article,
.csl-tutor-scorm,
.csl-quiz-import,
.csl-review-queue {
  border-radius: var(--qv-radius-sm);
}

.csl-dashboard-filters,
.csl-company-people-filters,
.csl-company-seat-summary,
.csl-company-login-share,
.csl-course-enrolment {
  border-color: var(--qv-line);
  background: var(--qv-stone);
}

.csl-dashboard-table th {
  color: var(--qv-slate);
  background: var(--qv-stone);
  letter-spacing: .08em;
}

.csl-dashboard-table td {
  color: var(--qv-ink);
}

.csl-dashboard-table tbody tr:hover {
  background: var(--qv-petrol-soft);
}

.csl-dashboard-progress,
.csl-course-progress-bar {
  background: var(--qv-track);
}

.csl-dashboard-progress span,
.csl-course-progress-bar span {
  background: var(--qv-petrol);
}

.csl-dashboard-pill-completed,
.csl-dashboard-pill-valid,
.csl-company-status-active,
.csl-company-status-accepted,
.csl-tutor-status.publish {
  color: var(--qv-petrol);
  background: var(--qv-petrol-soft);
}

.csl-dashboard-pill-in_progress,
.csl-dashboard-pill-expiring_soon,
.csl-company-status-pending,
.csl-company-status-not_sent {
  color: #6d4b0b;
  background: #f5ead1;
}

.csl-dashboard-pill-not_passed,
.csl-dashboard-pill-overdue,
.csl-dashboard-pill-expired,
.csl-dashboard-pill-revoked,
.csl-company-status-suspended,
.csl-company-status-cancelled,
.csl-company-status-expired,
.csl-company-status-failed {
  color: var(--qv-alert);
  background: var(--qv-alert-soft);
}

.csl-dashboard-type-badge-course {
  color: var(--qv-petrol);
  background: var(--qv-petrol-soft);
}

.csl-dashboard-type-badge-lesson {
  color: #6d4b0b;
  background: #f5ead1;
}

/* Deliberate, not an oversight: the company dashboard is Quovia's screen and wears Quovia's
   colours whatever brand colour the client has on file. Kept !important so a per-company
   accent cannot be introduced here by accident - if that ever becomes wanted, it is a
   decision to take on purpose. The client's colour does appear elsewhere: on their sign-in
   page and on the certificate, both places their own people or an outside reader see. This
   screen is the one their manager works inside, and it stays ours. */
.csl-company-dashboard {
  --csl-accent: var(--qv-petrol) !important;
  --csl-accent-hover: var(--qv-petrol-2) !important;
  --csl-accent-soft: var(--qv-petrol-soft) !important;
  --csl-focus: var(--qv-focus) !important;
}

.csl-company-dashboard .csl-dashboard-kicker {
  color: var(--qv-slate) !important;
}

.csl-player-wrap {
  border-radius: var(--qv-radius);
}

/* Learner-facing content pages share the same visual grammar as portal dashboards. */
/* Width and centring come from the shared shell now; what stays here is the space above and
   below, which is this screen's own rhythm rather than the column it sits in. */
.csl-single-page {
  margin: clamp(28px, 5vw, 64px) auto;
  padding: 0 !important;
}

.csl-content-header {
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--qv-line);
  border-top: 4px solid var(--qv-petrol);
  border-radius: var(--qv-radius);
  background: var(--qv-surface);
  box-shadow: var(--qv-shadow-sm);
}

.csl-content-kicker {
  margin: 0 0 7px;
  color: var(--qv-slate);
  font-size: calc(11px * var(--csl-a11y-scale, 1));
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.csl-content-header .csl-single-title {
  max-width: 850px;
  margin: 0;
  color: var(--qv-ink);
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

body.csl-lms-content-page {
  min-height: 100vh;
  background: var(--qv-stone);
}

body.csl-lms-content-page .csl-single-page {
  padding-top: 0;
}

.csl-single-content,
.csl-single-content > .csl-lesson,
.csl-single-content > .csl-course {
  min-width: 0;
}

.csl-single-content > :first-child,
.csl-single-content > .csl-lesson > :first-child,
.csl-single-content > .csl-course > :first-child {
  margin-top: 0;
}

.csl-single-page .csl-lesson,
.csl-single-page .csl-course {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
}

.csl-single-page .csl-player-wrap,
.csl-single-page .csl-lesson-briefing,
.csl-single-page .csl-knowledge-check,
.csl-single-page .csl-content-flag {
  width: 100%;
  max-width: none;
}

.csl-course-progress,
.csl-course-outline {
  box-sizing: border-box;
  border: 1px solid var(--qv-line);
  border-radius: var(--qv-radius);
  background: var(--qv-surface);
  box-shadow: var(--qv-shadow-sm);
}

.csl-course-progress {
  margin: 0 0 24px;
  padding: clamp(22px, 3vw, 30px);
}

.csl-course-progress-heading {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
}

.csl-course-progress-heading h2,
.csl-course-outline-heading h2 {
  margin: 0;
  color: var(--qv-ink);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
}

.csl-course-progress-value {
  flex: 0 0 auto;
  margin: 0;
  color: var(--qv-petrol);
  font-size: clamp(28px, 4vw, 42px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.csl-course-progress-summary {
  margin: 10px 0 14px;
  color: var(--qv-slate);
}

.csl-course-progress-bar {
  height: 10px;
  margin-top: 0;
}

.csl-course-enrolment,
.csl-course-certificate {
  margin-top: 16px;
}

.csl-course-outline {
  overflow: hidden;
}

.csl-course-outline-heading {
  padding: clamp(22px, 3vw, 30px);
  border-bottom: 1px solid var(--qv-line);
}

.csl-course-lessons {
  margin: 0;
}

.csl-course-lesson {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 88px;
  padding: 18px clamp(20px, 3vw, 30px);
  border-top: 0;
  border-bottom: 1px solid var(--qv-line);
  transition: background-color .14s ease;
}

.csl-course-lesson:last-child {
  border-bottom: 0;
}

.csl-course-lesson:hover {
  background: var(--qv-petrol-soft);
}

.csl-course-step {
  width: 34px;
  height: 34px;
  background: var(--qv-petrol-soft);
  color: var(--qv-petrol);
}

.csl-course-lesson-main h3 {
  color: var(--qv-ink);
  font-size: calc(19px * var(--csl-a11y-scale, 1));
  line-height: 1.3;
}

.csl-course-lesson-main p {
  row-gap: 8px;
}

.csl-course-mode,
.csl-course-status,
.csl-course-detail {
  padding: 4px 9px;
  line-height: 1.45;
}

.csl-lesson-briefing,
.csl-preview-banner {
  border-color: var(--qv-line);
  border-left-color: var(--qv-gold);
  border-radius: var(--qv-radius-sm);
  background: var(--qv-surface);
}

.csl-lesson-briefing-kicker,
.csl-preview-banner strong {
  color: var(--qv-petrol);
}

@media (max-width: 640px) {
  .csl-lms-portal-page main > .wp-block-group.alignfull {
    box-sizing: border-box;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .csl-lms-portal-page :where(main:not(.qv-portal-main), .wp-block-post-content, .entry-content) {
    box-sizing: border-box;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 16px !important;
  }

  /* The page column is declared once, in csl.css, and the distance from the edge of the
     screen belongs to the page around it. This was a third description of the same thing -
     in a third file, loading last, so it quietly won - and it put the content 12px further
     in than the brand mark above it. */
  .csl-certificate-verifier {
    width: min(100% - 24px, 1180px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .csl-single-page {
    margin: 20px auto 32px;
  }

  .csl-content-header {
    margin-bottom: 16px;
    padding: 22px 20px;
  }

  .csl-content-header .csl-single-title {
    font-size: clamp(32px, 9vw, 38px);
    line-height: 1.1;
  }

  .csl-preview-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .csl-preview-banner a {
    width: 100%;
  }

  .csl-course-progress,
  .csl-course-outline-heading {
    padding: 20px;
  }

  .csl-course-lesson {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 20px;
  }

  .csl-course-action {
    grid-column: 1 / -1;
  }

  .csl-course-button {
    width: 100%;
    min-height: var(--csl-control-height, var(--qv-control-height, 42px));
  }

  .csl-course-enrolment,
  .csl-course-certificate {
    width: 100%;
    box-sizing: border-box;
  }

  .csl-single-page .csl-lesson > :where(.csl-start-lesson-btn, .csl-submit-quiz-btn, .csl-restart-lesson-btn, .csl-return-dashboard) {
    width: 100%;
    min-height: var(--csl-control-height, var(--qv-control-height, 42px));
    margin-right: 0;
  }

  .csl-single-page iframe {
    max-width: 100%;
  }

  body.csl-lms-portal-page .csl-tutor-workspace {
    width: 100%;
    padding-inline: 0 !important;
  }

  .csl-dashboard-header,
  .csl-company-dashboard .csl-dashboard-header,
  .csl-tutor-header {
    padding: 20px !important;
  }

  .csl-login-shell {
    min-height: 100svh;
  }

  .csl-product-brand {
    margin-bottom: 18px;
  }
}

@media (min-width: 641px) and (max-width: 900px) {


  .csl-content-header {
    padding: 30px;
  }

  .csl-course-lesson {
    grid-template-columns: 40px minmax(0, 1fr) 120px;
  }

  .csl-course-action,
  .csl-course-button {
    width: 100%;
  }
}

/* The learner's counts - Assigned, In progress, Completed, Overdue - were forced to one
   column here with !important at a breakpoint nothing else used, and again at 480px in
   csl.css. So My Learning ran its counts down the whole page while Compliance and People
   kept theirs two-up, on the same phone, one tap apart. They are number tiles like the
   others and follow the same rule, which is now stated once. */

/* A dedicated product entry point, independent from the active site theme. */
body.csl-login-document {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background: var(--qv-stone);
}

body.csl-login-document .csl-login-page {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}

.csl-login-document .csl-login-shell {
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(470px, 1.18fr);
  place-items: stretch;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: var(--qv-stone);
}

.csl-login-context {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(36px, 6vw, 88px);
  color: var(--qv-white);
  background: var(--qv-petrol);
}

.csl-login-context .csl-product-brand {
  color: var(--qv-white);
}

.csl-login-context .csl-product-brand img {
  width: 38px;
  height: 38px;
}

.csl-login-context-copy {
  max-width: 640px;
  margin: auto 0;
  padding: 64px 0;
}

.csl-login-context-copy p {
  margin: 0 0 16px;
  color: var(--qv-gold);
  font-size: calc(12px * var(--csl-a11y-scale, 1));
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.csl-login-context-copy h1 {
  max-width: 640px;
  margin: 0;
  color: var(--qv-white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
}

.csl-login-context-copy > span {
  display: block;
  max-width: 430px;
  margin-top: 24px;
  color: rgba(255,255,255,.72);
  font-size: calc(16px * var(--csl-a11y-scale, 1));
  line-height: 1.55;
}

.csl-login-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  color: rgba(255,255,255,.72);
  font-size: calc(12px * var(--csl-a11y-scale, 1));
}

.csl-login-trust span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--qv-gold);
}

.csl-login-stage {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: clamp(28px, 6vw, 84px);
}

.csl-login-stage .csl-login-card {
  width: min(470px, 100%);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--qv-line);
  border-top: 1px solid var(--qv-line);
  border-radius: var(--qv-radius);
  background: var(--qv-surface);
  box-shadow: var(--qv-shadow);
}

.csl-login-card h2 {
  margin: 4px 0 10px;
  color: var(--qv-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(36px * var(--csl-a11y-scale, 1));
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}

.csl-login-card > p:not(.csl-dashboard-kicker):not(.csl-login-help) {
  margin: 0 0 22px;
  color: var(--qv-slate);
  line-height: 1.55;
}

.csl-login-notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--qv-petrol);
  background: #eef5f3;
  color: var(--qv-ink);
  font-size: calc(14px * var(--csl-a11y-scale, 1));
  line-height: 1.5;
}

.csl-login-help {
  display: grid;
  gap: 8px;
}

.csl-login-help a {
  color: var(--qv-petrol);
  font-weight: 700;
}

.csl-login-help span,
.csl-login-password-guidance {
  color: var(--qv-slate);
  font-size: calc(13px * var(--csl-a11y-scale, 1));
  line-height: 1.5;
}

.csl-login-password-guidance {
  margin: 10px 0 16px;
}

.csl-login-recovery-form {
  display: grid;
  gap: 16px;
}

.csl-login-recovery-form label {
  margin-top: 0 !important;
}

.csl-login-recovery-actions {
  display: grid;
  gap: 12px;
}

.csl-login-recovery-actions .csl-login-submit,
.csl-login-recovery-actions .csl-login-secondary {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.csl-login-signed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.csl-login-signed-actions .csl-login-secondary {
  margin-left: 0;
}

.csl-login-home-link {
  margin: 24px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--qv-line);
  font-size: calc(13px * var(--csl-a11y-scale, 1)); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }

.csl-login-home-link a {
  color: var(--qv-slate);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.csl-login-home-link a:hover { color: var(--qv-petrol); }
/* The consent control sits in this row as a <button>, because reopening the consent banner is an
   action rather than a destination. It has to read as one of the links beside it, so it borrows
   their type and underline rather than the button chrome, which would out-shout the row. */
.csl-login-home-link .quovia-cookie-preferences {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--qv-slate); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.csl-login-home-link .quovia-cookie-preferences:hover { color: var(--qv-petrol); }
/* The reg. 25 trading disclosure, under the links row: the theme's line, in this card's small
   muted type, so the sign-in document carries what every footer carries. */
.csl-login-disclosure { margin: 12px 0 0; text-align: center; }
.csl-login-disclosure p { margin: 0; color: var(--qv-slate); font-size: calc(12px * var(--csl-a11y-scale, 1)); line-height: 1.5; }
.csl-login-home-link .quovia-cookie-preferences:focus-visible {
  outline: 3px solid var(--qv-focus); outline-offset: 3px; border-radius: 4px;
}

@media (max-width: 900px) {
  .csl-login-document .csl-login-shell {
    grid-template-columns: 1fr;
  }

  .csl-login-context {
    min-height: auto;
    padding: 28px clamp(22px, 7vw, 56px);
  }

  .csl-login-context-copy {
    padding: 44px 0 20px;
  }

  .csl-login-context-copy h1 {
    max-width: 640px;
    font-size: clamp(38px, 10vw, 60px);
  }

  .csl-login-trust {
    display: none;
  }

  .csl-login-stage {
    padding: 32px 20px 48px;
  }
}

@media (max-width: 640px) {
  .csl-login-context-copy > span {
    font-size: calc(14px * var(--csl-a11y-scale, 1));
  }

  .csl-login-stage .csl-login-card {
    padding: 26px 20px;
  }

  .csl-login-card h2 {
    font-size: calc(32px * var(--csl-a11y-scale, 1));
  }
}

.csl-dashboard-action-quiet {
  border-color: var(--qv-petrol);
  background: transparent;
  color: var(--qv-petrol);
}

.csl-dashboard-action-quiet:hover,
.csl-dashboard-action-quiet:focus {
  background: var(--qv-petrol);
  color: #fff;
}

.csl-dashboard-code {
  color: var(--qv-slate);
}

.csl-dashboard-code:hover,
.csl-dashboard-code:focus {
  color: var(--qv-petrol);
}

.csl-dashboard-warning {
  color: var(--csl-danger, #ad4033);
}

.csl-content-return a {
  border-color: var(--qv-petrol);
  color: var(--qv-petrol);
}

.csl-content-return a:hover,
.csl-content-return a:focus {
  background: var(--qv-petrol);
  color: #fff;
}

.csl-course-empty {
  border-color: var(--qv-line, #e2dccc);
  background: var(--qv-parchment, #fbfaf5);
}

/* One accent for every learner-facing surface.
   The base stylesheet defaulted to teal while the theme, the login and Content Studio all
   used petrol, so the primary colour changed as you moved between screens. Per-company
   branding still overrides this, because .csl-company-dashboard has real specificity and
   :where() has none. */
:where(.csl-single-page, .csl-login-shell, .csl-dashboard, .csl-course,
       .csl-knowledge-check, .csl-certificate-verifier, .csl-tutor-workspace) {
  --csl-accent: var(--qv-petrol);
  --csl-accent-hover: var(--qv-petrol-2);
  --csl-accent-soft: var(--qv-petrol-soft);
  --csl-focus: var(--qv-focus);
}

/* One button shape. The dashboards used 6px while Content Studio used 10px, so the
   primary control changed shape as you moved between screens. */
:where(.csl-dashboard-action, .csl-course-button, .csl-login-submit, .csl-tutor-header-actions a) {
  border-radius: var(--qv-radius-sm);
}

/* Integrations tier (API keys, webhooks, SCIM tokens). All three render on the manager Workspace
   with one shared class vocabulary; styled here so the credential lists and the security-sensitive
   one-time secret reveal read as finished product surfaces rather than raw browser defaults. Colours
   come from the Quovia palette, spacing from the shared scale, and font sizes stay relative so the
   accessibility "larger text" control still grows them. */
.csl-api-endpoint {
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid var(--qv-line, #e2dccc);
  border-radius: var(--qv-radius-sm, 10px);
  background: var(--qv-parchment, #fbfaf5);
}

.csl-api-endpoint > code,
.csl-api-endpoint-copy > code,
.csl-api-key-secret {
  display: block;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: var(--qv-radius-sm, 10px);
  background: var(--qv-petrol-soft, #e4ebea);
  color: var(--qv-ink, #0e2329);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

/* An endpoint URL and its Copy button on one row: the URL takes the space and wraps, the button
   stays put. The Copy button uses the shared data-csl-copy handler (see csl.js). */
.csl-api-endpoint-copy {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.csl-api-endpoint-copy > code {
  flex: 1 1 auto;
  min-width: 0;
}
.csl-api-endpoint-copy > .csl-dashboard-action {
  flex: 0 0 auto;
  margin-top: 8px;
}

.csl-notice {
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid var(--qv-petrol-soft, #e4ebea);
  border-radius: var(--qv-radius-sm, 10px);
  background: var(--qv-petrol-soft, #e4ebea);
  color: var(--qv-petrol, #16333b);
}

.csl-notice-error {
  border-color: var(--csl-danger-soft, #f3ddd8);
  background: var(--csl-danger-soft, #f3ddd8);
  color: var(--csl-danger, #ad4033);
}

.csl-api-key-reveal {
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--qv-petrol, #16333b);
  border-radius: var(--qv-radius-sm, 10px);
  background: #fff;
}

.csl-api-key-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.csl-api-key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--qv-line, #e2dccc);
  border-radius: var(--qv-radius-sm, 10px);
  background: #fff;
}

.csl-api-key-main {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csl-api-key-label {
  font-weight: 600;
  color: var(--qv-ink, #0e2329);
}

.csl-api-key-prefix code {
  color: var(--qv-slate, #4a5a5d);
  word-break: break-all;
}

.csl-api-key-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--qv-slate, #4a5a5d);
  font-size: 0.85em;
  text-align: right;
}

.csl-api-key-revoke {
  margin: 0;
}

.csl-api-key-mint {
  margin: 16px 0 0;
}

.csl-api-key-mint label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--qv-ink, #0e2329);
}

.csl-api-key-mint-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.csl-api-key-mint-row input[type="text"],
.csl-api-key-mint-row input[type="url"] {
  flex: 1 1 12rem;
  min-width: 0;
}

.csl-webhook-events {
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--qv-line, #d8d2c6);
  border-radius: 8px;
  display: grid;
  gap: 8px;
}

.csl-webhook-events legend {
  padding: 0 4px;
  font-weight: 600;
  color: var(--qv-ink, #0e2329);
}

.csl-api-key-mint .csl-webhook-event {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-weight: 400;
}

.csl-webhook-event span {
  color: var(--csl-muted, #5b6a70);
}

.csl-webhook-deliveries {
  margin-top: 24px;
}

.csl-webhook-deliveries-title {
  margin: 0 0 8px;
  font-size: 0.95em;
  color: var(--qv-ink, #0e2329);
}

/* Data retention and erasure: the controller's instruction, in the Integrations tier's vocabulary -
   stacked labelled fields, one primary action, and the same list rows for the pending requests and
   the instructions log. */
.csl-retention-form {
  margin: 16px 0 0;
  display: grid;
  gap: 16px;
}

.csl-retention-form label {
  display: grid;
  gap: 8px;
  font-weight: 600;
  color: var(--qv-ink, #0e2329);
}

.csl-retention-form label span {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--qv-slate, #4a5a5d);
}

.csl-retention-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 16px;
}

.csl-retention-form select,
.csl-retention-form input[type="number"],
.csl-retention-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--qv-line, #cbd3d3);
  border-radius: var(--qv-radius-sm, 10px);
  background: #fff;
  font: inherit;
  font-weight: 400;
  color: inherit;
}

.csl-retention-form textarea {
  min-height: 72px;
  resize: vertical;
}

.csl-retention-form .csl-dashboard-actions {
  margin: 0;
}

.csl-workspace-retention-requests,
.csl-workspace-retention-log {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--qv-line, #cbd3d3);
}

.csl-instructions-log .csl-api-key-prefix {
  color: var(--qv-slate, #4a5a5d);
  font-size: 0.85em;
}

/* Leaving Quovia: the return (download) and the closure, two groups in the retention tier's
   vocabulary. The closure form is the one place the portal asks for a typed name. */
.csl-offboarding-export,
.csl-offboarding-close {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--qv-line, #cbd3d3);
}

.csl-offboarding-disclosure > summary {
  cursor: pointer;
}
.csl-offboarding-disclosure > summary h4 {
  display: inline;
}
.csl-offboarding-form {
  margin: 16px 0 0;
  display: grid;
  gap: 16px;
}

.csl-offboarding-form label {
  display: grid;
  gap: 8px;
  font-weight: 600;
  color: var(--qv-ink, #0e2329);
}

.csl-offboarding-form label span {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--qv-slate, #4a5a5d);
}

.csl-offboarding-form input[type="text"],
.csl-offboarding-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--qv-line, #cbd3d3);
  border-radius: var(--qv-radius-sm, 10px);
  background: #fff;
  font: inherit;
  font-weight: 400;
  color: inherit;
}

.csl-offboarding-form textarea { min-height: 72px; resize: vertical; }

.csl-offboarding-form .csl-offboarding-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  font-weight: 400;
}

.csl-offboarding-form .csl-dashboard-actions { margin: 0; }

/* The three Integrations systems (API keys, webhooks, SCIM) live in one card. Separate them so each
   reads as its own group rather than three same-size headings running together. */
.csl-workspace-webhooks,
.csl-workspace-scim {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--qv-line, #cbd3d3);
}

/* AI video (Synthesia) manager panel. Grouped, stacked, labelled fields in the same card and token
   vocabulary as the Integrations tier above, so the two Enterprise panels read as one family. The
   template group is set apart on a parchment panel so a manager reaches for avatar/voice/background
   first (which always uses their script) and only opts into a template deliberately. */
.csl-synthesia-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.csl-synthesia-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.csl-synthesia-group > legend {
  padding: 0;
  color: var(--qv-ink, #0e2329);
  font-size: calc(15px * var(--csl-a11y-scale, 1));
  font-weight: 700;
}

.csl-synthesia-group > p {
  margin: 8px 0 0;
  color: var(--qv-slate, #4a5a5d);
  line-height: 1.55;
}

.csl-synthesia-hint {
  margin: 8px 0 0;
  color: var(--qv-slate, #4a5a5d);
  font-size: 0.9em;
  line-height: 1.5;
}

.csl-synthesia-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 12px;
}

.csl-synthesia-field {
  display: block;
  min-width: 0;
}

.csl-synthesia-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--qv-ink, #0e2329);
  font-size: calc(13px * var(--csl-a11y-scale, 1));
  font-weight: 600;
}

.csl-synthesia-field > span em {
  font-style: normal;
  font-weight: 500;
  color: var(--qv-slate, #4a5a5d);
}

.csl-synthesia-field input[type="text"],
.csl-synthesia-field input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

.csl-synthesia-field-wide {
  grid-column: 1 / -1;
}

.csl-synthesia-check {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: var(--qv-ink, #0e2329);
}

.csl-synthesia-check input {
  flex: 0 0 auto;
}

.csl-synthesia-advanced {
  padding: 16px;
  border: 1px solid var(--qv-line, #cbd3d3);
  border-radius: var(--qv-radius-sm, 10px);
  background: var(--qv-stone, #f1eee6);
}

.csl-synthesia-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--csl-accent-soft, #e4ebea);
  color: var(--csl-accent, #16333b);
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .csl-synthesia-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- accessibility declaration (review form, Content Studio, Workspace) ---------- */
.csl-a11y-declaration {
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid var(--csl-line, var(--qv-line));
  border-radius: 8px;
  display: grid;
  gap: 8px;
}

.csl-a11y-declaration legend {
  padding: 0 4px;
  font-weight: 600;
}

.csl-a11y-required {
  font-weight: 400;
  color: var(--csl-muted);
}

.csl-a11y-help {
  margin: 0;
  color: var(--csl-muted);
  font-size: 0.92em;
}

.csl-a11y-question {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.csl-a11y-answers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}

.csl-a11y-answers label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
}

.csl-a11y-studio {
  margin-top: 16px;
}

.csl-a11y-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.csl-a11y-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 1px solid var(--csl-line, var(--qv-line));
}

.csl-a11y-requirement-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 8px;
}