.csl-single-page { margin: 48px auto; }
.csl-single-title { margin: 0 0 24px; font-size: calc(54px * var(--csl-a11y-scale, 1)); line-height: 1.05; }
.csl-player-wrap { position: relative; width: 100%; max-width: 860px; aspect-ratio: 16 / 9; overflow: hidden; background: #111; border-radius: 8px; margin: 24px 0 16px; }
.csl-player-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.csl-lesson .csl-start-lesson-btn[hidden],
.csl-lesson .csl-submit-quiz-btn[hidden],
.csl-lesson .csl-restart-lesson-btn[hidden],
.csl-lesson .csl-complete-btn[hidden],
.csl-lesson .csl-review-video-btn[hidden] { display: none !important; }
.csl-lesson .csl-return-dashboard[hidden] { display: none !important; }
.csl-lesson .csl-lesson-briefing[hidden] { display: none !important; }
.csl-lesson-briefing { width: min(860px, 100%); box-sizing: border-box; margin: 0 0 18px; padding: 22px; border: 1px solid #d0d7de; border-left: 4px solid var(--csl-accent, #16333b); border-radius: 8px; background: #fff; }
.csl-lesson-briefing-kicker { margin: 0 0 5px; color: var(--csl-accent, #16333b); font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; text-transform: uppercase; }
.csl-lesson-briefing h2 { margin: 0 0 10px; font-size: calc(22px * var(--csl-a11y-scale, 1)); line-height: 1.25; }
.csl-lesson-briefing-copy { color: #374151; }
.csl-lesson-briefing-copy > :first-child { margin-top: 0; }
.csl-lesson-briefing-copy > :last-child { margin-bottom: 16px; }
.csl-lesson-requirements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; overflow: hidden; border: 1px solid #d0d7de; border-radius: 6px; background: #d0d7de; }
.csl-lesson-requirements div { padding: 12px 14px; background: #f6f8fa; }
.csl-lesson-requirements div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.csl-lesson-requirements dt { color: #4b5563; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 600; }
.csl-lesson-requirements dd { margin: 3px 0 0; color: #111827; font-size: calc(16px * var(--csl-a11y-scale, 1)); font-weight: 700; }
/* Generalised from .csl-static-player-wrap: the tracked player needs the same treatment, and a
   finished package left visible is a live application still holding window.API. */
.csl-player-wrap.csl-static-finished iframe { opacity: 0; pointer-events: none; }

/* Loading state for a player frame.
   Sits over the frame while the package downloads. The wrap is a dark #111 surface (set above), so
   this uses the same light-on-dark pair the completion panel uses rather than the page palette, and
   the radius comes from the shared inner-surface token (10px), not a hand-picked value.
   Hidden by adding [hidden]; csl.js does that on the frame's real load event. */
.csl-player-loading { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 16px; box-sizing: border-box; background: #111; border-radius: var(--qv-radius-sm, 10px); text-align: center; z-index: 2; }
.csl-player-loading[hidden] { display: none !important; }
.csl-player-loading-spinner { width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #a7f3d0; border-radius: 999px; animation: csl-player-spin 0.9s linear infinite; }
.csl-player-loading-title { margin: 0; color: #fff; font-size: calc(15px * var(--csl-a11y-scale, 1)); font-weight: 600; }
.csl-player-loading-note { margin: 0; max-width: 34ch; color: rgba(255, 255, 255, 0.78); font-size: calc(13px * var(--csl-a11y-scale, 1)); line-height: 1.45; }
.csl-player-loading-note[hidden] { display: none !important; }
@keyframes csl-player-spin { to { transform: rotate(360deg); } }
/* The spinner is decoration, not information - the words carry the meaning, so motion-sensitive
   readers lose nothing by stopping it. */
@media (prefers-reduced-motion: reduce) { .csl-player-loading-spinner { animation: none; } }
html[data-reduce-motion="true"] .csl-player-loading-spinner { animation: none; }

/* Finished, the box stops being a video and becomes a panel.
   The wrap is locked to 16/9 because it holds a player, and the panel inside it was positioned
   absolutely, so it contributed no height at all: the box stayed video-shaped and overflow: hidden
   cut off whatever did not fit. Measured on a 375px phone, the panel lost 52px at the default text
   size, 63px at large and 40px at largest, and what was cut off was always the last control, which
   is Return to dashboard. overflow-y: auto made it technically reachable by scrolling inside a
   black box, which nobody does, and no fixed ratio can be right for all three text sizes anyway.
   So the panel joins the flow and the ratio becomes a MINIMUM rather than a fixed height: the box
   grows to whatever the words need. Verified at all three text sizes at 375px, zero clipping, and
   desktop measures 860x484 with and without this, unchanged. */
.csl-player-wrap.csl-static-finished { aspect-ratio: auto; height: auto; }
.csl-player-wrap.csl-static-finished::before { content: ''; display: block; float: left; width: 0; padding-top: 56.25%; }
.csl-player-wrap.csl-static-finished > iframe { position: absolute; inset: 0; }
.csl-player-wrap.csl-static-finished .csl-static-complete-panel { position: relative; inset: auto; overflow: visible; }
.csl-static-complete-panel[hidden] { display: none; }
/* The panel covers a box locked to 16/9, so on a phone in portrait it is about 190px tall while its
   own content needs more than that. place-content: center centred the overflow, which pushed the
   heading above the top edge where the wrap's overflow: hidden cut it off - and every step up in
   text size made it worse, which is precisely when a learner cannot afford to lose the heading.
   Two changes: the column now fills the width so long lines wrap instead of running off the side,
   and align-content only centres while the content fits, otherwise it starts at the top and the
   panel scrolls. The min-height further down gives it room enough that scrolling stays a fallback. */
.csl-static-complete-panel { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: safe center; gap: 12px; padding: 24px; overflow-y: auto; text-align: center; color: #fff; background: #111; }
.csl-static-complete-panel strong { font-size: calc(24px * var(--csl-a11y-scale, 1)); line-height: 1.2; }
.csl-static-complete-panel p { margin: 0; color: #d1d5db; }
.csl-static-complete-panel .csl-static-certificate-message { color: #a7f3d0; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
/* The panel is a fixed dark surface, so a link inside it inherited the site's petrol link colour
   and rendered as near-black on near-black: present, underlined and unreadable. Links here take the
   panel's own palette. #a7f3d0 on #111 is about 13:1, so it holds at any text size. */
.csl-static-complete-panel a { color: #a7f3d0; text-decoration: underline; text-underline-offset: 3px; }
.csl-static-complete-panel a:hover { color: #ffffff; }
.csl-static-complete-panel a:focus-visible { outline: 3px solid var(--qv-focus, #f4bd55); outline-offset: 3px; border-radius: 4px; }
/* The return link is a control, not body text, so it keeps the outlined-button treatment it already
   has and must not pick up the underline above. */
.csl-static-complete-panel .csl-return-dashboard { text-decoration: none; color: #fff; }
.csl-recorded-completion .csl-complete-btn { display: none !important; }
.csl-static-complete-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 4px; }
.csl-static-complete-panel .csl-complete-btn, .csl-static-complete-panel .csl-review-video-btn { justify-self: center; margin-top: 4px; }
/* The filled shape for these six used to be declared here as well; the unified button
   system further down the sheet already gives every one of them its fill, shape and label
   colour, through a later, equally specific rule - so this line only restated the primary
   button a second time and even fought the unified treatment of the two secondary ones.
   Removed; the one primary-button token feeds them now. */
.csl-review-video-btn { border: 1px solid #9ca3af; color: #fff; background: transparent; }
.csl-return-dashboard { margin-left: 8px; border: 1px solid var(--csl-accent, #16333b); color: var(--csl-accent, #16333b); background: transparent; }
.csl-static-complete-panel .csl-return-dashboard { margin-left: 0; border-color: #9ca3af; color: #fff; }
.csl-status { margin-top: 12px; font-weight: 600; }
.csl-fallback-tracking-start { margin: 8px 0 0 8px; }
.csl-fallback-tracking-start:focus-visible { outline: 3px solid rgba(22, 51, 59,.24); outline-offset: 2px; }
.csl-fallback-tracking-start:disabled { cursor: not-allowed; opacity: .65; }
@media (max-width: 640px) {
  .csl-lesson-briefing { padding: 18px; }
  .csl-lesson-requirements { grid-template-columns: minmax(0, 1fr); }
}
.csl-login-required-page { max-width: 900px; margin: 48px auto; padding: 0 20px; }
.csl-login-required { margin: 24px 0; padding: 20px; border: 1px solid #d0d7de; border-radius: 8px; background: #f6f8fa; }
.csl-login-required h1 { margin: 0 0 8px; font-size: calc(28px * var(--csl-a11y-scale, 1)); line-height: 1.2; }
.csl-login-required p { margin: 0 0 12px; }
.csl-login-link { display: inline-block; padding: 10px 14px; border-radius: 6px; background: var(--csl-login-accent, var(--csl-accent, #16333b)); color: #fff; text-decoration: none; }
.csl-login-shell { display: grid; min-height: min(720px, calc(100vh - 80px)); place-items: center; padding: 32px 18px; color: #111827; background: #eef2f7; }
.csl-login-card { width: min(460px, 100%); box-sizing: border-box; padding: 32px; border: 1px solid #d0d7de; border-top: 4px solid var(--csl-login-accent, var(--csl-accent, #16333b)); border-radius: 8px; background: #fff; box-shadow: 0 10px 32px rgba(15,23,42,.08); }
.csl-login-preview-note { display: grid; gap: 4px; margin: 0 0 20px; padding: 12px 14px; border-left: 4px solid #2271b1; border-radius: 4px; color: #1e3a5f; background: #eef6fc; font-size: calc(13px * var(--csl-a11y-scale, 1)); line-height: 1.45; }
.csl-login-preview-note strong { font-size: calc(14px * var(--csl-a11y-scale, 1)); }
.csl-login-company-logo { display: block; width: auto; max-width: 180px; height: auto; max-height: 72px; margin: 0 0 20px; object-fit: contain; }
.csl-login-card h1 { margin: 4px 0 8px; font-size: calc(34px * var(--csl-a11y-scale, 1)); line-height: 1.15; }
.csl-login-card > p:not(.csl-dashboard-kicker) { margin: 0 0 20px; color: #4b5563; line-height: 1.5; }
.csl-login-card form label:not(.csl-login-remember) { display: block; margin-top: 16px; color: #374151; font-size: calc(14px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-login-card input[type="text"], .csl-login-card input[type="email"], .csl-login-card input[type="password"] { width: 100%; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); box-sizing: border-box; margin-top: 6px; padding: 10px 12px; background: #fff; font-size: calc(16px * var(--csl-a11y-scale, 1)); }
.csl-login-card input:focus { border-color: var(--csl-login-accent, var(--csl-accent, #16333b)); outline: 2px solid rgba(22, 51, 59,.2); outline-offset: 1px; }
.csl-login-remember { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0; color: #4b5563; font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-login-submit { display: inline-flex; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); align-items: center; justify-content: center; padding: 10px 18px; border: 0; border-radius: 6px; background: var(--csl-login-accent, var(--csl-accent, #16333b)); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.csl-login-card form .csl-login-submit { width: 100%; }
/* The sign-in buttons darken on hover through their own accent fill, kept out of the unified
   primary hover so the company's sign-in colour is never swapped for the platform primary.
   Done with filter, not a background, so it never re-states a flat colour on these controls. */
.csl-login-submit:hover, .csl-login-link:hover { filter: brightness(1.08); }
.csl-login-card input:disabled, .csl-login-card button:disabled { cursor: not-allowed; opacity: .65; }
.csl-login-secondary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; margin-left: 8px; padding: 10px 18px; box-sizing: border-box; border: 1px solid #8c8f94; border-radius: 6px; color: #1f2937; font-weight: 700; text-decoration: none; }
.csl-login-error { margin: 14px 0; padding: 12px 14px; border-left: 4px solid #b42318; border-radius: 4px; color: #7f1d1d; background: #fef2f2; }
.csl-login-help { margin-top: 18px !important; font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-support-readonly form, .csl-support-readonly .csl-dashboard-export { display: none !important; }
.csl-support-preview-bar { position: fixed; z-index: 99998; right: 18px; bottom: 18px; left: 18px; transform: translateY(calc(-1 * var(--csl-selection-bar-h, 0px))); display: flex; gap: 16px; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 12px 16px; border: 1px solid #0f766e; border-radius: 6px; color: #fff; background: #115e59; box-shadow: 0 8px 24px rgba(15,23,42,.2); font: calc(14px * var(--csl-a11y-scale, 1))/1.4 system-ui, sans-serif; }
.csl-support-preview-bar div { display: flex; gap: 8px 14px; align-items: center; min-width: 0; }
.csl-support-preview-bar span { overflow: hidden; opacity: .9; text-overflow: ellipsis; white-space: nowrap; }
.csl-support-preview-bar a { flex: 0 0 auto; color: #fff; font-weight: 700; }
.csl-dashboard.csl-support-access-gate { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 32px; align-items: start; padding: 28px; border: 1px solid var(--csl-line, #cbd5e1); border-top: 4px solid var(--csl-accent, #16333b); border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
@media (max-width: 900px) { .csl-dashboard.csl-support-access-gate { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px; } .csl-support-access-actions a { margin-left: 0; } }
.csl-support-access-gate-copy > span { display: block; margin-bottom: 7px; color: var(--csl-accent, #16333b); font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 800; text-transform: uppercase; }
.csl-support-access-gate-copy > strong { display: block; color: #172033; font-size: calc(24px * var(--csl-a11y-scale, 1)); line-height: 1.25; }
.csl-support-access-gate-copy p { margin: 10px 0 0; color: #526071; }
.csl-support-access-gate form { display: grid; gap: 16px; }
.csl-support-access-gate label { display: grid; gap: 8px; color: #273447; font-weight: 700; }
.csl-support-access-gate select,.csl-support-access-gate textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; background: #fff; font: inherit; font-weight: 400; color: #172033; }
.csl-support-access-gate textarea { min-height: 84px; resize: vertical; }
.csl-support-access-gate textarea::placeholder { color: #7a8798; font-weight: 400; }
.csl-support-access-gate select:focus-visible,.csl-support-access-gate textarea:focus-visible { border-color: var(--csl-accent, #16333b); outline: 2px solid rgba(22, 51, 59,.2); outline-offset: 1px; }
.csl-support-access-company { margin: 0; padding: 11px 13px; border: 1px solid #d4dbe5; border-radius: 6px; background: #f7f9fb; }
.csl-support-access-company small,.csl-support-access-company strong { display: block; }
.csl-support-access-company small { margin-bottom: 2px; color: #647184; }
.csl-support-access-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 4px; }
.csl-support-access-actions button { display: inline-flex; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); align-items: center; justify-content: center; padding: 10px 20px; border: 0; border-radius: 6px; background: var(--csl-accent, #16333b); color: #fff; font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; }
.csl-support-access-actions button:hover { filter: brightness(1.08); }
.csl-support-access-actions a { color: var(--csl-accent, #16333b); font-weight: 700; text-underline-offset: 4px; }
.csl-report-problem { position: fixed; z-index: 99997; right: 18px; bottom: 18px; transform: translateY(calc(-1 * var(--csl-selection-bar-h, 0px))); width: auto; border: 0; border-radius: 999px; color: #172033; background: transparent; font: calc(14px * var(--csl-a11y-scale, 1))/1.45 system-ui, sans-serif; }
.csl-report-problem[open] { width: min(390px, calc(100vw - 24px)); border: 1px solid var(--qv-line, #cbd3d3); border-radius: var(--qv-radius, 14px); background: #fff; box-shadow: 0 10px 32px rgba(15,23,42,.18); }
.csl-report-problem > summary { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 999px; color: #fff; background: var(--csl-accent, #16333b); font-weight: 700; cursor: pointer; list-style: none; box-shadow: 0 6px 20px rgba(15,23,42,.22); }
.csl-report-problem > summary::-webkit-details-marker { display: none; }
.csl-report-problem > summary:hover { filter: brightness(1.08); }
.csl-report-problem[open] > summary { display: flex; padding: 12px 16px; border-radius: calc(var(--qv-radius, 14px) - 1px) calc(var(--qv-radius, 14px) - 1px) 0 0; box-shadow: none; }
.csl-report-problem-icon { display: inline-flex; flex: 0 0 auto; width: 18px; height: 18px; }
.csl-report-problem-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.csl-report-problem-body { max-height: min(650px, calc(100vh - 100px)); padding: 16px; overflow: auto; }
.csl-report-problem label { display: block; margin: 0 0 12px; font-weight: 700; }
/* These set no border and no radius, so each browser drew its own 3D inset default: a heavy
   top-left edge and a light bottom-right one, on the only form a learner uses to tell us
   something is broken. Padding and border now match the design system's input reference. */
.csl-report-problem input, .csl-report-problem select, .csl-report-problem textarea { display: block; width: 100%; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); box-sizing: border-box; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--qv-line, #cbd3d3); border-radius: var(--qv-radius-sm, 10px); background: #fff; color: inherit; font: inherit; }
.csl-report-problem input:focus, .csl-report-problem select:focus, .csl-report-problem textarea:focus { border-color: var(--csl-accent, #16333b); }
.csl-report-problem textarea { min-height: 96px; resize: vertical; }
/* A reference and a status word told the reporter nothing. The reply is the point, so it gets the
   weight, and the reference above it becomes the label rather than the content. */
.csl-report-recent-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--qv-line, #cbd3d3); }
.csl-report-recent-item:first-of-type { margin-top: 6px; }
.csl-report-recent-ref { display: block; color: var(--qv-slate, #5b6b6b); font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-report-recent-response { margin: 4px 0 0; color: inherit; font-size: calc(13px * var(--csl-a11y-scale, 1)); line-height: 1.5; }
.csl-report-problem form > p { color: #5b6473; font-size: calc(12px * var(--csl-a11y-scale, 1)); }
.csl-report-problem button { min-height: var(--csl-control-height, var(--qv-control-height, 42px)); padding: 9px 14px; border: 0; border-radius: var(--qv-radius-sm, 10px); color: #fff; background: var(--csl-accent, #16333b); font-weight: 700; cursor: pointer; }
.csl-report-success, .csl-report-error { margin-bottom: 12px; padding: 10px; border-left: 4px solid #16833d; background: #edf8f0; }
.csl-report-error { border-color: #b42318; background: #fff0ef; }
.csl-report-recent { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.csl-report-recent span { color: #5b6473; font-size: calc(12px * var(--csl-a11y-scale, 1)); }
.csl-course { margin: 28px 0; max-width: 920px; }
.csl-course-progress { margin-bottom: 18px; }
.csl-course-progress strong { display: inline-block; margin-right: 10px; }
.csl-course-progress-bar { height: 8px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e5e7eb; }
.csl-course-progress-bar span { display: block; height: 100%; background: var(--csl-accent, #16333b); }
.csl-course-enrolment { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; padding: 8px 10px; border: 1px solid #d0d7de; border-radius: 6px; color: #334155; background: #f8fafc; }
.csl-course-enrolment strong { margin: 0; }
.csl-course-certificate { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; padding: 8px 10px; border: 1px solid #b7e4c7; border-radius: 6px; color: #005c12; background: #edf9f0; }
.csl-course-certificate strong { margin: 0; }
.csl-course-certificate span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.csl-course-certificate a { color: #005c12; font-weight: 700; }
.csl-course-lessons { margin: 0; padding: 0; list-style: none; }
.csl-course-lesson { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid #d0d7de; }
.csl-course-lesson:last-child { border-bottom: 1px solid #d0d7de; }
.csl-course-step { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #eef6f6; color: var(--csl-accent, #16333b); font-weight: 700; }
.csl-course-lesson-main h3 { margin: 0 0 4px; font-size: calc(18px * var(--csl-a11y-scale, 1)); }
.csl-course-lesson-main p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.csl-course-mode, .csl-course-status, .csl-course-detail { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: calc(12px * var(--csl-a11y-scale, 1)); line-height: 1.5; background: #f1f5f9; }
.csl-course-status-complete { color: #005c12; background: #dff5e3; }
.csl-course-status-failed { color: #8a2424; background: #f8d7da; }
.csl-course-status-in-progress { color: #5c3b00; background: #fff4ce; }
.csl-course-status-not-started { color: #50575e; background: #f0f0f1; }
/* .csl-course-button's fill and .csl-course-button-disabled's grey both lived here and were
   both restated below - the unified button system feeds the button's fill from the primary
   token, and the one disabled rule sets the legible grey. Two more copies of one thing. */
.csl-dashboard { color: #1f2937; }
/* A select is as wide as its widest option unless told otherwise, and these are filled
   with real course titles and "Name - Role (email)" lines, so on a phone a single long
   title used to push the whole page sideways and clip everything to the right of it.
   Nothing in a dashboard may be wider than the space it was given. */
.csl-dashboard select, .csl-dashboard input, .csl-dashboard textarea, .csl-dashboard button { max-width: 100%; min-width: 0; box-sizing: border-box; }
.csl-dashboard-header { margin-bottom: 22px; }
.csl-dashboard-kicker { margin: 0 0 6px; color: var(--csl-accent, #16333b); font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.csl-dashboard-header h2 { margin: 0; font-size: calc(34px * var(--csl-a11y-scale, 1)); line-height: 1.15; }
.csl-dashboard-header p { max-width: 900px; margin: 10px 0 0; color: #4b5563; }
.csl-dashboard-header form.csl-dashboard-header-action { display: inline-block; }
.csl-dashboard-header form.csl-dashboard-header-action button { border: 0; cursor: pointer; }
/* A control that follows text stands away from it.
   Nothing said how far, so the distance was whatever the block above happened to carry:
   "Save starter training" ended up flush against the sentence explaining what it saves - a
   measured zero pixels - because the note had no bottom margin, the fieldset had none, and
   the button had no top margin. Three things not setting a value is not a decision.
   One step from the scale, stated once, for every control that ends a passage of text. */
:is(.csl-dashboard, .csl-company-dashboard, .csl-single-page, .csl-tutor-workspace, .csl-login-shell, .csl-knowledge-check)
  :is(p, ul, ol, dl, fieldset, table, .csl-dashboard-table-wrap, .csl-dashboard-empty)
  + :is(button, .csl-dashboard-action, .csl-dashboard-export, .csl-row-actions, .csl-signed-in-out) {
  margin-top: 16px;
}
/* And the block above gives up its own bottom margin in this one adjacency, so the distance
   is sixteen rather than sixteen plus whatever that block happened to carry. Adding to an
   unknown is the same unpredictability the rule is here to end - the first version of this
   turned a measured zero into forty. */
:is(.csl-dashboard, .csl-company-dashboard, .csl-single-page, .csl-tutor-workspace, .csl-login-shell, .csl-knowledge-check)
  :is(p, ul, ol, dl, fieldset, table, .csl-dashboard-table-wrap, .csl-dashboard-empty):has(
    + :is(button, .csl-dashboard-action, .csl-dashboard-export, .csl-row-actions, .csl-signed-in-out)
  ) {
  margin-bottom: 0;
}

/* The selection bar.
   It appears when somebody is selected and says how many, then takes you to the form. It sits
   above the page rather than in it, because the thing it is about - a list you are working
   down - is the thing that made the form scroll away.
   Deliberately not a copy of the form's controls: which operation, which course, by when are
   the form's questions, and a second set of them is a second set to keep in step. */
.csl-selection-bar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: auto;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--csl-line, #d0d7de);
  border-radius: var(--qv-radius, 14px);
  background: var(--qv-white, #fff);
  box-shadow: var(--qv-shadow, 0 1px 2px rgba(14, 35, 41, .04), 0 10px 26px rgba(14, 35, 41, .07));
}
.csl-selection-bar[hidden] { display: none; }
.csl-selection-bar p { margin: 0; }
.csl-selection-bar strong { font-size: calc(18px * var(--csl-a11y-scale, 1)); }
/* Only the count line's own word ("selected") is muted. This used to read
   `.csl-selection-bar span`, which also caught the label inside the Assign button - its
   text is wrapped in a <span> for the icon to sit beside it - and painted white-on-petrol
   down to slate-on-petrol at 1.85:1, i.e. invisible. The button label inherits its colour
   from the button; nothing here should override it. */
.csl-selection-bar p span { color: var(--csl-muted, #4b5563); }

@media (max-width: 640px) {
  /* Full width and flush to the edge on a phone, where 20px on each side of a bar that is
     already the width of the screen is 40px of nothing. */
  .csl-selection-bar {
    right: 0;
    bottom: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--qv-radius, 14px) var(--qv-radius, 14px) 0 0;
    padding: 12px;
  }
  .csl-selection-bar .csl-row-actions { flex: 1 1 100%; }
  .csl-selection-bar .csl-dashboard-action { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .csl-selection-bar { transition: none; }
}

/* The assignment dialog - one modal for who + what + when, opened by every "Assign training"
   button on the page. A native <dialog>, so the browser gives the backdrop, the focus trap and
   Escape-to-close for nothing; styled as the product's own card. */
.csl-assign-dialog,
.csl-secret-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--csl-line, #d0d7de);
  border-radius: var(--qv-radius, 14px);
  background: var(--qv-white, #fff);
  color: var(--csl-ink, #0e2329);
  box-shadow: var(--qv-shadow, 0 10px 40px rgba(14, 35, 41, .18));
}
.csl-assign-dialog::backdrop,
.csl-secret-dialog::backdrop { background: rgba(14, 35, 41, .45); }

/* The one-time credential reveal (API key, SCIM token, webhook secret). It shares the assign
   dialog's frame and head/close controls so the product has one modal, then adds its own body:
   the secret in the monospace .csl-api-key-secret block, a Copy control and a dismiss. Rendered
   open server-side and upgraded to a real modal by csl.js; still visible inline without script. */
.csl-secret-dialog-inner { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.csl-secret-dialog-intro { margin: 0; font-size: calc(15px * var(--csl-a11y-scale, 1)); }
.csl-secret-dialog-inner .csl-api-key-secret { margin: 0; font-size: calc(15px * var(--csl-a11y-scale, 1)); }
.csl-secret-dialog-foot { display: flex; flex-wrap: wrap; gap: 12px; }
.csl-secret-dialog-help { margin: 0; font-size: calc(13px * var(--csl-a11y-scale, 1)); }
@media (max-width: 640px) {
  .csl-secret-dialog { width: 100vw; max-width: 100vw; margin: 0; border-radius: 0; }
  .csl-secret-dialog-foot .csl-dashboard-action { flex: 1 1 auto; justify-content: center; }
}

/* The "Joined via SSO" tag beside a person's name: secondary to the name, with a clear gap
   before it. It used to be styled only by an inline <style> printed inside a people block that
   the Training page does not render, so there the tag sat unstyled and jammed against the name.
   In the shared sheet it applies wherever the tag appears. */
/* The line between the learners (the tick-list) and the managers and tutors below them in the
   company team table, so staff who take no training are not mixed into the people you assign to. */
.csl-team-staff-divider th { padding: 18px 12px 8px; border-top: 2px solid var(--csl-line, #d0d7de); text-align: left; font-weight: 400; }
.csl-team-staff-divider strong { font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.csl-person-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef1ee;
  color: #55606f;
  font-size: calc(11px * var(--csl-a11y-scale, 1));
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
}
.csl-assign-form { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 20px; max-height: calc(100vh - 48px); overflow-y: auto; }
.csl-assign-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.csl-assign-dialog-head h4 { margin: 0; font-size: calc(19px * var(--csl-a11y-scale, 1)); }
.csl-assign-dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--csl-muted, #4b5563); font-size: calc(26px * var(--csl-a11y-scale, 1)); line-height: 1; cursor: pointer; }
.csl-assign-dialog-close:hover { background: var(--csl-soft, #f1eee6); color: var(--csl-ink, #0e2329); }
.csl-assign-who { margin: 0; font-size: calc(14px * var(--csl-a11y-scale, 1)); }
/* The in-dialog people picker for a training-first assignment: a searchable, scrollable list
   of the team, so individuals can be chosen without leaving the modal. */
.csl-assign-people { margin: 0; padding: 0; border: 0; min-width: 0; }
.csl-assign-people > legend { padding: 0; font-weight: 600; font-size: calc(15px * var(--csl-a11y-scale, 1)); }
.csl-assign-people-search input { width: 100%; min-height: var(--qv-control-height, 42px); box-sizing: border-box; margin: 8px 0; }
.csl-assign-people-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--csl-line, #d0d7de); border-radius: 8px; padding: 4px; }
.csl-assign-person { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 6px; font-weight: 400; }
.csl-assign-person:hover { background: var(--csl-soft, #f1eee6); }
.csl-assign-person input { margin: 0; flex: 0 0 auto; }
.csl-assign-form > label { display: flex; flex-direction: column; gap: 8px; margin: 0; font-weight: 600; }
.csl-assign-form > label > span { font-weight: 400; color: var(--csl-muted, #4b5563); font-size: calc(12px * var(--csl-a11y-scale, 1)); }
.csl-assign-form select,
.csl-assign-form input[type="datetime-local"] { width: 100%; min-height: var(--qv-control-height, 42px); box-sizing: border-box; }
.csl-assign-other { margin: 0; padding-top: 4px; border-top: 1px solid var(--csl-line, #d0d7de); }
.csl-assign-other > summary { cursor: pointer; padding-top: 12px; color: var(--csl-muted, #4b5563); font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-assign-other > label { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-weight: 600; }
.csl-assign-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.csl-assign-dialog-foot .csl-dashboard-action[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 640px) {
  /* Full screen on a phone: a 520px card with a datetime picker and a course list is taller
     than the viewport, and a modal you cannot see the bottom of is a modal you cannot submit. */
  .csl-assign-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border: 0; border-radius: 0; }
  .csl-assign-form { max-height: 100vh; }
  .csl-assign-dialog-foot .csl-dashboard-action { flex: 1 1 auto; justify-content: center; }
}

/* Tabs within a page.
   Content Studio had these - Overview, Lessons, Courses - declared in its own stylesheet,
   which was fine while it was the only screen with more than one view. People needs the same
   thing, and a second tab strip written beside the first is how a product ends up with two
   answers to one question. Declared once, used by both.

   The current tab is a span rather than a link: there is nowhere to go, and a link that does
   nothing is a small lie. The count beside each label is what makes tabs safe to use here -
   a pending invitation hidden behind a tab nobody opens is worse than a long page. */
/* Asked for on its own, the invitations block stops pretending to be a disclosure: the tab
   above it already is one, and a summary that cannot be collapsed is a heading. */
.csl-company-invitations[data-csl-solo] > summary { list-style: none; cursor: default; pointer-events: none; }
.csl-company-invitations[data-csl-solo] > summary::-webkit-details-marker { display: none; }

.csl-page-tabs { display: flex; gap: 24px; margin: 24px 0; border-bottom: 1px solid var(--csl-line, #d0d7de); }
.csl-page-tabs a, .csl-page-tabs .is-current {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 12px 2px;
  border-bottom: 3px solid transparent;
  color: var(--csl-muted, #4b5563);
  font-size: calc(15px * var(--csl-a11y-scale, 1));
  text-decoration: none;
  white-space: nowrap;
}
.csl-page-tabs a:hover, .csl-page-tabs a:focus-visible { color: var(--csl-accent-hover, #1e404a); }
.csl-page-tabs .is-current { border-bottom-color: var(--csl-accent, #16333b); color: var(--csl-ink, #0e2329); font-weight: 700; }
.csl-page-tabs b {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--csl-soft, #f1eee6);
  color: var(--csl-muted, #4b5563);
  font-size: calc(12px * var(--csl-a11y-scale, 1));
  font-weight: 700;
}
.csl-page-tabs .is-current b { background: var(--csl-accent-soft, #e4ebea); color: var(--csl-accent, #16333b); }
@media (max-width: 640px) {
  /* One scrolling row rather than a wrapped block: a tab strip that changes height as the
     labels wrap stops reading as a strip. */
  .csl-page-tabs { gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .csl-page-tabs::-webkit-scrollbar { display: none; }
}

/* Workspace navigation. Sits above the page heading rather than beside it, so on a phone it
   wraps into rows instead of squeezing the title. The current page is a span, not a link:
   there is nowhere to go, and a link that does nothing is a small lie. */
/* The page shell. Both portal shells are the same object - a column of at most 1180px,
   centred, with the distance from the edge of the screen coming from the page around it. They
   were declared separately, and Content Studio's copy carried an extra 20px that nothing else
   had. */
.csl-dashboard, .csl-company-dashboard, .csl-tutor-workspace, .csl-single-page { width: 100%; max-width: 1180px; margin: 0 auto; }

.csl-workspace-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; padding: 4px; border: 1px solid var(--csl-line, #d0d7de); border-radius: var(--csl-control-radius, 10px); background: var(--qv-surface, #fff); }
.csl-workspace-nav-link { display: inline-flex; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); align-items: center; padding: 8px 16px; border-radius: calc(var(--csl-control-radius, 10px) - 2px); color: var(--csl-muted, #4b5563); font-size: calc(15px * var(--csl-a11y-scale, 1)); font-weight: 700; text-decoration: none; }
a.csl-workspace-nav-link:hover { color: var(--csl-accent, #16333b); background: var(--csl-soft, #f1eee6); }
.csl-workspace-nav-link.is-current { color: #fff; background: var(--csl-accent, #16333b); }

/* Workspace page. A brand colour a client chose should be visible on the page that tells
   them what their workspace is set up with, not described in words alone. */
.csl-workspace-brand { display: flex; gap: 16px; align-items: center; }
.csl-workspace-swatch { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(15, 23, 42, .15); border-radius: var(--csl-control-radius, 10px); }
.csl-workspace-brand strong { display: block; }
.csl-workspace-list { margin: 0; padding-left: 20px; }
/* Field-level feedback. Never colour alone: the wording carries the meaning, so it still
   reads for anybody who cannot tell the two apart. */
.csl-field-note { margin: 6px 0 0; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 600; }
.csl-field-note-warn { color: #92400e; }
.csl-field-note-ok { color: #15803d; }
/* Rows per page, beside the pager it governs. */
.csl-per-page { display: inline-flex; gap: 8px; align-items: center; margin-right: 14px; color: #4b5563; font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-per-page select { min-height: var(--csl-control-height, var(--qv-control-height, 42px)); padding: 6px 8px; background: #fff; }
/* Role, as a shape rather than a word. Each colour clears WCAG AA against its own background,
   checked by contrast-and-focus.php - a pale pill with pale text is decoration, not a label. */
.csl-role-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; white-space: nowrap; }
.csl-role-pill-learner { background: #e0f2fe; color: #075985; }
.csl-role-pill-tutor { background: #ede9fe; color: #5b21b6; }
.csl-role-pill-company_manager { background: #1f2937; color: #fff; }
/* Sticky column headings, where they can actually stick.
   .csl-dashboard-table-wrap carries overflow-x for narrow screens, and any overflow other
   than visible makes an element the scroll container - so a sticky heading inside it would
   pin itself to a box that never scrolls vertically, and do nothing at all while looking
   like it had been implemented. Above 1100px these tables fit without horizontal scrolling,
   so the wrap can release the overflow and the heading sticks to the page as intended.
   Below that the wrap keeps scrolling sideways and the heading does not stick, which is the
   honest outcome rather than a broken one - and on a phone the table stacks into cards, where
   there is no column heading to lose in the first place. */
@media (min-width: 901px) {
  .csl-dashboard-table-wrap { overflow-x: visible; }
  .csl-dashboard-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 #d0d7de; }
}
/* The selection scope. Stated on the page rather than left to be inferred from a tick-box,
   because the difference between "these twenty-five" and "all one hundred and forty-five" is
   only visible after the training has been assigned. */
.csl-select-scope { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--qv-gold, #d7a54a); border-radius: var(--csl-control-radius, 10px); background: #fffbeb; color: #713f12; }
/* One export per report, each saying what is in it before it is downloaded. A row of bare
   buttons makes a manager guess which file to send to an auditor. */
.csl-report-exports { display: grid; gap: 12px; margin: 0 0 22px; }
.csl-report-export { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: var(--csl-control-radius, 10px); background: #f8fafc; }
.csl-report-export strong { display: block; }
.csl-report-export span { display: block; margin-top: 2px; }
/* Who you are signed in as. Deliberately quiet - it answers a question rather than asking
   for attention - but never hidden behind a menu: on a shared machine the wrong account is
   found by reading, not by clicking. */
.csl-signed-in { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-left: auto; }
.csl-signed-in-who { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; }
.csl-signed-in-label { color: #6b7280; font-size: calc(12px * var(--csl-a11y-scale, 1)); }
.csl-signed-in-who strong { overflow-wrap: anywhere; font-size: calc(14px * var(--csl-a11y-scale, 1)); }
.csl-signed-in-detail { color: #4b5563; font-size: calc(12px * var(--csl-a11y-scale, 1)); overflow-wrap: anywhere; }
.csl-signed-in-note { padding: 2px 9px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-workspace-nav-links { display: flex; flex-wrap: wrap; gap: inherit; align-items: center; }
/* Content Studio is another workspace, not another view of this one, so it is set apart by a
   divider rather than sitting in the row as a fifth equal tab. */
.csl-workspace-nav-aside { margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--csl-line, #d0d7de); }
@media (max-width: 640px) {
  /* One shape on every screen.
     The bar was a single row that wrapped, so its layout was decided by how many links it
     happened to hold and how long the person's name happened to be: Compliance collapsed one
     way, Content Studio another, a tutor's workspace a third, and the Sign out button landed
     wherever there was room. Four screens, four layouts, none of them chosen.
     Written here as two rows in a fixed order - who you are, then where you can go - so the
     bar looks the same on a phone whoever is signed in and whatever they can reach. */
  .csl-workspace-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; }

  .csl-signed-in {
    order: -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    width: 100%;
    margin-left: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--csl-line, #d0d7de);
  }
  .csl-signed-in-who { grid-column: 1; }
  /* Sign out spans both rows of the identity block so it stays level with the name instead of
     dropping below a company name that happens to wrap. */
  .csl-signed-in-out { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .csl-signed-in-note { grid-column: 1; justify-self: start; }

  /* Nothing to navigate to: the divider under the identity block was separating it from an
     empty row. */
  .csl-workspace-nav-bare .csl-signed-in { padding-bottom: 0; border-bottom: 0; }

  .csl-workspace-nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .csl-workspace-nav-link { justify-content: center; text-align: center; }
  /* An odd number of links would otherwise leave one sitting alone beside a gap. */
  .csl-workspace-nav-links > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Content Studio is set apart by a vertical rule on a wide screen. Stacked, that rule has
     nothing to divide, and the gap above it says the same thing more quietly. */
  .csl-workspace-nav-aside { margin-left: 0; padding-left: 0; border-left: 0; }
}
/* Row actions. The icon sits inside the shared control, so it inherits every measurement of
   the button system rather than starting a second opinion about size or colour. */
.csl-row-action { gap: 8px; }
.csl-action-icon { flex: 0 0 auto; opacity: .82; }
.csl-row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Branding controls. The swatch is the control - the radio itself is hidden from sight but
   not from the keyboard or a screen reader, so it still focuses, still announces its name and
   still says which one is chosen. A picture that only a mouse can operate is not a control. */
.csl-brand-colours, .csl-brand-logo, .csl-brand-certificates { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.csl-brand-colours legend, .csl-brand-logo legend, .csl-brand-certificates legend { padding: 0; color: #374151; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-brand-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.csl-brand-swatch { display: flex; gap: 8px; align-items: center; padding: 8px 12px 8px 9px; border: 1px solid #e5e7eb; border-radius: var(--csl-control-radius, 10px); background: #f8fafc; font-weight: 600; cursor: pointer; transition: border-color .14s ease, background-color .14s ease; }
.csl-brand-swatch:hover { border-color: var(--csl-accent, #16333b); background: var(--csl-accent-soft, #edf7f7); }
.csl-brand-swatch input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.csl-brand-swatch-chip { width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid rgba(15, 23, 42, .15); border-radius: 5px; }
.csl-brand-swatch:has(input:checked) { border-color: var(--csl-accent, #16333b); background: #edf7f7; box-shadow: inset 3px 0 0 var(--csl-accent, #16333b); }
.csl-brand-swatch:has(input:focus-visible) { outline: 3px solid var(--csl-accent, #16333b); outline-offset: 2px; }
.csl-brand-logo-current { display: flex; gap: 16px; align-items: center; margin: 10px 0; padding: 12px; border: 1px solid #e5e7eb; border-radius: var(--csl-control-radius, 10px); background: #fff; }
.csl-brand-logo-current img { max-width: 180px; max-height: 56px; object-fit: contain; }
.csl-brand-logo-remove, .csl-brand-certificate-check { display: flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.csl-brand-logo-field { display: block; margin: 10px 0 6px; color: #374151; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-brand-logo input[type="file"] { max-width: 100%; }
.csl-brand-certificates { margin-bottom: 16px; }
.csl-workspace-list li { margin-bottom: 4px; }

/* Compliance page. The filter tiles are counts and links at once: a number a manager cannot
   act on is trivia, so each one narrows the list below it. Only the overdue tile is allowed
   to raise its voice, and only when it is not zero - an alert that is always on the screen
   stops being read. */
.csl-compliance-header { padding-bottom: 18px; }
.csl-compliance-headline { margin: 10px 0 0; font-size: calc(19px * var(--csl-a11y-scale, 1)); line-height: 1.45; }
.csl-compliance-headline strong { font-size: calc(24px * var(--csl-a11y-scale, 1)); }
.csl-compliance-headline span { display: block; margin-top: 4px; color: var(--csl-muted, #4b5563); font-size: calc(15px * var(--csl-a11y-scale, 1)); }
.csl-compliance-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.csl-compliance-filter { display: flex; min-width: 116px; flex: 1 1 116px; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--csl-line, #d0d7de); border-radius: var(--csl-control-radius, 10px); background: var(--qv-surface, #fff); color: inherit; text-decoration: none; }
.csl-compliance-filter b { font-size: calc(26px * var(--csl-a11y-scale, 1)); font-weight: 700; line-height: 1.1; }
.csl-compliance-filter span { color: var(--csl-muted, #4b5563); font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-compliance-filter:hover { border-color: var(--csl-accent, #16333b); }
.csl-compliance-filter.is-current { border-color: var(--csl-accent, #16333b); box-shadow: inset 0 -3px 0 var(--csl-accent, #16333b); }
.csl-compliance-filter.is-alert b { color: var(--csl-danger, #ad4033); }
.csl-compliance-filter.is-alert { border-color: var(--csl-danger, #ad4033); }
.csl-compliance-list-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.csl-compliance-list-head h3 { margin: 0; }
.csl-compliance-search { display: flex; gap: 8px; align-items: center; }
.csl-compliance-search input[type=search] { box-sizing: border-box; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); min-width: 230px; padding: 8px 12px; border: 1px solid var(--csl-line, #9aa6a7); border-radius: var(--csl-control-radius, 10px); font: inherit; }
@media (max-width: 640px) {
  /* A strip of number tiles: two columns on a phone, wherever it is. Compliance, People and
     Content Studio each described this differently - one of them with !important at a
     breakpoint of its own - so the same row of counts stacked one way on one screen and
     another way on the next. An odd last tile takes the full width rather than sitting alone
     beside a gap. */
  .csl-compliance-filters,
  .csl-tutor-metrics,
  .csl-dashboard-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .csl-compliance-filters > :last-child:nth-child(odd),
  .csl-tutor-metrics > :last-child:nth-child(odd),
  .csl-dashboard-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .csl-compliance-list-head { align-items: stretch; flex-direction: column; }
  .csl-compliance-search { flex-wrap: wrap; }
  .csl-compliance-search input[type=search] { flex: 1 1 100%; min-width: 0; }
}

/* The learner's one next action, above the summary rather than behind it. Sized to be read
   first without shouting: it is the ordinary state, not an alert. The overdue variant is the
   only one that raises its voice, because that is the only one that has earned it. */
.csl-next-up { margin: 0 0 20px; padding: 20px 22px; border: 1px solid var(--csl-line, #d0d7de); border-left: 4px solid var(--csl-accent, #16333b); border-radius: var(--csl-control-radius, 10px); background: var(--qv-surface, #fff); }
.csl-next-up-overdue { border-left-color: var(--csl-danger, #ad4033); }
.csl-next-up .csl-dashboard-kicker { margin: 0 0 6px; }
.csl-next-up-body { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.csl-next-up h3 { margin: 0; font-size: calc(20px * var(--csl-a11y-scale, 1)); line-height: 1.25; }
.csl-next-up-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 0; color: var(--csl-muted, #4b5563); font-size: calc(14px * var(--csl-a11y-scale, 1)); }
.csl-next-up-meta span + span::before { content: '\00B7'; margin-right: 14px; }
@media (max-width: 640px) {
  .csl-next-up-body { align-items: stretch; flex-direction: column; }
  .csl-next-up-body .csl-dashboard-action { width: 100%; }
}

.csl-dashboard-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.csl-company-dashboard .csl-dashboard-cards { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.csl-company-dashboard .csl-dashboard-header { padding: 22px; border-top: 4px solid var(--csl-accent, #16333b); border-radius: 6px; background: #f8fafc; }
.csl-company-dashboard .csl-dashboard-kicker { color: var(--csl-accent, #16333b); }
.csl-company-dashboard-identity { display: flex; gap: 24px; align-items: center; }
.csl-company-dashboard-identity img { flex: 0 0 auto; width: auto; max-width: 180px; height: auto; max-height: 68px; object-fit: contain; }
.csl-company-subnav { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; overflow-x: auto; margin: 0 0 22px; padding: 6px; border: 1px solid #d0d7de; border-radius: 8px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.csl-company-subnav a { flex: 0 0 auto; padding: 8px 14px; border-radius: 6px; color: #374151; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; text-decoration: none; white-space: nowrap; }
.csl-company-subnav a:hover, .csl-company-subnav a:focus-visible { color: #fff; background: var(--csl-accent, #16333b); }
/* The subnav above is sticky, so a jump that scrolls its target to the very top of the
   viewport parks it underneath the bar and shows the section after it instead. Every id
   the subnav can reach needs this, and #csl-bulk-enrolments was missing from the list -
   "Assign training" was the one jump that landed behind the thing you clicked. The test
   in tests/portal-anchors-runtime.php now reads this selector and fails if an anchor in
   the subnav is not in it. */
#csl-compliance-exceptions, #csl-review-queue, #csl-compliance-reports, #csl-evidence-timeline, #csl-company-people, #csl-company-groups, #csl-company-team, #csl-bulk-enrolments, #csl-course-progress { scroll-margin-top: 64px; }
.csl-company-login-share { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(260px, 1.35fr) auto; gap: 12px; align-items: center; margin: -8px 0 24px; padding: 14px 16px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; }
.csl-company-login-share strong, .csl-company-login-share span { display: block; }
.csl-company-login-share span { margin-top: 3px; color: #6b7280; font-size: calc(12px * var(--csl-a11y-scale, 1)); }
.csl-company-login-share input { width: 100%; min-width: 0; height: var(--csl-control-height, var(--qv-control-height, 42px)); box-sizing: border-box; padding: 0 12px; border: 1px solid var(--csl-line, #d0d7de); border-radius: var(--csl-control-radius, 10px); background: var(--qv-surface, #fbfaf5); color: var(--csl-ink, #374151); }
.csl-dashboard-card { min-height: 112px; padding: 16px; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; }
.csl-dashboard-card span { display: block; margin-bottom: 8px; color: #4b5563; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-dashboard-card strong { display: block; margin-bottom: 6px; color: #111827; font-size: calc(30px * var(--csl-a11y-scale, 1)); line-height: 1; }
.csl-dashboard-card p { margin: 0; color: #6b7280; font-size: calc(13px * var(--csl-a11y-scale, 1)); line-height: 1.35; }
.csl-dashboard-card-warning { border-color: #fed7aa; background: #fff7ed; }
.csl-dashboard-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0 0 28px; padding: 16px; border: 1px solid #d0d7de; border-radius: 8px; background: #f8fafc; }
/* The filters share the row evenly instead of each one sizing to its longest option.
   The Training select is full of real course titles, so left to itself it took roughly
   a third of the row and pushed Export CSV onto a line of its own. */
.csl-dashboard-filters label { display: grid; flex: 1 1 190px; gap: 4px; min-width: 0; color: #374151; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-dashboard-filters select { min-height: var(--csl-control-height, var(--qv-control-height, 42px)); padding: 7px 34px 7px 10px; background-color: #fff; color: #111827; }
/* Export is not a filled button. It used to be listed here as one and then outlined again
   under ".csl-dashboard :is(.csl-dashboard-export, ...)" below, which won on specificity - so
   the fill never showed and the two rules simply disagreed on paper. It is the outlined,
   white-background export action, defined in that one place now. */
.csl-dashboard-filters button { min-height: var(--csl-control-height, var(--qv-control-height, 42px)); box-sizing: border-box; padding: 9px 14px; border: 1px solid var(--csl-accent, #16333b); border-radius: 5px; background: var(--csl-accent, #16333b); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
/* end, not center: this is a button sitting next to Filter on a row of controls the
   container bottom-aligns, and centring it left it floating a few pixels high. */
.csl-dashboard-filters > a:not(.csl-dashboard-export) { align-self: end; color: var(--csl-accent, #16333b); font-weight: 700; }
/* Pushed to the far end of the filter bar, which is where that was wanted - and only there.
   Written unscoped, it also applied inside a row of header actions and shoved Export CSV to
   the opposite side of the header from the button beside it, so a pair read as two strays.
   The row decides the arrangement; a button in it does not push itself around. */
.csl-dashboard-filters .csl-dashboard-export { margin-left: auto; }
.csl-dashboard-section { margin-top: 28px; }
.csl-dashboard-section h3 { margin: 0 0 12px; font-size: calc(20px * var(--csl-a11y-scale, 1)); line-height: 1.25; }
.csl-dashboard-empty { padding: 18px; border: 1px solid var(--csl-line, #d0d7de); }
.csl-dashboard-empty strong { display: block; margin-bottom: 6px; }
.csl-dashboard-empty p { margin: 0; color: #4b5563; }
.csl-dashboard-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; }
.csl-dashboard-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: calc(14px * var(--csl-a11y-scale, 1)); }
.csl-dashboard-table th, .csl-dashboard-table td { padding: 13px 14px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.csl-dashboard-table th { color: #374151; background: #f8fafc; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-dashboard-table tr:last-child td { border-bottom: 0; }
.csl-dashboard-table code { display: inline-block; max-width: 190px; overflow-wrap: anywhere; padding: 2px 5px; border: 1px solid #e5e7eb; border-radius: 5px; background: #f9fafb; color: #111827; font-size: calc(12px * var(--csl-a11y-scale, 1)); }
/* #6b7280 cleared 4.5:1 on pure white and nowhere else - 4.19:1 on the stone panels, and it
   is placed on cards, the person account panel and tinted rows, not only on white. Taken from
   the muted token now, which is dark enough (petrol slate #4a5a5d on portal, #5c6675 as the
   fallback) to hold on every surface it actually lands on. */
.csl-dashboard-muted { display: block; margin-top: 3px; color: var(--csl-muted, #5c6675); font-size: calc(12px * var(--csl-a11y-scale, 1)); line-height: 1.35; }
.csl-dashboard-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #eef2f7; color: #374151; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; line-height: 1.35; white-space: nowrap; }
.csl-dashboard-pill-completed, .csl-dashboard-pill-valid, .csl-dashboard-pill-active { background: #dcfce7; color: #166534; }
.csl-dashboard-pill-in_progress, .csl-dashboard-pill-expiring_soon { background: #fef3c7; color: #92400e; }
.csl-dashboard-pill-overdue, .csl-dashboard-pill-expired, .csl-dashboard-pill-revoked, .csl-dashboard-pill-not_passed, .csl-dashboard-pill-suspended { background: #fee2e2; color: #991b1b; }
/* Content-lifecycle statuses (Content Studio), on the same shared pill: published is live
   (green), ready-for-review is in-flight (amber), changes-requested and archived are closed
   or blocked (red); a plain draft keeps the neutral base. */
.csl-dashboard-pill-publish { background: #dcfce7; color: #166534; }
.csl-dashboard-pill-pending { background: #fef3c7; color: #92400e; }
.csl-dashboard-pill-changes, .csl-dashboard-pill-archived { background: #fee2e2; color: #991b1b; }
.csl-dashboard-type-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; background: #eef2f7; color: #374151; font-size: calc(11px * var(--csl-a11y-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.csl-dashboard-type-badge-course { background: #e0e7ff; color: #3730a3; }
.csl-dashboard-type-badge-lesson { background: #ecfeff; color: #155e75; }
.csl-dashboard-progress { width: 120px; height: 8px; margin: 3px 0 5px; overflow: hidden; border-radius: 999px; background: #e5e7eb; }
.csl-dashboard-progress span { display: block; height: 100%; background: var(--csl-accent, #16333b); }
.csl-dashboard-progress-label { display: inline-block; margin-right: 8px; font-size: calc(13px * var(--csl-a11y-scale, 1)); }
/* One shell for every top-level block on the company dashboard. These used to be styled
   individually and had drifted into four conventions on one page - three cards at 18px
   padding, one at 22px, and the whole bottom half (people, groups, team, progress) with
   no card at all, just a rule above it. The result was section headings starting at
   three different left edges as you scrolled, which reads as broken rather than as
   deliberate grouping. Anything that is a section of this dashboard belongs here. */
.csl-compliance-queue,
.csl-compliance-reports,
.csl-evidence-timeline,
.csl-company-people,
.csl-company-dashboard .csl-dashboard-section { margin: 0 0 28px; padding: 18px; border: 1px solid var(--csl-line, #d0d7de); background: var(--qv-surface, #fff); }
.csl-company-section-heading { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.csl-company-section-heading h3 { margin: 0; font-size: calc(20px * var(--csl-a11y-scale, 1)); line-height: 1.25; }
.csl-company-section-heading > div:first-child > p:last-child { margin: 7px 0 0; color: #4b5563; }
.csl-company-seat-summary { flex: 0 0 auto; min-width: 150px; padding: 12px 14px; border: 1px solid #d0d7de; border-radius: 8px; background: #f8fafc; text-align: right; }
.csl-company-seat-summary strong, .csl-company-seat-summary span { display: block; }
.csl-company-seat-summary strong { color: #111827; font-size: calc(22px * var(--csl-a11y-scale, 1)); line-height: 1.1; }
.csl-company-seat-summary span { margin-top: 4px; color: #6b7280; font-size: calc(12px * var(--csl-a11y-scale, 1)); }
.csl-company-alert { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid; border-radius: 4px; }
.csl-company-alert-success { border-color: #16803c; color: #14532d; background: #f0fdf4; }
.csl-company-alert-error { border-color: #b42318; color: #7f1d1d; background: #fef2f2; }
.csl-company-invite-form { padding: 18px; border: 1px solid #d0d7de; border-radius: 8px; background: #f8fafc; }
/* Shipped with no styling at all, so it read as three loose paragraphs adrift between
   the invite form and the Groups table. It states a standing rule the manager did not
   set and cannot change here, so it is a quiet note, not an alert. */
.csl-autojoin-note { margin: 16px 0 0; padding: 13px 15px; border: 1px solid #d0d7de; border-left: 4px solid var(--csl-accent, #16333b); border-radius: 6px; background: #f8fafc; }
.csl-autojoin-note p { margin: 0; }
.csl-autojoin-note__title { margin-bottom: 3px; }
.csl-autojoin-note__meta { margin-top: 5px; color: #4b5563; font-size: calc(13px * var(--csl-a11y-scale, 1)); line-height: 1.5; }
/* A quiet FYI, not a call to action - a neutral grey border rather than the accent
   colour used on notes that invite a click, since there is nothing to do with this one. */
.csl-company-roster-note { margin: 16px 0 0; padding: 13px 15px; border: 1px solid #d0d7de; border-left: 4px solid #9ca3af; border-radius: 6px; background: #f8fafc; }
.csl-company-roster-note p { margin: 0; }
.csl-company-roster-note__title { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: space-between; }
.csl-company-roster-note__title span { color: #6b7280; font-weight: 400; }
.csl-company-roster-note__names { margin-top: 5px; color: #374151; }
.csl-company-roster-note__meta { margin-top: 6px; color: #6b7280; font-size: calc(13px * var(--csl-a11y-scale, 1)); line-height: 1.5; }
.csl-company-invite-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.csl-company-invite-form label, .csl-company-course-options legend { color: #374151; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-company-invite-form input[type="text"], .csl-company-invite-form input[type="email"], .csl-company-invite-form input[type="datetime-local"] { width: 100%; min-width: 0; box-sizing: border-box; margin-top: 6px; font-size: calc(15px * var(--csl-a11y-scale, 1)); }
.csl-company-invite-form select { width: 100%; min-width: 0; box-sizing: border-box; margin-top: 6px; }
.csl-company-invite-form input:focus { border-color: var(--csl-accent, #16333b); outline: 2px solid rgba(22, 51, 59, .18); outline-offset: 1px; }
.csl-company-course-options { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.csl-company-course-options legend span { color: #6b7280; font-weight: 500; }
.csl-company-course-options > p { margin: 8px 0 0; color: #4b5563; }
.csl-company-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.csl-company-course-grid label { display: flex; min-width: 0; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f8fafc; font-weight: 600; }
.csl-company-course-grid input { flex: 0 0 auto; margin-top: 2px; }
.csl-company-course-grid span { overflow-wrap: anywhere; }
/* Groups: a compact block, because it sits between two much larger tables. */
.csl-company-group-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; padding: 14px; border: 1px solid #d0d7de; border-radius: 8px; background: #f8fafb; }
.csl-company-group-form label { font-weight: 600; }
.csl-company-group-form input[type="text"] { flex: 1 1 200px; min-width: 0; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); padding: 7px 10px; background: #fff; }
.csl-company-group-form .csl-dashboard-action { flex: 0 0 auto; border: 0; cursor: pointer; }
.csl-company-group-members { margin-top: 16px; }
.csl-company-group-members fieldset { margin: 0; padding: 14px; border: 1px solid #d0d7de; border-radius: 8px; }
.csl-company-group-members legend { padding: 0 6px; font-size: .9375rem; }
.csl-company-group-members .csl-dashboard-action { margin-top: 10px; border: 0; cursor: pointer; }
.csl-company-text-action-danger { border: 0; background: none; padding: 0; color: #b42318; cursor: pointer; font: inherit; }
@media (max-width: 640px) {
    /* flex-direction:column turns the 1 1 200px basis/grow into VERTICAL sizing, which
       balloons the inputs into tall, textarea-like boxes - reset growth so height stays
       driven by min-height/padding only, with width filled by align-items:stretch. */
    .csl-company-group-form { flex-direction: column; align-items: stretch; }
    .csl-company-group-form input[type="text"] { flex: 0 1 auto; }
}
/* The list mixes courses and single lessons; the kind is a quiet second line, not a shout. */
.csl-company-course-grid .csl-course-kind { display: block; margin-top: 2px; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-style: normal; color: #6b7280; }
.csl-company-invite-actions { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.csl-company-invite-actions .csl-dashboard-action { flex: 0 0 auto; border: 0; cursor: pointer; }
.csl-company-people-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0 16px; padding: 12px; border: 1px solid #d0d7de; border-radius: 6px; background: #f8fafc; }
.csl-company-people-filters input, .csl-company-people-filters select {  }
.csl-company-people-filters input { min-width: 240px; flex: 1 1 260px; }
.csl-company-row-actions select { max-width: 150px; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); }
.csl-company-approval-check { display: inline-flex; gap: 4px; align-items: center; font-size: calc(12px * var(--csl-a11y-scale, 1)); white-space: nowrap; }
/* Four rows shared by every column - caption, hint, control, then the group's live
   count - so the controls sit on one line however much hint text is above them. Each
   column carries a different amount of hint ("Due date" has one line, "Or a whole
   group" has two, the other two have none), and left to stack independently that put
   the four controls on three different baselines, which is what made a tidy row of
   fields look thrown together. */
.csl-company-enrolment-tools { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.2fr) minmax(190px, 1fr) auto; grid-template-rows: auto auto auto auto; gap: 12px; align-items: start; margin: 0 0 16px; padding: 16px; border: 1px solid #b8c7d1; border-left: 4px solid var(--csl-accent, #16333b); border-radius: 6px; background: #fff; }
.csl-company-enrolment-tools label { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 4px; color: #374151; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
/* The caption is a bare text node, so it has no selector of its own - it lands in row 1
   by auto-placement once everything that follows it is placed explicitly. */
.csl-company-enrolment-tools label > span { grid-row: 2; align-self: start; }
.csl-company-enrolment-tools label > select, .csl-company-enrolment-tools label > input { grid-row: 3; }
.csl-company-enrolment-tools label > [data-csl-group-preview] { grid-row: 4; }
.csl-company-enrolment-tools label span { color: #6b7280; font-weight: 400; }
@supports not (grid-template-rows: subgrid) {
  .csl-company-enrolment-tools { grid-template-rows: none; }
  .csl-company-enrolment-tools label { grid-row: auto; grid-template-rows: none; }
  .csl-company-enrolment-tools label > span, .csl-company-enrolment-tools label > select,
  .csl-company-enrolment-tools label > input, .csl-company-enrolment-tools label > [data-csl-group-preview] { grid-row: auto; }
}
.csl-company-enrolment-tools select, .csl-company-enrolment-tools input { min-height: var(--csl-control-height, var(--qv-control-height, 42px)); padding: 7px 10px; background: #fff; }
/* Explicitly in the first column on the row under the fields, rather than wherever
   auto-placement drops it - the number of fields changes (no group picker until a
   company has groups) and the button should not move about with it. */
.csl-company-enrolment-tools button { grid-column: 1; align-self: start; }
.csl-company-enrolment-tools > p { grid-column: 1 / -1; margin: 0; color: #6b7280; font-size: calc(12px * var(--csl-a11y-scale, 1)); }
.csl-company-enrolment-tools label [data-csl-group-preview] { margin-top: 4px; font-weight: 700; color: var(--csl-accent, #16333b); }
.csl-compliance-queue .csl-company-section-heading { margin-bottom: 14px; }
.csl-compliance-queue .csl-company-section-heading > strong { min-width: 70px; padding: 8px 10px; border-radius: 5px; background: #fef3c7; color: #92400e; text-align: center; }
.csl-compliance-priority { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-compliance-priority-high { background: #fee2e2; color: #991b1b; }
.csl-compliance-priority-medium { background: #fef3c7; color: #92400e; }
.csl-compliance-queue form { margin: 0; }
.csl-compliance-queue button { border: 0; background: transparent; cursor: pointer; }
.csl-compliance-reports nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; border-bottom: 1px solid #e5e7eb; }
.csl-compliance-reports nav a { padding: 10px 12px; border-bottom: 3px solid transparent; color: #4b5563; font-weight: 700; text-decoration: none; }
.csl-compliance-reports nav a.active { border-bottom-color: var(--csl-accent, #16333b); color: #111827; }
.csl-compliance-report-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.csl-compliance-report-head .csl-dashboard-export { margin: 0; }
.csl-evidence-timeline > form { display: flex; gap: 12px; align-items: center; margin: 0 0 18px; }
.csl-evidence-timeline > form label { font-weight: 700; }
.csl-evidence-timeline > form select { min-width: 300px; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); padding: 7px 10px; background: #fff; }
.csl-evidence-timeline ol { position: relative; margin: 0; padding: 0; list-style: none; }
.csl-evidence-timeline li { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 24px; padding: 14px 0; border-top: 1px solid #e5e7eb; }
.csl-evidence-timeline time { color: #6b7280; font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-evidence-timeline li div > span { display: block; margin-bottom: 3px; color: var(--csl-accent, #16333b); font-size: calc(11px * var(--csl-a11y-scale, 1)); font-weight: 700; text-transform: uppercase; }
.csl-evidence-timeline li strong { display: block; color: #111827; }
.csl-evidence-timeline li p { margin: 3px 0 0; color: #4b5563; }
.csl-company-invite-actions p { margin: 0; color: #6b7280; font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-knowledge-check { margin-top: 24px; padding: 24px; border: 1px solid #d0d7de; border-radius: 8px; color: #1f2937; background: #fff; }
.csl-knowledge-heading > span { color: var(--csl-accent, #16333b); font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 800; text-transform: uppercase; }
.csl-knowledge-heading h3 { margin: 5px 0; font-size: calc(24px * var(--csl-a11y-scale, 1)); }
.csl-knowledge-intro { margin: 0 0 18px; color: #4b5563; }
.csl-knowledge-policy { margin: 0 0 18px; padding-left: 20px; color: #4b5563; }
.csl-knowledge-timer { position: sticky; top: 12px; z-index: 2; margin: 0 0 16px; padding: 10px 12px; border-left: 4px solid #b7791f; border-radius: 4px; color: #713f12; background: #fffbeb; font-weight: 800; }
.csl-knowledge-question { margin: 0 0 16px; padding: 16px; border: 1px solid #d9dee7; border-radius: 6px; }
.csl-knowledge-hint { margin: 2px 0 10px; color: var(--csl-muted, #4b5563); font-size: calc(13px * var(--csl-a11y-scale, 1)); }

.csl-knowledge-question legend { padding: 0 5px; font-weight: 700; }
.csl-screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.csl-knowledge-question-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 0 10px; font-weight: 700; }
.csl-knowledge-question-number { line-height: 1.5; }
.csl-knowledge-question label { display: block; margin-top: 10px; padding: 9px 10px; border: 1px solid #e5e7eb; border-radius: 4px; background: #f8fafc; cursor: pointer; }
.csl-knowledge-question input { margin-right: 6px; }
.csl-knowledge-result { margin-top: 14px; font-weight: 700; }

/* Attestation: the document is the lesson body above; this is the confirmation. Same panel as the
   knowledge check so a learner moving between lesson types sees one product, not two. The inputs
   take the shared field rules; only layout is set here. */
.csl-attestation { margin-top: 24px; padding: 24px; border: 1px solid var(--qv-line, #d0d7de); border-radius: var(--qv-radius-sm, 10px); color: #1f2937; background: #fff; }
.csl-attestation-document { margin: 0 0 16px; }
.csl-attestation-form[hidden], .csl-attestation-panel[hidden], .csl-attestation-error[hidden] { display: none; }
.csl-attestation-previous { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid #b7791f; border-radius: var(--qv-radius-sm, 10px); color: #713f12; background: #fffbeb; }
.csl-attestation-statement { margin: 0 0 16px; padding: 16px; border: 1px solid var(--qv-line, #d0d7de); border-left: 4px solid var(--csl-accent, #16333b); border-radius: var(--qv-radius-sm, 10px); background: var(--qv-stone, #f6f8fa); font-size: calc(17px * var(--csl-a11y-scale, 1)); font-weight: 600; line-height: 1.5; }
.csl-attestation-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--qv-line, #d0d7de); border-radius: var(--qv-radius-sm, 10px); cursor: pointer; }
.csl-attestation-name { display: block; margin: 0 0 16px; font-weight: 700; }
.csl-attestation-name input { display: block; width: 100%; max-width: 420px; margin-top: 8px; }
.csl-attestation-name small { display: block; margin-top: 4px; color: var(--qv-slate, #4b5563); font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 400; }
.csl-attestation-error { margin: 0 0 12px; padding: 12px 16px; border-left: 4px solid var(--csl-danger, #b42318); border-radius: var(--qv-radius-sm, 10px); color: var(--csl-danger, #b42318); background: var(--csl-danger-soft, #fff1f0); font-weight: 700; }
.csl-attestation-panel { margin: 0 0 16px; padding: 16px; border: 1px solid #a7f3d0; border-left: 4px solid #16833d; border-radius: var(--qv-radius-sm, 10px); background: #f0fdf4; }
.csl-attestation-panel:focus { outline: 3px solid var(--qv-focus, #f4bd55); outline-offset: 2px; }
.csl-attestation-panel strong { display: block; margin-bottom: 4px; font-size: calc(18px * var(--csl-a11y-scale, 1)); }
.csl-attestation-panel p { margin: 4px 0 0; }
.csl-attestation-panel a { color: #14532d; text-decoration: underline; text-underline-offset: 3px; }
.csl-attestation + .csl-return-dashboard { margin-top: 16px; }

/* "Is this out of date?": one click from the learner to the people who look after the content. Sits
   under the lesson or course block, quiet until opened; the confirmation replaces it. */
.csl-content-flag { width: min(860px, 100%); box-sizing: border-box; margin: 24px 0 0; border: 1px solid var(--qv-line, #d0d7de); border-radius: var(--qv-radius-sm, 10px); background: #fff; }
.csl-content-flag > summary { padding: 12px 16px; color: var(--csl-accent, #16333b); font-weight: 700; cursor: pointer; }
.csl-content-flag > summary:focus-visible { outline: 3px solid var(--qv-focus, #f4bd55); outline-offset: 2px; border-radius: var(--qv-radius-sm, 10px); }
.csl-content-flag-body { padding: 0 16px 16px; border-top: 1px solid var(--qv-line, #d0d7de); }
.csl-content-flag-body > p { margin: 12px 0; color: var(--qv-slate, #4b5563); }
.csl-content-flag-body > p.csl-content-flag-note { padding: 12px 16px; border-left: 4px solid #b7791f; border-radius: var(--qv-radius-sm, 10px); color: #713f12; background: #fffbeb; }
.csl-content-flag-body label { display: block; margin: 0 0 12px; font-weight: 700; }
.csl-content-flag-body label span { color: var(--qv-slate, #4b5563); font-weight: 400; }
.csl-content-flag-body textarea { display: block; width: 100%; max-width: 560px; min-height: 72px; box-sizing: border-box; margin-top: 4px; resize: vertical; }
.csl-content-flag-done, .csl-content-flag-preview { display: grid; gap: 4px; padding: 12px 16px; border-left: 4px solid #16833d; }
.csl-content-flag-preview { border-left-color: #b7791f; color: #713f12; background: #fffbeb; }
.csl-content-flag-done span, .csl-content-flag-preview span { color: var(--qv-slate, #4b5563); }
@media (max-width: 640px) {
  .csl-content-flag-body .csl-dashboard-action { width: 100%; justify-content: center; }
}
.csl-knowledge-question-text :where(p, ul, ol) { margin: 0 0 7px; }
.csl-knowledge-question-text :where(p, ul, ol):last-child { margin-bottom: 0; }
.csl-knowledge-feedback { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; font-weight: 400; }
.csl-knowledge-feedback > li { padding: 13px 14px; border: 1px solid #d9dee7; border-left-width: 4px; border-radius: 5px; background: #f8fafc; }
.csl-knowledge-feedback > li.is-correct { border-left-color: #16833d; }
.csl-knowledge-feedback > li.is-wrong { border-left-color: #b42318; }
.csl-knowledge-feedback-question { margin-bottom: 5px; font-weight: 700; }
.csl-knowledge-feedback-question :where(p, ul, ol), .csl-knowledge-feedback-explanation :where(p, ul, ol) { margin: 0 0 7px; }
.csl-knowledge-feedback-question :where(p, ul, ol):last-child, .csl-knowledge-feedback-explanation :where(p, ul, ol):last-child { margin-bottom: 0; }
.csl-knowledge-feedback > li > strong { display: inline-block; margin-bottom: 5px; color: #374151; font-size: calc(12px * var(--csl-a11y-scale, 1)); text-transform: uppercase; }
.csl-knowledge-feedback-explanation { color: #4b5563; }
.csl-company-bulk-import { margin: 18px 0; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; }
.csl-company-bulk-import > summary { padding: 14px 16px; color: #1f2937; font-weight: 700; cursor: pointer; }
.csl-company-bulk-import-body { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 24px; padding: 4px 16px 18px; border-top: 1px solid #e5e7eb; }
.csl-company-bulk-import-body h4 { margin: 16px 0 6px; }
.csl-company-bulk-import-body form { padding-top: 14px; }
.csl-company-bulk-import-body form > label { display: block; margin-bottom: 12px; font-weight: 700; }
.csl-company-bulk-import-body form > label input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.csl-company-bulk-import-body fieldset { margin: 14px 0; padding: 12px; border: 1px solid #e5e7eb; }
.csl-company-bulk-import-body fieldset label { display: block; margin-top: 7px; }
.csl-bulk-review { margin: 18px 0; padding: 18px; border: 1px solid #b8c6c8; border-left: 4px solid var(--csl-accent, #16333b); border-radius: 8px; background: #fff; }
.csl-bulk-review h4 { margin: 0; font-size: 1.25rem; }
.csl-bulk-review-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.csl-bulk-review-metrics span { padding: 12px; border: 1px solid #d7dfe0; border-radius: 6px; color: #526071; background: #f7f9f8; }
.csl-bulk-review-metrics strong { display: block; margin-bottom: 3px; color: #172033; font-size: 1.35rem; }
.csl-bulk-review details { margin: 14px 0; }
.csl-bulk-review details > summary { padding: 10px 0; font-weight: 700; cursor: pointer; }
.csl-bulk-review form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.csl-company-people-block { margin-top: 24px; }
.csl-company-people-block h4 { margin: 0 0 10px; font-size: calc(17px * var(--csl-a11y-scale, 1)); }
.csl-company-people-table { min-width: 760px; }
/* Row actions flow inline and wrap. They used to be a forced column, which cost a full
   32px accessible touch target per action in height: a group with three one-word actions
   produced a 138px row for 3 lines of text, so the Groups table towered over the far
   denser team table under it. The access dropdown still takes its own line - it opens a
   panel, so it is not a peer of the plain links beside it. */
/* Wide enough to hold both actions side by side. At 150px they did not fit and wrapped
   onto two lines, which is what made every row of the team table twice as tall as its
   content needed. */
.csl-company-row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 220px; }
/* The progress table's row holds one control rather than a pair, so it does not need the
   width reserved for two - and that table already has eight columns of real content to
   fit before this one is added. */
.csl-progress-row-actions { min-width: 0; }
/* One band per person in the Courses & lessons table, with their training grouped under
   it. The name is stated once, here, instead of repeated down a column - and the band
   carries the person's totals so "how is this person doing" is answered before reading
   a single row. */
.csl-dashboard-table .csl-progress-person th { padding: 11px 14px; border-top: 2px solid #d0d7de; background: #f3f6f9; font-size: calc(13px * var(--csl-a11y-scale, 1)); text-align: left; text-transform: none; letter-spacing: 0; }
/* The flex lives on an inner wrapper, not the th itself - display:flex would stop the
   th being a table cell at all, and its colspan with it. */
.csl-progress-person-inner { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; justify-content: space-between; }
.csl-progress-person-name { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
/* An email address has no natural break points, so on a narrow card it must be allowed
   to break anywhere rather than carry the band past the edge of the screen. */
.csl-progress-person-name .csl-dashboard-muted { overflow-wrap: anywhere; }
/* How much of the company this table is actually showing. The table used to render
   whatever it had been given and say nothing about the rest, so a truncated view was
   indistinguishable from a complete one. */
.csl-progress-count { margin: 0 0 10px; }
.csl-progress-pager { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; margin-top: 14px; }
.csl-progress-pager a { padding: 8px 14px; border: 1px solid var(--csl-brand, #087f8c); border-radius: 6px; color: var(--csl-brand, #087f8c); font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; text-decoration: none; }
.csl-progress-pager a:hover, .csl-progress-pager a:focus-visible { color: #fff; background: var(--csl-accent, #16333b); border-color: var(--csl-accent, #16333b); }
.csl-progress-pager span { color: #4b5563; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-progress-person-name strong { font-size: calc(14px * var(--csl-a11y-scale, 1)); }
.csl-progress-person-summary { color: #4b5563; font-weight: 600; white-space: nowrap; }
.csl-progress-person-overdue { color: #92400e; }
/* This column is the last one in a table that already fills its container, so a panel
   that opens straight down runs off the right edge and is cut in half by the table's
   horizontal scroll box. It hangs leftward from its own control instead.
   The shift is in normal flow rather than absolute, deliberately: absolute positioning
   is invisible to the scroll box, so it gets clipped, and lifting the clipping to fix
   that lets a table wider than its container push the whole page sideways - which it is
   at any window narrower than about 1100px. Staying in flow means the row simply grows
   to fit, at every width, with nothing to clip and nothing to overflow.
   calc(100% - 290px) is the panel's own width measured against the cell, so its right
   edge lands on the cell's right edge whatever the column ends up being. */
.csl-progress-row-actions .csl-company-access-menu { width: 100%; }
.csl-progress-row-actions .csl-company-access-panel { margin-left: calc(100% - 290px); }
/* Both row actions belong to one family, sitting on one line. They used to be two
   different species stacked on two lines - an underlined accent link above a bold
   brand-teal control with a chevron - which read as two unrelated things and made
   every row of the team table two lines tall. Same colour and size now; the primary
   action keeps the underline and the heavier weight, and the disclosure keeps only
   its chevron, so the hierarchy is carried by emphasis rather than by two palettes. */
.csl-company-access-menu { position: relative; width: auto; }
.csl-company-access-menu > summary { display: inline-flex; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); box-sizing: border-box; align-items: center; cursor: pointer; color: var(--csl-accent, #16333b); font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 600; list-style: none; }
.csl-company-access-menu > summary::-webkit-details-marker { display: none; }
.csl-company-access-menu > summary::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.csl-company-access-menu[open] > summary::after { transform: rotate(225deg) translate(-2px,-1px); }
/* This panel repeats on every row of the team table, and the actions in it - change a
   role, suspend someone, remove an empty account - are the occasional ones. It used to
   open taller than the row it belonged to and out-weigh "Assign training", which is the
   action a manager actually came for. It stays deliberately quiet and compact. */
.csl-company-access-panel { display: grid; gap: 8px; width: min(290px, calc(100vw - 54px)); margin-top: 6px; padding: 12px; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.12); }
.csl-company-access-panel p { margin: 0; color: #6b7280; font-size: calc(12px * var(--csl-a11y-scale, 1)); line-height: 1.4; }
.csl-company-access-panel label { display: grid; gap: 4px; color: #344054; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; }
/* The select and the button that applies it are one control, not two stacked ones. */
.csl-company-access-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.csl-company-access-panel select { width: 100%; max-width: none; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); }
.csl-company-access-role button { width: auto; }
.csl-company-access-separator { height: 1px; margin: 0; background: #e2e8f0; }
/* The one "nothing to do in this cell" mark, rendered by CSL_Plugin::no_action_mark(). It was
   #9ca3af - 2.54:1 on white, a dash you could not see - which defeated the point of marking the
   cell at all. It is the muted token now, legible on the row it sits in. */
.csl-no-action { color: var(--csl-muted, #5c6675); }
/* Where role, suspend/reactivate and remove live now that they are out of the Company
   team row - a compact card under the person picker on Person activity timeline, not a
   floating popover, so it does not inherit .csl-company-access-panel's narrow fixed
   width or drop shadow. Capped rather than full-width: this section can run 900px+
   wide, and a role dropdown stretched to match would look like a mistake. */
.csl-person-account-panel { box-sizing: border-box; max-width: 680px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid #d0d7de; border-left: 4px solid var(--csl-accent, #16333b); border-radius: 6px; background: #f8fafc; }
.csl-person-account-panel h4 { margin: 0; font-size: calc(14px * var(--csl-a11y-scale, 1)); }
.csl-person-account-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.csl-person-account-current { margin: 2px 0 0; color: #4b5563; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.csl-person-account-panel p { margin: 8px 0 0; color: #6b7280; font-size: calc(12px * var(--csl-a11y-scale, 1)); line-height: 1.4; }
.csl-person-account-panel label { display: grid; gap: 4px; color: #344054; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; }
/* Every control in the card is the same height, so a text input, a select and the
   button beside them line up on one baseline instead of each sitting at its own. */
.csl-person-account-panel select,
.csl-person-account-panel input[type="text"] { box-sizing: border-box; width: 100%; max-width: none; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); }
/* One rule for every section of the card, so name, role, the danger pair and groups are
   spaced and divided identically instead of each carrying its own margin. */
.csl-person-account-panel .csl-company-access-name,
.csl-person-account-panel .csl-company-access-role,
.csl-person-account-danger-zone,
.csl-person-erasure,
.csl-company-access-groups { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.csl-person-erasure-form { display: grid; gap: 8px; margin-top: 8px; }
.csl-person-erasure-form label span { font-weight: 400; color: #6b7280; }
.csl-person-erasure-form textarea { box-sizing: border-box; width: 100%; max-width: none; min-height: 64px; 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; resize: vertical; }
.csl-person-erasure-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.csl-person-erasure-pending { color: #92400e !important; }
/* Name, role and groups each save on their own button, and all three are the same kind
   of action, so they get the same weight and the same width - which also lands them on
   one right edge down the card rather than three ragged ones. */
.csl-person-account-panel .csl-company-access-name button,
.csl-person-account-panel .csl-company-access-role button,
.csl-company-access-groups button { width: auto; min-width: 122px; }
.csl-person-account-danger-zone { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.csl-company-access-name { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
/* Its own form, set apart from account actions above: saving it does something
   different (group membership, not permissions or account status) and only ever
   appears for a learner. */
.csl-company-access-groups fieldset { border: 0; padding: 0; margin: 0; }
.csl-company-access-groups legend { padding: 0; font-weight: 700; color: #344054; font-size: calc(12px * var(--csl-a11y-scale, 1)); }
.csl-company-access-groups button { display: block; margin: 12px 0 0 auto; }
.csl-account-groups-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.csl-company-status { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #eef2f7; color: #374151; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; white-space: nowrap; }
.csl-company-status-active, .csl-company-status-accepted { color: #166534; background: #dcfce7; }
.csl-company-status-pending, .csl-company-status-not_sent { color: #92400e; background: #fef3c7; }
.csl-company-status-suspended, .csl-company-status-cancelled, .csl-company-status-expired, .csl-company-status-failed { color: #991b1b; background: #fee2e2; }
.csl-company-invitations { margin-top: 18px; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; }
.csl-company-invitations > summary { display: flex; justify-content: space-between; padding: 14px 16px; color: #1f2937; font-weight: 700; cursor: pointer; }
.csl-company-invitations > summary span { color: #6b7280; font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 600; }
.csl-company-invitations > p { margin: 0; padding: 0 16px 16px; color: #4b5563; }
.csl-company-invitations .csl-dashboard-table-wrap { border-width: 1px 0 0; border-radius: 0 0 8px 8px; }
.csl-company-invitation-table { min-width: 900px; }
@media (max-width: 640px) {
  .csl-login-shell { min-height: calc(100vh - 40px); padding: 20px 12px; }
  .csl-login-card { padding: 24px 18px; }
  .csl-login-card h1 { font-size: calc(29px * var(--csl-a11y-scale, 1)); }
  .csl-login-secondary { width: 100%; margin: 10px 0 0; }
  .csl-support-preview-bar { right: 10px; bottom: 10px; left: 10px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .csl-support-preview-bar div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .csl-support-preview-bar span { white-space: normal; }
  /* The phone offset for .csl-report-problem lives in its own @media block further down, with
     the rest of the widget's mobile behaviour. It was set here too, the same two values in a
     second place; kept in the one that owns the widget. */
  .csl-single-page { margin: 24px auto; }
  .csl-single-title { margin-bottom: 18px; font-size: calc(34px * var(--csl-a11y-scale, 1)); line-height: 1.08; overflow-wrap: anywhere; }
  .csl-player-wrap { margin-top: 16px; border-radius: 8px; }
  .csl-static-complete-panel { padding: 16px; }
  .csl-static-complete-panel strong { font-size: calc(20px * var(--csl-a11y-scale, 1)); }
  /* Once the panel has replaced the video the box no longer has to be video-shaped, and 16/9 of a
     phone's width is not tall enough to hold a heading, a sentence and two stacked buttons. Only
     while finished, so reviewing the video restores the player's own proportions. */
  .csl-static-player-wrap.csl-static-finished { min-height: 17rem; }
  .csl-course-enrolment, .csl-course-certificate { display: flex; align-items: flex-start; flex-direction: column; overflow-wrap: anywhere; }
  .csl-course-lesson { grid-template-columns: 34px minmax(0, 1fr); }
  .csl-course-action { grid-column: 2; }
  .csl-course-button { width: 100%; box-sizing: border-box; text-align: center; }
  
  .csl-dashboard-header h2 { font-size: calc(28px * var(--csl-a11y-scale, 1)); }
  .csl-company-dashboard-identity { align-items: flex-start; flex-direction: column; }
  .csl-company-dashboard-identity img { max-width: 150px; max-height: 60px; }
  .csl-company-login-share { grid-template-columns: minmax(0, 1fr); }
  .csl-company-login-share button { width: 100%; }
  .csl-dashboard-cards, .csl-company-dashboard .csl-dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csl-dashboard-card { min-height: 96px; padding: 14px; }
  .csl-dashboard-card strong { font-size: calc(26px * var(--csl-a11y-scale, 1)); }
  .csl-dashboard-filters { align-items: stretch; }
  .csl-dashboard-filters label, .csl-dashboard-filters button, .csl-dashboard-filters .csl-dashboard-export { width: 100%; }
  .csl-dashboard-export { margin-left: 0; text-align: center; }
  .csl-company-section-heading, .csl-company-invite-actions { display: block; }
  .csl-company-seat-summary { width: 100%; margin-top: 14px; text-align: left; }
  /* minmax(0, 1fr), never a bare 1fr: a bare 1fr track refuses to shrink below the
     min-content width of what is in it, so one long option in a select drags the whole
     grid wider than the screen. */
  .csl-company-invite-grid, .csl-company-course-grid { grid-template-columns: minmax(0, 1fr); }
  .csl-company-bulk-import-body { grid-template-columns: minmax(0, 1fr); }
  .csl-bulk-review-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csl-company-invite-actions p { margin-top: 10px; }
  .csl-company-invite-actions .csl-dashboard-action { width: 100%; }
  /* min-width:0 as well as width:100% - the search box carries a 240px floor for the
     desktop layout, which on a narrow phone is wider than the screen it sits on. */
  .csl-company-people-filters input, .csl-company-people-filters select, .csl-company-people-filters button { width: 100%; min-width: 0; }
  /* One column, so there is nothing left to line up across - drop the shared rows,
     which would otherwise leave an empty hint row (and its gap) under every caption
     that has no hint. */
  .csl-company-enrolment-tools { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .csl-company-enrolment-tools label { grid-row: auto; grid-template-rows: none; }
  .csl-company-enrolment-tools label > span, .csl-company-enrolment-tools label > select,
  .csl-company-enrolment-tools label > input, .csl-company-enrolment-tools label > [data-csl-group-preview] { grid-row: auto; }
  .csl-company-enrolment-tools > p { grid-column: auto; }
  .csl-company-enrolment-tools select, .csl-company-enrolment-tools input, .csl-company-enrolment-tools button { width: 100%; }
  .csl-dashboard-filters select, .csl-dashboard-filters input { width: 100%; }
  .csl-compliance-queue, .csl-compliance-reports, .csl-evidence-timeline { padding: 14px; }
  .csl-compliance-reports nav { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .csl-compliance-reports nav a { border: 1px solid #d0d7de; border-radius: 5px; }
  .csl-compliance-reports nav a.active { border-color: var(--csl-accent, #16333b); background: #eef8f8; }
  .csl-compliance-report-head { align-items: stretch; flex-direction: column; }
  .csl-evidence-timeline > form { align-items: stretch; flex-direction: column; }
  .csl-evidence-timeline > form select, .csl-evidence-timeline > form button { width: 100%; min-width: 0; }
  .csl-evidence-timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .csl-knowledge-check { padding: 16px; }
  .csl-knowledge-heading h3 { font-size: calc(21px * var(--csl-a11y-scale, 1)); }
  .csl-knowledge-question { padding: 12px; }
  .csl-knowledge-submit, .csl-knowledge-secondary, .csl-complete-btn, .csl-review-video-btn, .csl-start-lesson-btn, .csl-submit-quiz-btn, .csl-restart-lesson-btn { width: 100%; min-height: var(--csl-control-height, var(--qv-control-height, 42px)); }
  .csl-attestation { padding: 16px; }
  .csl-attestation-form .csl-dashboard-action, .csl-attestation-document .csl-dashboard-action { width: 100%; justify-content: center; }

}

/* Tables become cards on a tablet, not only on a phone.
   A compliance row carries a person, a course, a status, a progress bar, a due date and its
   actions. At 768px that is six columns in about seven hundred pixels: the due date broke to
   four lines, and the actions column went so narrow that the buttons lost their labels and
   stacked as bare icons - two on one screen, three on the next. The row was still a table and
   still unreadable.
   One threshold for every table, chosen from the width the widest of them actually needs. */
@media (max-width: 900px) {
  .csl-dashboard-table-wrap:has(:is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table)), .csl-tutor-table-wrap:has(:is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table)) { overflow: visible; border: 0; background: transparent; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) { display: block; width: 100%; min-width: 0 !important; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) tbody, :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) tr, :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td { display: block; width: 100%; box-sizing: border-box; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) tr { margin-bottom: 12px; padding: 8px 12px; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 12px; padding: 9px 0 !important; border: 0 !important; border-bottom: 1px solid #eef0f2 !important; overflow-wrap: anywhere; }
    /* A cell holding more than one control cannot use the label|value grid: its children fill
     the grid cells in order, so the label took the first, the first button took the second,
     and every button after that wrapped onto a new row - one under the label, one beside it,
     at whatever width was left. On a phone the group actions came out as a wide "Assign
     training", then "Edit people" and "Delete" scattered below it at three different sizes.
     Laid out as a row instead, with the label on its own line above. */
:is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td:has(> .csl-dashboard-action, > form, > .csl-row-actions, > button) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
:is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td:has(> .csl-dashboard-action, > form, > .csl-row-actions, > button)::before {
    flex: 1 0 100%;
  }
:is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td > form { display: contents; }
  /* The assignment workbench is a picker, not a directory.
     Every other table here is a record to read, so the card gives each cell its column name
     and its value on a line. This one is a list of people to tick, and the same treatment
     made each person eight labelled lines - Person, Role, Groups, Status, Active training,
     Joined, Actions - to answer one question: do I want this one. Seven screens of it.
     Laid out as what it is: a box to tick, a name, and the three facts that decide the
     answer. Groups and Joined are directory facts, and the directory is one tap away on
     People. Everything else - the shape of the button, the spacing, the tokens - is the
     same as every other row in the product, which is what consistency is for. */
  .csl-company-people-table tbody tr {
    display: grid;
    /* Explicit columns, because a grid child cannot be made to flow inline: display:inline
       on one is blockified, and the three facts that decide the answer came out on three
       lines of their own. Named rows and columns put them back on one. */
    grid-template-columns: auto max-content max-content minmax(0, 1fr);
    gap: 4px 10px;
    align-items: start;
  }
  .csl-company-people-table tbody td { display: block; padding: 0 !important; border: 0 !important; }
  .csl-company-people-table tbody td::before { display: none; }

  /* The checkbox keeps its own column and stays beside the name it selects. */
  /* Beside the name it selects, not centred across the whole row - spanning three rows put
     it next to "Learner · Active", which reads as though it ticks the facts. */
  .csl-company-people-table tbody td:first-child { grid-column: 1; grid-row: 1; align-self: center; }
  .csl-company-people-table tbody td[data-label="Person"] { grid-column: 2 / -1; grid-row: 1; }

  /* Role, access and what they already have, on one line under the name. */
  .csl-company-people-table tbody td[data-label="Role"],
  .csl-company-people-table tbody td[data-label="Status"],
  .csl-company-people-table tbody td[data-label="Active training"] {
    grid-row: 2;
    align-self: center;
    color: var(--csl-muted, #4b5563);
    font-size: calc(13px * var(--csl-a11y-scale, 1));
  }
  .csl-company-people-table tbody td[data-label="Role"] { grid-column: 2; }
  .csl-company-people-table tbody td[data-label="Status"] { grid-column: 3; }
  .csl-company-people-table tbody td[data-label="Active training"] { grid-column: 4; }

  .csl-company-people-table tbody td[data-label="Groups"],
  .csl-company-people-table tbody td[data-label="Joined"] { display: none; }

  .csl-company-people-table tbody td:last-child { grid-column: 2 / -1; grid-row: 3; margin-top: 4px; }

:is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td:last-child { border-bottom: 0 !important; }
  /* The person band is the heading its cards sit under, not another card. */
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-progress-person { margin: 16px 0 10px; padding: 0; border: 0; background: transparent; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-progress-person th { display: block; border-top: 0; border-radius: 6px; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td::before { content: attr(data-label); color: #6b7280; font-size: calc(11px * var(--csl-a11y-scale, 1)); font-weight: 800; text-transform: uppercase; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td[data-label=""] { display: block; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) td[data-label=""]::before { display: none; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-company-row-actions, :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .actions { white-space: normal; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-company-access-menu, :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-company-access-panel, :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-company-access-panel select { width: 100%; max-width: none; }
  /* A stacked row puts its label in the first column and its content in the second, so
     a panel left in that second column gets about a third of a phone to live in - which
     wrapped "Role" one letter per line. It takes the whole width of the cell instead. */
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-company-access-menu { grid-column: 1 / -1; }
  /* A stacked row is not a wide table with a last column - there is nothing to hang
     leftward from, and the panel takes the width of the cell like every other one. */
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-progress-row-actions .csl-company-access-panel { margin-left: 0; }
  /* Side by side needs width this layout does not have; stack them rather than squeeze.
     Written at the same specificity as the desktop rules in the account panel - the
     shared min-width that lines those buttons up on one right edge is qualified by
     .csl-person-account-panel, so a bare .csl-company-access-name button here would lose
     to it and leave a stranded 122px button on a phone. */
  .csl-company-access-role { grid-template-columns: minmax(0, 1fr); }
  .csl-company-access-role button { width: 100%; }
  .csl-company-access-name { grid-template-columns: minmax(0, 1fr); }
  .csl-person-account-panel .csl-company-access-name button,
  .csl-person-account-panel .csl-company-access-role button,
  .csl-company-access-groups button { width: 100%; min-width: 0; }
  :is(.csl-dashboard-table, .csl-responsive-table, .csl-tutor-table) .csl-dashboard-progress { width: 100%; max-width: 180px; }
  /* "Remove empty account" does not fit next to "Suspend access" at phone width without
     wrapping mid-word - full width, stacked, rather than two cramped half-width buttons. */
  .csl-person-account-danger-zone button,
  .csl-person-erasure-actions button { flex-basis: 100%; }
}

.csl-preview-banner { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 18px; padding: 12px 14px; border: 1px solid #9ca3af; border-left: 4px solid var(--csl-accent, #16333b); border-radius: var(--csl-control-radius, 10px); color: #1f2937; background: var(--csl-accent-soft, #f3f7f8); }
.csl-preview-banner strong { color: #075e68; }
.csl-preview-banner span { color: #4b5563; }
.csl-engagement-notice { display:flex; flex-wrap:wrap; gap: 8px 12px; align-items:center; width:min(860px,100%); box-sizing:border-box; margin:0 0 18px; padding:12px 14px; border:1px solid #b8c5c7; border-left:4px solid var(--csl-accent, #16333b); border-radius:6px; background:#f3f7f8; color:#374151; }
.csl-engagement-notice strong { color:#075e68; }
.csl-tutor-header-actions { flex-wrap: wrap; }
.csl-tutor-inline-form { display: inline; margin: 0; }
.csl-tutor-inline-form button { padding: 0; border: 0; color: #a22; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
@media (min-width: 641px) and (max-width: 900px) {
  .csl-dashboard-cards, .csl-company-dashboard .csl-dashboard-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .csl-company-invite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csl-company-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csl-dashboard-table { min-width: 760px; }
  .csl-company-enrolment-tools { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .csl-company-enrolment-tools > p { grid-column: 1 / -1; }
  .csl-company-login-share { grid-template-columns: minmax(0, 1fr) auto; }
  .csl-company-login-share > div { grid-column: 1 / -1; }
}

.csl-certificate-verifier { max-width: 780px; margin: 40px auto; color: #1f2937; }
.csl-certificate-verifier-header { margin-bottom: 22px; }
.csl-certificate-verifier-kicker { margin: 0 0 6px; color: var(--csl-accent, #16333b); font-size: calc(13px * var(--csl-a11y-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.csl-certificate-verifier-header h2 { margin: 0; font-size: calc(36px * var(--csl-a11y-scale, 1)); line-height: 1.15; }
.csl-certificate-verifier-header > p:last-child { max-width: 620px; margin: 10px 0 0; color: #4b5563; }
.csl-certificate-search { padding: 20px; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; }
.csl-certificate-search label { display: block; margin-bottom: 7px; font-size: calc(14px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-certificate-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.csl-certificate-search input { width: 100%; min-width: 0; box-sizing: border-box; color: #111827; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(16px * var(--csl-a11y-scale, 1)); letter-spacing: 0; text-transform: uppercase; }
.csl-certificate-search input:focus { border-color: var(--csl-accent, #16333b); outline: 2px solid rgba(22, 51, 59, 0.2); outline-offset: 1px; }
.csl-certificate-search-help { margin: 8px 0 0; color: #6b7280; font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-certificate-result { margin-top: 18px; padding: 22px; border: 1px solid #d0d7de; border-left-width: 5px; border-radius: 8px; background: #fff; }
.csl-certificate-result-valid { border-left-color: #16803c; background: #f2fbf5; }
.csl-certificate-result-expiring_soon { border-left-color: #b7791f; background: #fffbeb; }
.csl-certificate-result-expired, .csl-certificate-result-revoked, .csl-certificate-result-not-found { border-left-color: #b42318; background: #fff7f6; }
.csl-certificate-result-reissued { border-left-color: var(--qv-gold, #d7a54a); background: #fff8e8; }
.csl-certificate-result-heading { display: flex; gap: 12px; align-items: center; }
.csl-certificate-result-mark { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: #16803c; font-size: calc(21px * var(--csl-a11y-scale, 1)); font-weight: 800; }
.csl-certificate-result-expiring_soon .csl-certificate-result-mark { background: #b7791f; }
.csl-certificate-result-expired .csl-certificate-result-mark, .csl-certificate-result-revoked .csl-certificate-result-mark, .csl-certificate-result-not-found .csl-certificate-result-mark { background: #b42318; }
.csl-certificate-result-reissued .csl-certificate-result-mark { color: #684b12; background: #f6d985; }
.csl-certificate-result-label { margin: 0 0 2px; color: #4b5563; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.csl-certificate-result h3 { margin: 0; font-size: calc(22px * var(--csl-a11y-scale, 1)); line-height: 1.2; }
.csl-certificate-result > p { margin: 14px 0 0; color: #4b5563; }
.csl-certificate-result code { overflow-wrap: anywhere; }
.csl-certificate-result-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 20px 0 0; border-top: 1px solid #d0d7de; border-left: 1px solid #d0d7de; }
.csl-certificate-result-fields > div { min-width: 0; padding: 12px 14px; border-right: 1px solid #d0d7de; border-bottom: 1px solid #d0d7de; background: rgba(255, 255, 255, 0.72); }
.csl-certificate-result-fields dt { margin-bottom: 4px; color: #6b7280; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-certificate-result-fields dd { margin: 0; overflow-wrap: anywhere; color: #111827; font-size: calc(15px * var(--csl-a11y-scale, 1)); font-weight: 650; }
.csl-certificate-result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
@media (max-width: 640px) {
  .csl-certificate-verifier { margin: 28px auto; }
  .csl-certificate-verifier-header h2 { font-size: calc(29px * var(--csl-a11y-scale, 1)); }
  .csl-certificate-search-row { grid-template-columns: minmax(0, 1fr); }
  .csl-certificate-result-fields { grid-template-columns: minmax(0, 1fr); }
  .csl-certificate-result-actions a { width: 100%; }
}

/* Product UI refinement */
/* Content Studio was not in this list, so inside it every var() fell through to its own
   fallback - which is why its tiles were rounded differently from the ones on Compliance while
   both selectors read as "the shared radius". A token scope that misses a surface is a second
   set of values wearing the first one's name. */
:where(.csl-single-page, .csl-login-shell, .csl-dashboard, .csl-course, .csl-knowledge-check, .csl-certificate-verifier, .csl-tutor-workspace) {
  --csl-ink: #18202b;
  --csl-muted: #5c6675;
  --csl-line: #d8dee7;
  --csl-soft: #f6f8fb;
  --csl-accent: #16333b;
  --csl-accent-hover: #1e404a;
  --csl-accent-soft: #e4ebea;
  --csl-focus: rgba(22, 51, 59, .24);
  /* One source of truth for the filled primary button. Every screen's primary control
     takes its fill and its label from here rather than writing the accent and #fff out
     again, which is how the button colour came to be decided in sixteen places and how a
     screen the accent token never reached rendered a foreign teal. The fill tracks the
     accent, so per-company branding still flows through unchanged. */
  --csl-btn-primary-bg: var(--csl-accent);
  --csl-btn-primary-bg-hover: var(--csl-accent-hover);
  --csl-btn-primary-ink: #fff;
  /* A disabled control is quiet by design and WCAG 1.4.3 exempts it, but a label nobody
     can read is a defect whatever the standard says. Defined once, and dark enough on its
     own background to clear 4.5:1 - #55606f on #e9edf2 is 5.44:1 - so "disabled" reads as
     unavailable rather than as broken. Was three different grey-on-grey pairs, the worst
     of them 3.79:1. */
  --csl-disabled-bg: #e9edf2;
  --csl-disabled-ink: #55606f;
  --csl-disabled-line: #d6dbe3;
  color: var(--csl-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.csl-lms-portal-page .entry-header,
.csl-lms-portal-page .page-header,
.csl-lms-login-page .entry-title,
.csl-lms-login-page .wp-block-post-title { display: none; }
.csl-lms-portal-page .entry-content { margin-top: 0; }

:where(.csl-login-shell, .csl-dashboard, .csl-single-page, .csl-course, .csl-knowledge-check, .csl-certificate-verifier) :where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: 0;
}

:where(.csl-login-shell, .csl-dashboard, .csl-single-page, .csl-course, .csl-knowledge-check, .csl-certificate-verifier) :where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="datetime-local"], select, textarea) {
  border-color: #aeb7c4;
  color: var(--csl-ink);
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .03);
  transition: border-color .16s ease, box-shadow .16s ease;
}

:where(.csl-login-shell, .csl-dashboard, .csl-single-page, .csl-course, .csl-knowledge-check, .csl-certificate-verifier) :where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="datetime-local"], select, textarea):focus {
  border-color: var(--csl-accent);
  outline: 0;
  box-shadow: 0 0 0 3px var(--csl-focus);
}

:where(.csl-login-shell, .csl-dashboard, .csl-single-page, .csl-course, .csl-knowledge-check, .csl-certificate-verifier) :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--csl-focus);
  outline-offset: 2px;
}

.csl-login-shell { background: #f2f5f8; }
.csl-login-card {
  padding: 36px;
  border-color: var(--csl-line);
  box-shadow: 0 18px 45px rgba(24, 32, 43, .1), 0 2px 8px rgba(24, 32, 43, .05);
}
.csl-login-card h1 { color: var(--csl-ink); font-size: calc(32px * var(--csl-a11y-scale, 1)); letter-spacing: 0; }
.csl-login-card input[type="text"], .csl-login-card input[type="email"], .csl-login-card input[type="password"] { min-height: var(--csl-control-height, var(--qv-control-height, 42px)); }
.csl-login-remember input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--csl-login-accent, var(--csl-accent, #16333b)); }
.csl-login-submit { min-height: var(--csl-control-height, var(--qv-control-height, 42px)); }

.csl-dashboard-header h2,
.csl-company-section-heading h3,
.csl-dashboard-section h3 { color: var(--csl-ink); letter-spacing: 0; }
.csl-dashboard-header p,
.csl-company-section-heading > div:first-child > p:last-child { color: var(--csl-muted); line-height: 1.55; }
.csl-company-dashboard .csl-dashboard-header {
  border-right: 1px solid var(--csl-line);
  border-bottom: 1px solid var(--csl-line);
  border-left: 1px solid var(--csl-line);
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
/* The company dashboard carries Quovia's colours, not the client's. quovia.css sets these
   for real; the values here are what the dashboard falls back to if it is ever loaded
   without that stylesheet. They used to be derived from a --csl-company-accent that was
   only ever the same petrol written a third time, which read as though a client's brand
   colour reached this screen. It does not. */
.csl-company-dashboard {
  --csl-accent: #16333b;
  --csl-accent-hover: #1e404a;
  --csl-accent-soft: #e4ebea;
  --csl-focus: rgba(22, 51, 59, .3);
}
.csl-dashboard-card {
  border-color: var(--csl-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.csl-dashboard-card strong { font-variant-numeric: tabular-nums; }
.csl-dashboard-filters { border-color: var(--csl-line); background: var(--csl-soft); }
.csl-dashboard-table-wrap { border-color: var(--csl-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .03); }
.csl-dashboard-table th {
  color: #465163;
  background: #f5f7fa;
  font-size: calc(12px * var(--csl-a11y-scale, 1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.csl-dashboard-table tbody tr { transition: background-color .14s ease; }
.csl-dashboard-table tbody tr:hover { background: #f8fafc; }
.csl-dashboard-table td { color: #303a49; line-height: 1.45; }
.csl-dashboard-table td:where(:nth-last-child(-n+2)) { font-variant-numeric: tabular-nums; }

:where(.csl-company-bulk-import, .csl-company-invitations) > summary {
  border-radius: 7px;
  transition: background-color .14s ease;
}
:where(.csl-company-bulk-import, .csl-company-invitations) > summary:hover { background: #f5f7fa; }
:where(.csl-company-bulk-import, .csl-company-invitations)[open] > summary { border-radius: 7px 7px 0 0; background: #f5f7fa; }

.csl-knowledge-question label { transition: border-color .14s ease, background-color .14s ease; }
.csl-knowledge-question label:hover { border-color: #aeb7c4; background: #f2f6f8; }
.csl-knowledge-question label:has(input:checked) { border-color: var(--csl-accent); background: #edf7f7; box-shadow: inset 3px 0 0 var(--csl-accent); }
.csl-knowledge-question input { accent-color: var(--csl-accent); }

@media (max-width: 640px) {
  .csl-login-card { padding: 26px 20px; }
  .csl-dashboard-table th { text-transform: none; }
}

@media (max-width: 640px) {
  .csl-dashboard-card { min-height: 0; }
  .csl-single-title { font-size: calc(32px * var(--csl-a11y-scale, 1)); }
  .csl-static-complete-actions { width: 100%; }
  .csl-static-complete-actions > * { width: 100%; box-sizing: border-box; margin-left: 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.csl-login-shell, .csl-dashboard, .csl-single-page, .csl-course, .csl-knowledge-check, .csl-certificate-verifier) * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Unified interactive controls */
:where(.csl-single-page, .csl-login-shell, .csl-dashboard, .csl-course, .csl-knowledge-check, .csl-certificate-verifier, .csl-tutor-workspace) {
  --csl-control-height: 42px;
  --csl-control-radius: 6px;
  --csl-danger: #b42318;
  --csl-danger-soft: #fff1f0;
}

:is(
  .csl-login-submit,
  .csl-login-link,
  .csl-complete-btn,
  .csl-start-lesson-btn,
  .csl-submit-quiz-btn,
  .csl-restart-lesson-btn,
  .csl-course-button,
  .csl-dashboard-action,
  .csl-fallback-tracking-start,
  .csl-dashboard-export,
  .csl-knowledge-submit,
  .csl-knowledge-secondary,
  .csl-certificate-primary-action,
  .csl-certificate-secondary-action,
  .csl-login-secondary,
  .csl-return-dashboard,
  .csl-review-video-btn
),
.csl-dashboard-filters button,
.csl-company-login-share button,
.csl-company-people-filters button,
.csl-company-enrolment-tools button,
.csl-evidence-timeline > form button,
.csl-certificate-search button,
.csl-report-problem button,
.csl-dashboard-filters > a:not(.csl-dashboard-export),
.csl-company-people-filters a,
.csl-compliance-search button,
.csl-compliance-clear,
.csl-company-text-action,
.csl-tutor-inline-form button,
.csl-company-access-primary,
.csl-company-access-secondary,
.csl-person-account-close,
.csl-signed-in-out,
.csl-tutor-header-actions a,
.csl-tutor-panel-head > a,
.csl-tutor-editor button,
.csl-tutor-scorm button,
.csl-tutor-filter button,
.csl-review-item button,
.csl-quiz-import button,
.csl-quiz-import .csl-tutor-preview {
  display: inline-flex;
  min-height: var(--csl-control-height, var(--qv-control-height, 42px));
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--csl-control-radius, 10px);
  font-size: calc(14px * var(--csl-a11y-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

:is(
  .csl-complete-btn,
  .csl-start-lesson-btn,
  .csl-submit-quiz-btn,
  .csl-restart-lesson-btn,
  .csl-course-button:not(.csl-course-button-disabled):not(:disabled),
  .csl-dashboard-action:not(.csl-dashboard-action-disabled):not(:disabled):not(.csl-dashboard-action-quiet):not(.csl-dashboard-action-danger),
  .csl-knowledge-submit,
  .csl-fallback-tracking-start,
  .csl-certificate-primary-action
),
.csl-dashboard-filters button,
.csl-company-people-filters button,
.csl-company-enrolment-tools button,
.csl-evidence-timeline > form button,
.csl-certificate-search button,
.csl-report-problem button,
.csl-compliance-search button,
.csl-company-access-primary,
.csl-tutor-header-actions a:not(.secondary),
.csl-tutor-panel-head > a,
.csl-tutor-editor button,
.csl-tutor-scorm button,
.csl-tutor-filter button,
.csl-review-item button:not(.secondary),
.csl-quiz-import button:not(.secondary),
.csl-quiz-import .csl-tutor-preview {
  border-color: var(--csl-btn-primary-bg, #16333b);
  color: var(--csl-btn-primary-ink, #fff) !important;
  background: var(--csl-btn-primary-bg, #16333b);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}


:is(
  .csl-login-secondary,
  .csl-return-dashboard,
  .csl-review-video-btn,
  .csl-knowledge-secondary,
  .csl-certificate-secondary-action
),
.csl-company-login-share button,
.csl-dashboard-filters > a:not(.csl-dashboard-export),
.csl-company-people-filters a,
.csl-compliance-clear,
.csl-company-text-action,
.csl-tutor-inline-form button,
.csl-company-access-secondary,
.csl-person-account-close,
.csl-signed-in-out,
.csl-tutor-header-actions a.secondary,
.csl-review-item button.secondary,
.csl-quiz-import button.secondary {
  border-color: var(--csl-accent, #16333b);
  color: var(--csl-accent, #16333b) !important;
  background: #fff;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}


:is(
  .csl-complete-btn,
  .csl-start-lesson-btn,
  .csl-submit-quiz-btn,
  .csl-restart-lesson-btn,
  .csl-course-button:not(.csl-course-button-disabled):not(:disabled),
  .csl-dashboard-action:not(.csl-dashboard-action-disabled):not(:disabled):not(.csl-dashboard-action-quiet):not(.csl-dashboard-action-danger),
  .csl-knowledge-submit,
  .csl-certificate-primary-action
):hover,
.csl-dashboard-filters button:hover,
.csl-company-people-filters button:hover,
.csl-company-enrolment-tools button:hover,
.csl-evidence-timeline > form button:hover,
.csl-certificate-search button:hover,
.csl-report-problem button:hover,
.csl-company-access-primary:hover {
  border-color: var(--csl-btn-primary-bg-hover, #1e404a);
  color: var(--csl-btn-primary-ink, #fff) !important;
  background: var(--csl-btn-primary-bg-hover, #1e404a);
  box-shadow: 0 2px 5px rgba(15, 23, 42, .16);
  filter: brightness(.94);
}

:is(
  .csl-login-secondary,
  .csl-return-dashboard,
  .csl-review-video-btn,
  .csl-knowledge-secondary,
  .csl-certificate-secondary-action
):hover,
.csl-company-login-share button:hover,
.csl-dashboard-filters > a:not(.csl-dashboard-export):hover,
.csl-company-people-filters a:hover,
.csl-compliance-clear:hover,
.csl-compliance-clear:focus-visible,
.csl-company-text-action:hover,
.csl-company-text-action:focus-visible,
.csl-tutor-inline-form button:hover,
.csl-tutor-inline-form button:focus-visible,
.csl-company-access-secondary:hover,
.csl-company-access-secondary:focus-visible,
.csl-person-account-close:hover,
.csl-person-account-close:focus-visible,
.csl-signed-in-out:hover,
.csl-signed-in-out:focus-visible {
  border-color: var(--csl-accent-hover, #1e404a);
  color: var(--csl-accent-hover, #1e404a) !important;
  background: var(--csl-accent-soft, #edf7f7);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  filter: none;
}

/* Caution and danger are the same control with a different colour, not a different control.
   Suspend is reversible (Reactivate undoes it) so it reads as caution; only the irreversible
   Remove is red. Both keep the shared height, radius and weight - severity is carried by
   colour alone, which is the only thing about them that differs.

   Placed after the outlined block on purpose, not before it. Both carry !important on colour,
   so between two equally specific rules the file order is what decides - and written above,
   this lost: Suspend rendered with an amber border and teal text, which reads as neither a
   caution nor an ordinary button. Layering a rule over a rule is not the same as ordering. */
.csl-company-access-warning { border-color: #b45309 !important; color: #92400e !important; }
.csl-company-access-warning:hover, .csl-company-access-warning:focus-visible { border-color: #92400e !important; color: #78350f !important; background: #fffbeb !important; }
.csl-company-access-danger { border-color: var(--csl-danger, #b42318) !important; color: var(--csl-danger, #b42318) !important; }
.csl-company-access-danger:hover, .csl-company-access-danger:focus-visible { border-color: #912018 !important; color: #912018 !important; background: var(--csl-danger-soft, #fff1f0) !important; }

/* The header's actions stand off from the text above them, whether they come as a row of
   two or as a single button. Wrapping Training's pair in a row moved this margin onto the
   wrapper and quietly took it away from every header that still has one bare button - People
   and Workspace - where the button then sat directly against the sentence above it. One rule
   covering both shapes rather than one per shape. */
.csl-dashboard-header > .csl-dashboard-header-action,
.csl-dashboard-header .csl-row-actions { margin-top: 14px; }
/* An action that ends a card clears its edge by the same distance a header's action does.
   A section's padding is 18px against a header's 28, which reads as generous behind a
   paragraph and cramped behind a solid button - the button is the shape that touches. */
.csl-company-dashboard .csl-dashboard-section form > .csl-dashboard-action:last-child,
.csl-company-dashboard .csl-dashboard-section > form:last-child > .csl-dashboard-action:last-child {
  margin-bottom: 10px;
}
.csl-lesson > :where(.csl-start-lesson-btn, .csl-submit-quiz-btn, .csl-restart-lesson-btn, .csl-return-dashboard) { margin-top: 8px; margin-right: 8px; }
.csl-lesson > .csl-return-dashboard { margin-left: 0; }
.csl-login-card .csl-login-secondary { margin-left: 8px; }
.csl-static-complete-panel :where(.csl-return-dashboard, .csl-review-video-btn) { border-color: #aeb7c4; color: #fff !important; background: transparent; }
.csl-static-complete-panel :where(.csl-return-dashboard, .csl-review-video-btn):hover { border-color: #fff; color: #fff !important; background: rgba(255, 255, 255, .1); }
.csl-dashboard :is(.csl-dashboard-export, .csl-dashboard-header-action:not(.csl-dashboard-header-action-primary)) {
  border-color: var(--csl-accent, #16333b);
  color: var(--csl-accent, #16333b) !important;
  background: #fff;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}
.csl-dashboard :is(.csl-dashboard-export, .csl-dashboard-header-action:not(.csl-dashboard-header-action-primary)):hover {
  border-color: var(--csl-accent-hover, #1e404a);
  color: var(--csl-accent-hover, #1e404a) !important;
  background: var(--csl-accent-soft, #edf7f7);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  filter: none;
}


.csl-company-text-action-danger {
  color: var(--csl-danger, #b42318) !important;
}
.csl-company-text-action-danger:hover {
  color: #8f1c13 !important;
  background: var(--csl-danger-soft, #fff1f0);
}

.csl-dashboard input[type="checkbox"],
.csl-dashboard input[type="radio"] { accent-color: var(--csl-accent, #16333b); }
.csl-dashboard input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #aeb7c4;
  border-radius: 6px;
  color: var(--csl-muted, #5c6675);
  background: #fff;
}
.csl-dashboard input[type="file"]::file-selector-button {
  min-height: var(--csl-control-height, var(--qv-control-height, 42px));
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid var(--csl-accent, #16333b);
  border-radius: 5px;
  color: var(--csl-accent, #16333b);
  background: #fff;
  font: inherit;
  font-size: calc(13px * var(--csl-a11y-scale, 1));
  font-weight: 700;
  cursor: pointer;
}
.csl-dashboard input[type="file"]::file-selector-button:hover { border-color: var(--csl-accent-hover, #1e404a); color: var(--csl-accent-hover, #1e404a); background: var(--csl-accent-soft, #edf7f7); }
.csl-company-course-grid label { transition: border-color .14s ease, background-color .14s ease; cursor: pointer; }
.csl-company-course-grid label:hover { border-color: var(--csl-accent, #16333b); background: var(--csl-accent-soft, #edf7f7); }
.csl-company-course-grid label:has(input:checked) { border-color: var(--csl-accent, #16333b); background: #edf7f7; box-shadow: inset 3px 0 0 var(--csl-accent, #16333b); }

.csl-compliance-reports nav a {
  border-radius: 5px 5px 0 0;
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}
.csl-compliance-reports nav a:hover { color: var(--csl-accent-hover, #1e404a); background: var(--csl-accent-soft, #edf7f7); }
.csl-compliance-reports nav a.active { background: var(--csl-accent-soft, #edf7f7); }

.csl-report-problem > summary:hover { background: var(--csl-accent-hover, #1e404a); }
.csl-dashboard :is(.csl-company-bulk-import, .csl-company-invitations) > summary:hover,
.csl-dashboard :is(.csl-company-bulk-import, .csl-company-invitations)[open] > summary {
  color: var(--csl-accent-hover, #1e404a);
  background: var(--csl-accent-soft, #edf7f7);
}
.csl-report-problem :where(summary, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--qv-focus, #f4bd55);
  outline-offset: 2px;
}

:where(.csl-company-bulk-import, .csl-company-invitations) > summary,
.csl-report-problem > summary {
  min-height: var(--csl-control-height, var(--qv-control-height, 42px));
  box-sizing: border-box;
}

/* The one disabled treatment. The disabled class selectors are named plainly rather than
   wrapped in :where(), so this rule carries enough weight to be the single source: the three
   grey-on-grey copies it replaced each set their own colour, and the one that won measured
   3.79:1. The token label clears 4.5:1 on its own background. */
.csl-dashboard-action-disabled,
.csl-course-button-disabled,
:where(.csl-single-page, .csl-login-shell, .csl-dashboard, .csl-course, .csl-knowledge-check, .csl-certificate-verifier) button:disabled {
  border-color: var(--csl-disabled-line, #d6dbe3) !important;
  color: var(--csl-disabled-ink, #55606f) !important;
  background: var(--csl-disabled-bg, #e9edf2) !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 640px) {
  .csl-login-card .csl-login-secondary { margin: 10px 0 0; }
  :is(.csl-company-text-action, .csl-tutor-inline-form button) { white-space: normal; }
  .csl-dashboard-filters > a, .csl-company-people-filters a { width: 100%; }
  .csl-dashboard.csl-support-access-gate { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .csl-support-access-actions { align-items: stretch; flex-direction: column; }
  .csl-support-access-actions button { width: 100%; }
}

/* A secondary action that sits beside a primary one without competing with it. The
   certificate was previously an underlined link next to a solid button, which read as
   an afterthought even though it is what a learner wants most after passing. */
/* The shared primary-button rule sets a white fill colour through :is(...), which carries
   the specificity of its most specific argument - so a single-class variant loses to it even
   with !important, and this button rendered white on transparent: invisible. Matching both of
   its own classes reaches the same specificity, which with !important is enough to win
   anywhere.
   It named two ancestors before, and so a quiet button was only quiet inside a dashboard:
   the same markup came out solid in Content Studio, three filled buttons to a row with no
   primary among them. A variant is a property of the control, not of where it is placed. */
.csl-dashboard-action.csl-dashboard-action-quiet {
  border: 1px solid var(--csl-accent, #16333b) !important;
  background: transparent !important;
  color: var(--csl-accent, #16333b) !important;
  box-shadow: none !important;
}
/* Destructive actions keep the shape of every other control and change only their colour.
   A Delete that is a bare red word next to buttons reads as a different kind of thing, and a
   Delete shaped like a primary button invites the click it should not. */
.csl-dashboard-action.csl-dashboard-action-danger {
  border-color: var(--csl-danger, #ad4033) !important;
  color: var(--csl-danger, #ad4033) !important;
  background: transparent !important;
}
.csl-dashboard-action.csl-dashboard-action-danger:hover,
.csl-dashboard-action.csl-dashboard-action-danger:focus-visible {
  border-color: var(--csl-danger, #ad4033) !important;
  color: #7f1d1d !important;
  background: var(--csl-danger-soft, #f3ddd8) !important;
}
.csl-dashboard-action.csl-dashboard-action-quiet:hover,
.csl-dashboard-action.csl-dashboard-action-quiet:focus-visible {
  border-color: var(--csl-accent, #16333b) !important;
  background: var(--csl-accent-soft, #e4ebea) !important;
  color: var(--csl-accent-hover, #1e404a) !important;
}
/* The certificate number is supporting evidence, not a headline. */
.csl-dashboard-code { display: block; margin-top: 6px; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: calc(11px * var(--csl-a11y-scale, 1)); letter-spacing: .02em; text-decoration: none; }
.csl-dashboard-code:hover, .csl-dashboard-code:focus { color: var(--csl-accent, #16333b); text-decoration: underline; }
/* A real constraint, so it is stated plainly rather than muted away. */
.csl-dashboard-warning { display: block; margin-top: 2px; color: var(--csl-danger, #ad4033); font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 600; }

/* A way back from terminal screens (empty course, access refusal, preview). */
.csl-content-return { margin-top: 18px; }
.csl-content-return a { display: inline-block; padding: 9px 14px; border: 1px solid currentColor; border-radius: 6px; font-weight: 600; text-decoration: none; }
.csl-preview-banner a { margin-left: auto; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* The empty course used to render bare paragraphs outside the page card, so its
   return button hung in open space with nothing to align to. */
.csl-course-empty { padding: 26px 28px; border: 1px solid var(--csl-line, #dcdcde); border-radius: var(--qv-radius, 12px); background: var(--qv-surface, #fbfaf5); }
.csl-course-empty strong { display: block; margin-bottom: 6px; font-size: calc(17px * var(--csl-a11y-scale, 1)); }
.csl-course-empty p { margin: 0; }
.csl-course-empty .csl-content-return { margin-top: 16px; }

/* Available from the moment the lesson opens, not only once it is finished. */
.csl-lesson-back { margin: 0 0 14px; }
.csl-lesson-back a { color: inherit; font-weight: 600; text-decoration: none; opacity: .8; }
.csl-lesson-back a:hover, .csl-lesson-back a:focus { opacity: 1; text-decoration: underline; }

/* Screen space is scarce on a phone, so the closed widget is a bug button and
   nothing else. It claims the screen only once the learner opens it. */
@media (max-width: 640px) {
  .csl-report-problem { right: 12px; bottom: 12px; }

  .csl-report-problem:not([open]) > summary {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .csl-report-problem:not([open]) .csl-report-problem-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .csl-report-problem:not([open]) .csl-report-problem-icon {
    width: 21px;
    height: 21px;
  }

  .csl-report-problem[open] {
    width: calc(100vw - 24px);
  }

  .csl-report-problem[open] .csl-report-problem-body {
    max-height: min(70vh, calc(100vh - 140px));
  }
}

/* Shown to someone who can edit the lesson they are viewing as a learner. */
.csl-author-notice {
  display: grid;
  gap: 4px;
  max-width: 920px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #e6d3a3;
  border-left: 4px solid #c99a2e;
  border-radius: 6px;
  background: #fdf8ec;
  color: #4a3c1c;
  font-size: calc(14px * var(--csl-a11y-scale, 1));
}
.csl-author-notice a { color: #7a5a12; font-weight: 700; text-underline-offset: 3px; }

/* Asked once, of whoever can edit the lesson, before anything is recorded. */
.csl-editor-gate { display: grid; gap: 24px; max-width: 920px; padding: 26px; border: 1px solid var(--csl-line, #d8dee7); border-top: 4px solid var(--csl-accent, #16333b); border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.csl-editor-gate-copy > span { display: block; margin-bottom: 7px; color: var(--csl-accent, #16333b); font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 800; text-transform: uppercase; }
.csl-editor-gate-copy > strong { display: block; color: #172033; font-size: calc(24px * var(--csl-a11y-scale, 1)); line-height: 1.25; }
.csl-editor-gate-copy p { margin: 10px 0 0; color: #526071; }
.csl-editor-gate-record { font-weight: 700; }
.csl-editor-gate-actions { display: grid; gap: 12px; }
.csl-editor-gate-actions a[class^="csl-editor-gate-"] { display: block; padding: 14px 16px; border: 1px solid var(--csl-line, #d8dee7); border-radius: 7px; text-decoration: none; }
.csl-editor-gate-actions a[class^="csl-editor-gate-"] strong { display: block; margin-bottom: 4px; color: #172033; }
.csl-editor-gate-actions a[class^="csl-editor-gate-"] small { display: block; color: #526071; line-height: 1.45; }
.csl-editor-gate-primary { border-color: var(--csl-accent, #16333b) !important; background: #f4fafa; }
.csl-editor-gate-actions a[class^="csl-editor-gate-"]:hover { border-color: var(--csl-accent, #16333b); }
.csl-editor-gate .csl-content-return { justify-self: start; }
@media (min-width: 641px) { .csl-editor-gate-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .csl-editor-gate .csl-content-return { grid-column: 1 / -1; } }

/* Stated where the result is read, not left to be discovered elsewhere. */
.csl-certificate-self-authored { max-width: 920px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e6d3a3; border-left: 4px solid #b26200; border-radius: 6px; background: #fdf8ec; color: #4a3c1c; }

/* A closing date is a harder deadline than a due date: after it the training cannot
   be opened at all, finished or not. It is said wherever the item is listed. */
.csl-dashboard-closing { display: block; margin-top: 3px; color: #8a5a00; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; }
.csl-course-closing { max-width: 920px; margin: 12px 0 0; padding: 11px 13px; border: 1px solid #e6d3a3; border-left: 4px solid #c99a2e; border-radius: 6px; background: #fdf8ec; color: #4a3c1c; }
.csl-local-time { color: #6b7280; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 400; }
.csl-dashboard-greeting { margin: 0 0 4px; color: var(--csl-accent, #16333b); font-size: calc(17px * var(--csl-a11y-scale, 1)); font-weight: 700; }

/* The per-step lock inside the Content Studio course builder. */
.csl-course-lock { display: flex; gap: 8px; align-items: center; width: 100%; margin-top: 6px; color: #526071; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 600; }
.csl-course-lock input { margin: 0; }
.csl-course-order { display: block; margin: 0 0 14px; font-weight: 700; }
.csl-course-order select { display: block; margin-top: 5px; }
.csl-course-order small { display: block; margin-top: 5px; color: #526071; font-weight: 400; }

/* Starting a support session while another is open ends the other one. Say so where
   the decision is made, not afterwards in an audit log. */
.csl-support-gate-warning {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid #b8862f;
  border-radius: 0 4px 4px 0;
  background: #fdf6e6;
  color: #4b3a10;
  font-size: calc(14px * var(--csl-a11y-scale, 1));
  line-height: 1.5;
}

/* Lesson contents, for a package that declares several parts.
   The learner needs to see what the lesson is made of and how far through it they are, because
   'finished' now means every part rather than one. Built from the shared button vocabulary rather
   than a new one: each row is a .csl-dashboard-action with its variant, per docs/design-system.md,
   so it inherits the one control height, radius, focus ring and hover in the product. */
.csl-sco-contents { width: min(860px, 100%); margin: 20px 0 8px; }
.csl-sco-contents h3 { margin: 0 0 4px; font-size: calc(17px * var(--csl-a11y-scale, 1)); }
.csl-sco-progress { margin: 0 0 12px; color: var(--qv-slate, #55636a); font-size: calc(13px * var(--csl-a11y-scale, 1)); }
.csl-sco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.csl-sco-item { margin: 0; }
.csl-sco-contents .csl-sco-open { width: 100%; justify-content: flex-start; gap: 12px; text-align: left; height: auto; min-height: var(--qv-control-height, 42px); padding-top: 8px; padding-bottom: 8px; }
.csl-sco-number { flex: 0 0 auto; min-width: 1.6em; font-variant-numeric: tabular-nums; opacity: .75; }
.csl-sco-title { flex: 1 1 auto; min-width: 0; }
.csl-sco-state { flex: 0 0 auto; font-size: calc(12px * var(--csl-a11y-scale, 1)); font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--qv-line, #cbd3d3); }
.csl-sco-state[data-state="passed"], .csl-sco-state[data-state="completed"] { border-color: #1f7a52; color: #1f7a52; }
.csl-sco-state[data-state="failed"] { border-color: #a4262c; color: #a4262c; }
.csl-sco-state[data-state="in_progress"] { border-color: var(--csl-accent, #16333b); color: var(--csl-accent, #16333b); }
.csl-sco-contents .csl-sco-open.is-open { outline: 2px solid var(--csl-accent, #16333b); outline-offset: 2px; }
@media (max-width: 640px) {
  /* The badge earns its own line rather than squeezing the title on a phone. */
  .csl-sco-contents .csl-sco-open { flex-wrap: wrap; }
  .csl-sco-title { flex: 1 1 100%; order: 2; }
  .csl-sco-state { order: 3; }
}