/* Modal layout */
.modal__overlay { position: absolute; inset: 0; }
.modal__container { position: relative; background: #fff; border-radius: 16px; padding: 1.5rem; max-width: 32rem; width: 90%; max-height: 90vh; overflow-y: auto; z-index: 1; }
.modal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; padding: .25rem; }
.modal__body { margin-top: .5rem; }
/* Keep the heading off the first field label / paragraph below it. */
.modal__body > .modal__title { margin-bottom: 1rem; }

/* Form fields */
.form__group { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.form__group .input,
.form__group .select { width: 100%; box-sizing: border-box; }
.form__label { font-size: 1rem; line-height: 1.5; color: #1a1918; }
.form__error { font-size: .875rem; color: #d63a3a; }
.form__actions { display: flex; gap: .75rem; margin-top: .5rem; }
/* .btn has a fixed height but no side padding, so short labels ("CANCEL")
   collapsed into circles. Give modal action buttons a pill shape. */
.form__actions .btn { min-width: 8rem; padding-left: 1.25rem; padding-right: 1.25rem; }


/* Reusable confirm dialog — must sit above other popups (training-popup z:200) */
.confirm-modal { z-index: 300; }
.confirm-modal__actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.confirm-modal__actions .btn { width: 100%; }

/* §1.5 Add Course modal — sits above training-popup (z:200) */
.add-course-modal { z-index: 300; visibility: hidden; opacity: 0; }
.add-course-modal.is-visible { visibility: visible; opacity: 1; }
.add-course-modal .form__actions { justify-content: flex-end; }
.add-course-modal .form__actions .btn { min-width: 8rem; padding-left: 1.25rem; padding-right: 1.25rem; }

/* §2.4 Set due date modal — same stacking as the add-course modal */
.due-date-modal { z-index: 300; visibility: hidden; opacity: 0; }
.due-date-modal.is-visible { visibility: visible; opacity: 1; }
.due-date-modal .form__actions { justify-content: flex-end; }
.due-date-modal .form__actions .btn { min-width: 8rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.due-date-modal .form__input { width: 100%; box-sizing: border-box; padding: .625rem .75rem; border: 1px solid #e8e1ce; border-radius: .5rem; font-size: 1rem; color: #1a1918; }

/* OTP inputs */
.input--otp { width: 3rem; height: 3rem; text-align: center; font-size: 1.25rem; padding: .5rem; }

/* Password field width */
.password-form__input { width: 100%; }


/* Checkbox group (multi-select checkboxes) */
.checkbox-group { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }

/* Flash messages & alerts */
.flash-messages { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; max-width: 28rem; width: 100%; }
.alert { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-radius: 8px; font-size: .875rem; line-height: 1.4; }
.alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert__close { background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0; color: inherit; opacity: .6; }
.alert__close:hover { opacity: 1; }

/* Login — authentication error banner */
.login-hero__header--compact { margin-bottom: 1.5rem; }
.login-hero__auth-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.75rem;
  text-align: left;
}
.login-hero__auth-alert-icon {
  flex-shrink: 0;
  color: #991b1b;
  line-height: 0;
}
.login-hero__auth-alert-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(26, 25, 24, 0.75);
}

/* Quiz — widen the question card beyond the frontend's default max-width */
.health-check__body--quiz .health-check__content { max-width: 48rem; }

/* Survey question stem — italic sub-prompt below the title */
.health-check__stem {
  margin: 0.5rem 0 0;
  font-style: italic;
  color: rgba(26, 25, 24, 0.7);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Activate Training popup — extra space under the description */
.activate-popup__desc { margin-bottom: 1.5rem; }

/* ── Edit Schedule popup (dots menu + drag feedback) ── */
.training-popup__sidebar .separator { margin: 1.25rem 0; }
.training-popup__dots-menu { background: #fff; border: 1px solid #e8e1ce; border-radius: .5rem; box-shadow: 0 4px 12px rgba(0,0,0,.1); min-width: 12rem; overflow: hidden; }
.training-popup__dots-menu-item { display: block; width: 100%; padding: .5rem .75rem; font-size: .8125rem; background: none; border: none; cursor: pointer; text-align: left; color: #1a1918; }
.training-popup__dots-menu-item:hover { background-color: #f5f4f2; }
.training-popup__dots-menu-item--back { color: rgba(26,25,24,.5); font-size: .75rem; }
.training-popup__stage-item[draggable="true"] { cursor: grab; }
.training-popup__stage-item[draggable="true"]:active { cursor: grabbing; }

/* Staff quiz — counter pill above the question + sans-serif question font.
   The default .health-check__title serif reads too heavy at this size and
   the inline "1/3 · COURSE NAME" meta line was visual noise per client. */
.health-check__info--centered { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.quiz-counter-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; padding: .25rem .75rem; border-radius: 999px; background: #f5f4f2; color: rgba(26,25,24,.65); font-size: .8125rem; font-weight: 500; letter-spacing: .02em; }
.health-check__title--quiz { font-family: "Apfel Grotezk", system-ui, sans-serif; font-weight: 500; font-size: 1.625rem; }
@media (max-width: 47.99875em) {
  .health-check__title--quiz { font-size: 1.375rem; }
}

/* §1.5 Edit Schedule — card meta line, view/in-schedule buttons, hide-added toggle */
.training-popup__course-meta { font-size: .75rem; color: rgba(26,25,24,.55); text-transform: uppercase; letter-spacing: .04em; margin: .25rem 0 .5rem; }
.training-popup__course-bottom { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.training-popup__course-btn--view { background: #fff; color: #1a1918; border: 1px solid #e8e1ce; text-decoration: none; }
.training-popup__course-btn--view:hover { background: #f5f4f2; }
.training-popup__course-btn--in-schedule { background: #166534; color: #fff; cursor: default; }
.training-popup__hide-added { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .8125rem; color: rgba(26,25,24,.75); cursor: pointer; user-select: none; }
.training-popup__hide-added input { accent-color: #f56751; }

.training-section__subtitle {
  margin: 0.5rem 0 0;
  color: rgba(26, 25, 24, 0.7);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Badge locked state — small lock in top-right corner */
.badges-card__lock--corner { top: -0.25rem; right: -0.25rem; left: auto; transform: none; width: 1.25rem; height: 1.25rem; background: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.badges-card__lock--corner svg { width: 0.875rem; height: 0.875rem; }

/* Certificates page — modal + card interaction */
.bs-certificates__sections { display: flex; flex-direction: column; gap: 1.5rem; }
.bs-certificates__empty { padding: 2rem; text-align: center; margin: 0; }
.bs-certificates__subheading { font-size: 1.125rem; font-weight: 500; line-height: 120%; margin: 0; }
.bs-certificates__item { cursor: default; }
.bs-certificates__item[data-badge-modal-trigger] { cursor: pointer; }
.bs-certificates__card-link { display: contents; color: inherit; text-decoration: none; }
.bs-certificates__share { cursor: pointer; background: none; border: none; padding: 0; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: .25rem; }

.bs-achievement { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1rem .5rem; }
/* Badge modal size — adjust in #badge-achievement-modal rules below (max-width, padding, image size). */
#badge-achievement-modal .modal__container { max-width: 22rem; padding: 1.25rem 1.5rem; }
#badge-achievement-modal .bs-achievement { gap: .625rem; padding: .5rem .25rem .25rem; }
#badge-achievement-modal .bs-achievement__image { width: 7.5rem; height: 7.5rem; }
#badge-achievement-modal .bs-achievement__congrats,
#badge-achievement-modal .bs-achievement__course-intro { max-width: 100%; }
.bs-achievement__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: #6b7280; margin: 0; }
.bs-achievement__image { width: 10rem; height: 10rem; display: flex; align-items: center; justify-content: center; }
.bs-achievement__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bs-achievement__title { margin: 0; }
.bs-achievement__subtitle { margin: 0; color: #6b7280; }
.bs-achievement__earned-date { margin: 0; color: #0d9488; font-size: .875rem; font-weight: 500; }
.bs-achievement__congrats { margin: .5rem 0 0; color: #1a1918; max-width: 28rem; }
.bs-achievement__course-intro { margin: .5rem 0 0; color: #1a1918; max-width: 28rem; line-height: 150%; }
.bs-achievement__congrats[hidden],
.bs-achievement__course-intro[hidden],
.bs-achievement__earned-date[hidden],
.bs-achievement__earned-by[hidden],
.bs-achievement__continue[hidden] { display: none !important; }
.bs-achievement__earned-by { width: 100%; align-self: stretch; background: #f9f7f2; border-radius: .75rem; padding: 1rem 1.25rem; text-align: left; margin-top: .5rem; }
.bs-achievement__earned-by-label { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; color: #6b7280; text-align: left; }
.bs-achievement__earned-by-course { margin: 0; font-family: inherit; font-weight: 500; font-size: 1rem; line-height: 130%; color: #1a1918; text-align: left; }
.bs-achievement__share { margin-top: .5rem; }

/* Certificate/badge share dropdown — page-local wrap used inside cards */
.bs-certificates__share-wrap { position: relative; display: inline-flex; }
.bs-certificates__share-wrap .bs-certificates__share-links { position: absolute; bottom: 100%; right: 0; display: none; gap: .5rem; background: #fff; border: 1px solid #e8e1ce; border-radius: .5rem; padding: .5rem; box-shadow: 0 4px 12px rgba(0,0,0,.1); margin-bottom: .25rem; z-index: 10; }
.bs-certificates__share-wrap.is-open .bs-certificates__share-links { display: flex; }
.bs-certificates__share-wrap .bs-certificates__share-links a { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; color: #1a1918; }

/* Sticky side-menu on leaderboard pages (§1.7 & §2.4). Height shrinks to
   content — a fixed 100vh aside would get released near the bottom of its
   containing block and jump above the sticky line. */
@media (min-width: 48.0625em) {
  .leaderboard__aside,
  .bs-leaderboard__aside {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    width: 100%;
  }
}
.leaderboard__aside .aside__link,
.bs-leaderboard__aside .aside__link { cursor: pointer; }

/* Section anchors: leave room so the sticky header doesn't cover the heading. */
.leaderboard__card[id] { scroll-margin-top: 1.5rem; }


/* Give the last card enough room so scrollspy can reliably activate it. */
.leaderboard__main::after,
.bs-leaderboard__main::after {
  content: "";
  display: block;
  min-height: 40vh;
}


.dashboard__company-item picture img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.benchmark-card__info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
}

.benchmark-card__info-btn:hover {
  opacity: 0.8;
}

.benchmark-modal p {
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.modal__container--wide {
  max-width: 40rem;
}

.business-home__training-empty {
  margin: 0;
  padding: 1.5rem 0;
  color: rgba(26, 25, 24, 0.7);
  line-height: 1.5;
}

#prereq-block-modal .modal__title {
  margin: 0 0 0.75rem;
  padding-right: 2.5rem;
}
#prereq-block-modal .modal__body p {
  margin: 0 0 1.5rem;
  line-height: 1.5;
  color: rgba(26, 25, 24, 0.8);
}
#prereq-block-modal .form__actions {
  justify-content: flex-end;
  margin-top: 0;
}
#prereq-block-modal .form__actions .btn {
  min-width: 6rem;
}

#change-password-modal .form__actions .btn {
  min-width: 8rem;
  padding: 0.75rem 1.5rem;
}

/* Staff profile page (§2.6) has no side-aside, so the upstream
   ``bs-profile__container`` 15rem-aside grid leaves the main column
   shrunk and pushed left. Fall back to a single full-width column. */
[data-staff-profile] {
  grid-column: 1 / -1;
}
.bs-profile:has([data-staff-profile]) .bs-profile__container {
  grid-template-columns: 1fr;
}
@media (min-width: 47.99875em) {
  .bs-profile__content {
    grid-template-columns: 1fr 1.6fr;
  }
}

.bs-profile__right-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.bs-profile__row--static .input,
.bs-profile__row--static .select select {
  display: block;
  width: 100%;
}

.bs-profile__row--static .bs-profile__item,
.bs-profile__row--readonly .bs-profile__item {
  width: 100%;
}

.bs-profile__row--readonly .bs-profile__value {
  display: block;
}

.bs-profile__save-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.bs-profile__status {
  margin: 0;
  text-align: right;
}

/* Course detail CTA flash — fires once when the button flips from Start
   Course → Start Quiz so the user notices the state change after the
   video ends. Combines a soft scale bounce with an expanding pulse ring. */
@keyframes ctaFlashBounce {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.08); }
  40%  { transform: scale(0.97); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes ctaFlashPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 103, 81, 0.7); }
  70%  { box-shadow: 0 0 0 12px rgba(245, 103, 81, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 103, 81, 0); }
}
.details__btn--cta-flash {
  animation: ctaFlashBounce 0.7s ease-out 0s 1,
             ctaFlashPulse 1.4s ease-out 0s 3;
}

.details__btn[data-course-cta] {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  gap: 0.5rem;
}

.details__text[hidden] { display: none; }

.staff-leaderboard__header { margin-bottom: 1rem; }
.staff-leaderboard__title { margin: 0; font-size: 1.125rem; }
.staff-leaderboard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.staff-leaderboard__item { display: flex; align-items: center; gap: 0.75rem; }
.staff-leaderboard__rank { margin-right: 0.25rem; }
.staff-leaderboard__avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.staff-leaderboard__info { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.staff-leaderboard__name { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: #1a1918; }
.staff-leaderboard__score { font-size: 0.875rem; color: rgba(26,25,24,.7); }
.staff-leaderboard__btn { margin-top: 1rem; width: 100%; justify-content: center; }

.tag--green { background: #e6f5ea; color: #1f8a4c; }

.feedback-popup__icon { color: #f56751; }

/* §2.4 Staff leaderboard: when department panel hidden, spread remaining 2 panels full width */
.bs-leaderboard__stats--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 47.99875em) {
  .bs-leaderboard__stats--two { grid-template-columns: 1fr; }
}

/* §2.3 Course quiz: course name eyebrow next to question count in header */
.health-check__course-name {
  margin-left: 0.5rem;
  font-family: "DM Mono", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1a1918;
}

/* §2.3 Quiz result card — single centered card with stat boxes */
.quiz-result { padding: 3rem 1rem; }
.quiz-result__container { display: flex; justify-content: center; }
.quiz-result__card {
  width: 100%;
  max-width: 36rem;
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.quiz-result__eyebrow {
  margin: 0;
  font-family: "DM Mono", monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1918;
}
.quiz-result__title {
  margin: 0;
  font-family: "Apfel Grotezk";
  font-size: 1.875rem;
  line-height: 1.2;
  color: #1a1918;
}
.quiz-result__scores {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.quiz-result__score-box {
  flex: 1 1 12rem;
  max-width: 14rem;
  border: 1px solid rgba(26, 25, 24, 0.18);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-family: "Apfel Grotezk";
  font-size: 1.125rem;
}
.quiz-result__score-label { color: #1a1918; }
.quiz-result__score-value { color: #f56751; font-weight: 600; }
.quiz-result__desc {
  margin: 0;
  color: rgba(26, 25, 24, 0.7);
  font-size: 0.9375rem;
  max-width: 28rem;
}
.quiz-result__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  align-items: center;
}
.quiz-result__actions .btn { min-width: 16rem; }

/* Dashboard layout: prevent Overview from stretching to fill its grid row.
   app.min.js (and/or upstream CSS) sets grid-template-rows with fixed pixel
   values, which makes the Overview heading row grow far taller than its
   content. Force auto rows and pin items to the top. */
.dashboard__center {
  grid-template-rows: auto !important;
  align-content: start;
}
.dashboard__overview {
  grid-template-rows: auto !important;
  align-self: start;
}

.dashboard__rankings-empty p {
  margin: 0;
  color: #5f5e5d;
}

.grecaptcha-badge { visibility: hidden !important; }

/* Native [hidden] gets stomped by ``.onboarding-form__item { display:grid }``;
   force it back so JS toggling the attribute actually hides the row. */
.onboarding-form__item[hidden] { display: none; }

/* ── Form error highlight (signup details + similar) ────── */
.input--error,
.input.input--error {
  border-color: #d63a3a !important;
  background-color: #fef2f2;
}
.select--error,
.onboarding-form__select.select--error {
  border: 1px solid #d63a3a;
  background-color: #fef2f2;
  border-radius: 0.5rem;
}
.onboarding-form__error {
  color: #d63a3a;
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

/* ── Signup plan page (§1.1) ────────────────────────────── */
/* Bullet list rows are tall when a feature wraps to two lines; align
   the check icon to the top so it doesn't visually float in the middle. */
.sign-up-list__item {
  align-items: flex-start;
}
.sign-up-list__check {
  margin-top: 0.125rem;
  flex-shrink: 0;
}
/* "Everything in Aware, plus:" leads into the list rather than being a ticked item. */
.sign-up-list__item--lead {
  font-weight: 500;
  color: #1a1918;
}

/* ``.plan-card__body`` has ``flex-grow:1`` so cards equalise height; the
   inner grid (``.sign-up-list``) was distributing the extra space
   between the title and the bullet list, pushing the bullets to the
   bottom. Pin alignment to the top instead. */
.plan-card__body.sign-up-list,
.plan-card__body {
  align-content: start;
}

/* Cycle labels next to the Monthly/Yearly switch — JS toggles
   ``.sign-up__cycle--active`` to bold whichever is currently selected. */
.sign-up__cycle {
  font-weight: 400;
  transition: font-weight 0.15s ease;
}
.sign-up__cycle--active {
  font-weight: 700;
}

/* Inline "Save 20%" badge — matches Psyber's teal accent (#50a5a8). */
.sign-up__save-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  background: rgba(80, 165, 168, 0.15);
  color: #2f7a7d;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
}

/* Enterprise "Starts at 200+ users" — a plain label styled like the tier
   dropdowns next to it, with no arrow and nothing to open. */
.plan-card__static-field {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 47px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid #e8e1ce;
  border-radius: 12px;
  background-color: #fff;
  color: #1a1918;
  font-size: .875rem;
  line-height: normal;
}
/* Resilient's BOOK A DEMO sits beside START FREE TRIAL (in a CTA row). */
.plan-card__cta-row .plan-card__cta-form { flex: 1 1 auto; width: auto; min-width: 10rem; }
.plan-card__cta-row .plan-card__btn--demo { flex: 1 1 auto; }
.plan-card__cta-row .plan-card__cta-form .plan-card__btn { width: 100%; }
/* Two buttons share the row, so trim their side padding to fit text + arrow. */
.plan-card__cta-row .plan-card__btn { padding-left: 1rem; padding-right: 1rem; white-space: nowrap; }

/* Stack/spread the two Enterprise CTA buttons inside the header. */
.plan-card__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.plan-card__cta-row .plan-card__btn {
  flex: 1 1 0;
  min-width: 10rem;
}
.plan-card__cta-form {
  width: 100%;
}

/* Training card progress ring alignment — date row pushed info into row 1
   while icon kept row-span:2, so ring centered across rows 1+2 sat below
   the PROGRESS/percent text. Span info across both rows and center it. */
.training-card__progress-info {
  grid-row: span 2;
  justify-content: center;
}
/* Personal Security Score floats to the top on mobile — client request, item 5. */
@media (max-width: 63.99875em) {
  .dashboard__risk {
    order: 0;
  }
}

/* Pre/post-course confidence scale: fill the selected dot AND every dot
   before it (slider-style), not just the one clicked — client request.
   Sibling combinators only reach forward, so :has() is used to colour an
   option when a *later* option holds the checked radio. Browsers without
   :has() degrade gracefully to the single-dot highlight from style.css. */
.feedback-popup__option:has(~ .feedback-popup__option .feedback-popup__radio:checked) .feedback-popup__radio,
.feedback-popup__radio:checked {
  border-color: #f56751;
  background-color: #f56751;
}

/* Training card CTA wrapping fix — compiled style.css gives the progress
   icon ``grid-row: span 2``, which forces the CTA onto a second row and
   stretches the card. Frontend dev confirmed dropping the span is the
   minimal fix. */
.training-card__icon { grid-row: auto; }

/* Owner-removed course: gray out the whole card and disable the CTA. The
   button stays clickable so the click handler can surface the toast. */
.training-card--unavailable { opacity: .55; filter: grayscale(0.5); }
.training-card--unavailable .training-card__title,
.training-card--unavailable .training-card__desc,
.training-card--unavailable .training-card__progress-status,
.training-card--unavailable .training-card__progress-value { color: #6b6b6b; }
.training-card__btn--unavailable { cursor: not-allowed; }

/* Completed tab: modules grouped under their category (mirrors the badges
   page). Heading sits above each card group. */
.bs-training__category + .bs-training__category { margin-top: 2rem; }
.bs-training__category-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
/* Badge earned from a completed course (shown where the progress ring was). */
.training-card__badge {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.training-card__badge img { width: 40px; height: 40px; object-fit: contain; }
.training-card__badge-name { font-size: .8125rem; font-weight: 600; }

/* Upcoming tab: stage panel header shows the start month + unlock countdown
   in place of the old "Stage N" title. */
.bs-training__stage-subtitle {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  color: #6b6b6b;
}

/* Human Defence Benchmark — 4 maturity-level colours for the legend dots
   and pillar progress fills. Overrides the compiled 3-colour scheme
   (low/medium/high) without editing style.css. */
/* Stack the header so the 4-chip stages legend gets its own full-width
   row — 4 chips don't fit next to the title with the compiled flex-row. */
.benchmark-card__header:has(.benchmark-card__legend--stages) {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
.benchmark-card__legend--stages {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 1.5rem;
  font-size: .9375rem;
}
.benchmark-card__legend--stages .benchmark-card__legend-item { white-space: nowrap; }
.benchmark-card__legend-item--unaware::before { background-color: #e56e67; }
.benchmark-card__legend-item--compliant::before { background-color: #e88a52; }
.benchmark-card__legend-item--embedded::before { background-color: #eec25d; }
.benchmark-card__legend-item--empowered::before { background-color: #68b473; }

.benchmark-card__progress-fill--unaware { background-color: #e56e67; }
.benchmark-card__progress-fill--compliant { background-color: #e88a52; }
.benchmark-card__progress-fill--embedded { background-color: #eec25d; }
.benchmark-card__progress-fill--empowered { background-color: #68b473; }

.benchmark-card__item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.benchmark-card__item-meta {
  display: inline-flex;
  align-items: baseline;
  gap: .75rem;
  font-family: "DM Mono", monospace;
  font-size: .8125rem;
}
.benchmark-card__item-category {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  color: #5f5e5d;
}
.benchmark-card__item-category--unaware,
.benchmark-card__item-category--compliant { color: #cf4943; }
.benchmark-card__item-category--embedded { color: #b08a3a; }
.benchmark-card__item-category--empowered { color: #50a55a; }
.benchmark-card__item-score {
  font-weight: 500;
  font-size: 1rem;
  color: #1a1918;
}

/* Logo sizing — compiled style.css forces the auth/onboarding header logo
   down to 7.5rem (120px), and a mobile rule caps signup header logos to
   6.875rem (~110px). Both squash the 162x41 brand asset. Pin the intended
   dimensions back. */
.health-check-header__logo,
.header__logo { width: 162px; flex-shrink: 0; }
.health-check-header__logo img,
.header__logo img,
.logo img { width: 162px; height: 41px; max-width: 162px; }

/* The compiled .avatar-upload__delete rule sets ``display: flex`` which
   overrides the HTML ``hidden`` attribute (browsers normally hide hidden
   elements via ``display: none``, but any explicit ``display`` wins).
   Re-assert hidden so the trash button only appears once the user picks
   an image. */
.avatar-upload__delete[hidden] { display: none; }

/* Owner-dashboard Active Training header: title-block left, action buttons
   right, buttons inline. */
.dashboard__training-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.dashboard__training-subheading {
  margin: .25rem 0 0;
  color: #5f5e5d;
  font-size: .9375rem;
}

/* Leaderboard Top Performers list — compact rank+avatar+name+metric row. */
.top-performers__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.top-performers__item { display: flex; align-items: center; gap: 1rem; padding: .5rem 0; }
.top-performers__avatar { border-radius: 50%; flex-shrink: 0; }
.top-performers__info { display: flex; flex-direction: column; gap: .125rem; flex: 1; min-width: 0; }
.top-performers__name { font-weight: 500; color: #1a1918; }
.top-performers__dept { font-size: .8125rem; color: #5f5e5d; text-transform: uppercase; letter-spacing: 1.5px; }
.top-performers__metric { font-weight: 500; color: #1a1918; font-size: 1.125rem; }

/* Per-band tint for the Risk Score cell on the leaderboard table. */
.risk-score-cell--strong { color: #50a55a; }
.risk-score-cell--good { color: #b08a3a; }
.risk-score-cell--developing { color: #e88a52; }
.risk-score-cell--at-risk { color: #cf4943; }

/* Staff dashboard "Has your data been breached?" widget — homepage-only,
   dismissable. Persists dismissal in localStorage so it stays gone across
   sessions. The card markup is currently removed from the staff dashboard
   (client request); rules kept for when it comes back. */
.psyberwatch-card { position: relative; padding: 1.5rem; }
.psyberwatch-card[hidden] { display: none; }
.psyberwatch-card__close {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: none; padding: .25rem; cursor: pointer;
  color: #5f5e5d;
}
.psyberwatch-card__close:hover { color: #1a1918; }
.psyberwatch-card__title {
  font-weight: 500; font-size: 1.0625rem; margin: 0 1.5rem .5rem 0; color: #1a1918;
}
.psyberwatch-card__text { color: #5f5e5d; font-size: .9375rem; margin: 0 0 1rem; }
.psyberwatch-card__btn { width: 100%; }

/* Badge list icons — compiled style.css sizes the container but doesn't
   constrain the image, so SVGs render at their intrinsic 147x165. */
.badges-card__icon img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Staff dashboard layout — the inner two-column grid stretches both columns
   to the tallest one (sidebar). When the Overview tile is hidden (training
   not activated), the content grid stretches its remaining rows to fill,
   ballooning the greeting hero. Pin to start so rows shrink to content. */
.business-home__content { align-content: start; }

/* Name-initials fallback for users without a profile_image — orange circle
   matching the Psyber accent colour. Size is set inline by the template tag
   so the same class covers 40px (nav/leaderboard rows) to 100px (welcome
   hero) without per-size rules. */
.user-avatar { border-radius: 50%; object-fit: cover; }
.user-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #F56751;
  color: #fff;
  font-weight: 500;
  font-family: "DM Mono", monospace;
  letter-spacing: .5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Header / mobile-menu initials avatar: the round <picture> wrapper is a
   fixed 2.5rem with overflow:hidden, but the initials <span> carries an
   inline px size from the {% user_avatar %} tag, so it overflowed and the
   letters were clipped/off-centre. Make the initials fill the wrapper. */
.header__profile .user-avatar--initials,
.mobile-menu__user .user-avatar--initials {
  width: 100% !important;
  height: 100% !important;
}

/* Course preview detail video: keep Vimeo iframes (and fallback <video>)
   in a rounded, responsive 16:9 frame instead of the raw fixed-height
   iframe, matching ../psyber-frontend's demo-course-details.html block. */
.details__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #1a1918;
}
.details__video iframe,
.details__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.details__video--rewatch iframe,
.details__video--rewatch video {
  opacity: 0.72;
  filter: grayscale(0.25);
}
.details__video-rewatch-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  background: rgba(26, 25, 24, 0.75);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.details__completed-date {
  margin: 0.25rem 0 0;
  color: #50a55a;
  font-size: 0.875rem;
  font-weight: 500;
}
.details__badge-earned {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  margin-bottom: 0.75rem;
}
.course-card__completed-date {
  margin: 0;
  color: #50a55a;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}
.training-card__completed-date {
  margin: 0;
  color: #50a55a;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Staff dashboard "My Training": completed cards dim (the view sorts them
   to the bottom). */
.course-card--completed { opacity: .65; transition: opacity .3s ease; }
.course-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .5rem;
  color: #5f5e5d;
  font-size: .8125rem;
}
.course-card__meta-item { display: inline-flex; align-items: center; gap: .375rem; }
.course-card__meta-item--completed { color: #50a55a; }

/* Score card level indicator — active dots take the colour of the
   current maturity stage so the bar reflects "where you sit" rather
   than always being red. Matches the legend colours used on the
   pillar bars in the Human Defence Benchmark card. */
.score-card__level-indicator--stage-1 span.is-active { background-color: #e56e67; }
.score-card__level-indicator--stage-2 span.is-active { background-color: #e88a52; }
.score-card__level-indicator--stage-3 span.is-active { background-color: #eec25d; }
.score-card__level-indicator--stage-4 span.is-active { background-color: #68b473; }
/* Settings — notification types (descriptions + controls) */
.settings-notification__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.settings-notification__csrf {
  display: none;
}

.settings-notification__feedback {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
}

.settings-notification__feedback:has(#notification-settings-status:not(:empty)),
.settings-notification__feedback:has(#notification-settings-error-all:not(:empty)) {
  display: flex;
}

.settings-notification__feedback #notification-settings-status:empty,
.settings-notification__feedback #notification-settings-error-all:empty {
  display: none;
}

.settings-notification__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.settings-notification__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-width: 0;
}

.settings-notification__head .settings-card__name {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-notification__switch {
  flex: 0 0 auto;
  margin: 0;
}

.settings-notification__desc {
  margin: 0;
  max-width: 40rem;
  padding-right: 3.5rem;
}

.settings-notification__select {
  flex: 0 0 auto;
  width: 11.5rem;
  max-width: 100%;
}

.settings-notification__select .select {
  width: 100%;
}

.settings-notification__select select {
  width: 100%;
  min-height: 2.5rem;
}

@media (max-width: 47.9375rem) {
  .settings-notification__desc {
    padding-right: 0;
  }

  .settings-notification__head {
    align-items: flex-start;
  }

  .settings-notification__item--cadence .settings-notification__head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .settings-notification__select {
    width: 100%;
  }
}

/* Report dashboard — AJAX loading states */
.report-ajax-loading {
  text-align: center;
  padding: 2rem 1rem;
  color: #5f5e5d;
  font-size: 0.875rem;
}

[data-ajax-region].is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* ── Personal Security Score — staff display (Trello: Staff User Security Score) ── */
.risk-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.risk-card__info {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #5f5e5d;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.risk-card__info:hover {
  background: #f3f1ec;
  color: #1a1918;
}

/* "/ 10" context sits beneath the big score number inside the gauge. */
.risk-score__out-of {
  position: absolute;
  top: 8.75rem;
  left: 50%;
  transform: translateX(-50%);
  color: #5f5e5d;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}

/* Score band / level name ("Developing", "Level 2 – Embedded") in Psyber's
   label style — uppercase DM Mono with a brand-orange status dot — instead of
   a filled pastel pill (client: the bubble looked AI-generated). The
   "Complete HealthCheck" button shares the class and keeps its button look. */
.risk-score__badge:not(.btn),
.answers-score__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  color: #1a1918;
  font-family: "DM Mono", monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.risk-score__badge:not(.btn)::before,
.answers-score__badge::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #f56751;
}

/* Contextual blurb beneath the bubble. */
.risk-score__description {
  margin: 1rem auto 0;
  max-width: 22rem;
  text-align: center;
  color: #5f5e5d;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ── Read-only answers page ── */
.answers-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e8e1ce;
  border-radius: 1rem;
  background: #fcfaf5;
}

.answers-privacy__icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: #5f5e5d;
}

.answers-privacy__text {
  margin: 0;
  color: #5f5e5d;
  font-size: 1rem;
  line-height: 1.4;
}

.answers-score {
  margin-bottom: 0;
}

/* Answers page: questions on the left, score + privacy note in a side column
   (stacked above the questions on narrow screens). */
.answers-page__inner {
  grid-template-columns: minmax(0, 1fr);
}

.answers-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  grid-template-areas: "main aside";
  gap: 2rem;
  align-items: start;
}

.answers-layout__main {
  grid-area: main;
  min-width: 0;
}

.answers-layout__aside {
  grid-area: aside;
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.answers-layout__aside .answers-score__row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.answers-layout__aside .answers-score__value {
  font-size: 3rem;
}

.answers-layout__aside .answers-privacy {
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
}

@media (max-width: 61.99875em) {
  .answers-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "aside" "main";
  }

  .answers-layout__aside {
    position: static;
  }
}

.answers-score__label {
  display: block;
  color: #5f5e5d;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.answers-score__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.5rem 0 0.25rem;
}

.answers-score__value-group {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.answers-score__value {
  color: #1a1918;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  font-family: "Apfel Grotezk";
}

.answers-score__out-of {
  color: #5f5e5d;
  font-size: 1.125rem;
}

.answers-score__badge {
  flex-shrink: 0;
}

.answers-score__date {
  display: block;
  color: #5f5e5d;
  font-size: 1rem;
}

.answers__heading {
  margin: 0 0 1rem;
  color: #5f5e5d;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.answers-question {
  margin-bottom: 1rem;
}

.answers-question__label {
  display: block;
  color: #5f5e5d;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.answers-question__text {
  margin: 0.5rem 0 0;
  color: #1a1918;
  font-size: 1.25rem;
  font-weight: 600;
}

.answers-question__stem {
  margin: 0.375rem 0 0;
  color: #5f5e5d;
  font-size: 1rem;
}

/* Two options per row to cut the page length (one per row on phones). */
.answers-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (max-width: 47.99875em) {
  .answers-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.answers-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid #e8e1ce;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  color: #1a1918;
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* Neutral, not green: the chosen answer isn't necessarily the right habit. */
.answers-option--selected {
  border-color: #8a857b;
  background: #f1ece1;
  color: #1a1918;
  font-weight: 500;
}

.answers-option__radio {
  flex-shrink: 0;
  margin-top: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #c9c6bf;
  border-radius: 50%;
  background: #fff;
}

.answers-option--selected .answers-option__radio {
  border-color: #5f5e5d;
  background: #5f5e5d;
  box-shadow: inset 0 0 0 3px #fff;
}

/* Import popup: "Download template" link in the subtitle. */
.import-popup__subtitle .import-popup__template-link {
  color: #1a1918;
  font-weight: 500;
  text-decoration: underline;
}

/* Security Score info modal — breathing room around the description. */
#security-score-info-modal .modal__desc {
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

/* ── Dashboard "Where to focus the next 3 months" actions widget ──
   Numbered list in Psyber's own type: mono due line, big 1/2 count,
   the reason under each action, a green row once done. */
.pss-actions {
  margin-top: 1.5rem;
  color: #1a1918;
}

.pss-actions__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.pss-actions__deadline {
  margin: 0 0 0.35rem;
  color: rgba(26, 25, 24, 0.6);
  font: 400 0.8125rem "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pss-actions__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
}

.pss-actions__count {
  flex-shrink: 0;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
}

.pss-actions__count small {
  font-size: 1.125rem;
  color: rgba(26, 25, 24, 0.45);
}

.pss-actions__champion-note {
  margin: 0 0 1rem;
  color: #5f5e5d;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pss-actions__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pss-action;
}

.pss-actions__item {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 1rem 0.75rem;
  border-top: 1px solid #ece6da;
  border-radius: 0.75rem;
  counter-increment: pss-action;
  transition: background-color 0.4s ease;
}

.pss-actions__item::before {
  content: counter(pss-action, decimal-leading-zero);
  padding-top: 0.1rem;
  color: #f4694f;
  font: 500 1.25rem "DM Mono", monospace;
}

.pss-actions__item:first-child {
  border-top-color: transparent;
}

.pss-actions__item.is-completed {
  border-top-color: transparent;
  background: #eef6f0;
}

.pss-actions__item.is-completed::before {
  color: #2e9e5b;
}

.pss-actions__body {
  grid-column: 2;
  min-width: 0;
}

.pss-actions__text {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.pss-actions__text:hover {
  text-decoration: underline;
}

.pss-actions__why {
  margin: 0.3rem 0 0;
  color: rgba(26, 25, 24, 0.65);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pss-actions__mark {
  margin-top: 0.75rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid #1a1918;
  border-radius: 6.25rem;
  background: #fff;
  color: #1a1918;
  font: 500 0.8125rem "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.pss-actions__mark:hover {
  background: #1a1918;
  color: #fff;
}

.pss-actions__done {
  grid-column: 3;
  padding: 0.3rem 0 0;
  border: none;
  background: none;
  color: #2e9e5b;
  font: 500 0.8125rem "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.pss-actions__done:hover {
  text-decoration: underline;
}

.pss-actions__mark[hidden],
.pss-actions__done[hidden] {
  display: none;
}

/* Mobile/narrow dashboard order: greeting + training first, sidebar cards
   below. The compiled CSS gives .business-home__content order:1 but leaves
   the sidebar at order:0, so the score/badges/leaderboard wrongly stack on
   top. Push the sidebar below the main content. */
@media (max-width: 79.99875em) {
  .business-home__sidebar {
    order: 2;
  }
}

/* ── Course detail page (staff) — client feedback restructure ──────────
   Layout: badge + "What You'll Learn" card on the left, video on the right.
   Video fills its container; Start Course / Start Quiz live over the video. */

/* 1 — Title in Apfel Grotezk (less playful than PP Editorial). */
.details__title.title {
  font-family: "Apfel Grotezk", sans-serif;
  font-weight: 500;
}

/* 9 — Sidebar (badge + learn box) on the left, video on the right. Desktop
   only: on narrow screens the design's single column applies (this rule used
   to force two squeezed columns onto phones). */
@media (min-width: 64em) {
  .details__content {
    -ms-grid-columns: minmax(18rem, 26rem) 1fr;
    grid-template-columns: minmax(18rem, 26rem) 1fr;
  }
  /* Business course preview has the video first in the markup, so the wide
     track goes first: large video/description, small badge + details card. */
  .details__content--preview {
    -ms-grid-columns: minmax(0, 1fr) minmax(18rem, 26rem);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  }
}
/* Preview: keep Key Learnings off the bottom edge of the video. */
.details__content--preview .details__image { margin-bottom: 1.5rem; }
.details__label svg { flex-shrink: 0; }

/* 7 — Video fills the container, no card padding/white space around it. */
.details__image {
  margin-bottom: 0;
}
.details__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #1a1918;
}
.details__video iframe,
.details__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 4 & 5 — Static cover with Start Course on top; after the video is watched
   the same overlay hosts the Start Quiz button over the video. */
.course-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1918;
  background-size: cover;
  background-position: center;
}
.course-overlay--started {
  background: none;
  pointer-events: none;
}
.course-overlay__btn {
  pointer-events: auto;
}
/* Once the video is playing, drop the Start Course button. The same overlay
   button is rebuilt into Start Quiz on completion (state flips off "start"),
   which makes it reappear over the video. */
.course-overlay--started .course-overlay__btn[data-course-cta-state="start"] {
  display: none;
}

/* 9 — "What You'll Learn" white box with green ticks. */
.details__learn-card {
  padding: 1.5rem;
}
.details__text--ticked ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.details__text--ticked > p,
.details__text--ticked li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .5rem;
}
.details__text--ticked > p:last-child,
.details__text--ticked li:last-child {
  margin-bottom: 0;
}
.details__text--ticked > p::before,
.details__text--ticked li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2e9e5b;
  font-weight: 700;
}

/* Header Start Quiz button stays hidden until the video is watched, then the
   JS reveals it (it mirrors the over-video button). */
.details__btn.is-hidden {
  display: none;
}

/* Stack on narrow screens with the video first (it's the primary content). */
@media (max-width: 63.99875em) {
  .details__main {
    order: -1;
  }
}

/* Staff My Training sidebar — heading above the certificate progress card,
   and a small eyebrow above the "Your Next Certificate" copy. */
.bs-training__aside-heading { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(26, 25, 24, 0.55); }
.bs-training__certificate-eyebrow { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(26, 25, 24, 0.6); }

/* §2.4 Staff leaderboard — sidebar-less layout, filter dropdown, own-row
   peach highlight, points delta on the summary tile. */
.bs-leaderboard--staff .bs-leaderboard__container { padding-left: 1rem; padding-right: 1rem; }
.bs-leaderboard__main--fullwidth { width: 100%; max-width: 72rem; margin: 0 auto; }
.bs-leaderboard__topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.bs-leaderboard__filter { display: inline-flex; align-items: center; gap: .5rem; }
.bs-leaderboard__filter-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(26,25,24,.55); }
.bs-leaderboard__filter-select { border: 1px solid #e8e1ce; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; color: #1a1918; background: #fff; cursor: pointer; }
.bs-leaderboard__stats-delta { display: inline-block; color: #2e9e5b; font-weight: 500; font-size: .8125rem; white-space: nowrap; }
/* "Your Points" — total on the right with the this-month delta under it. */
.bs-leaderboard__stats-points { display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; margin-left: auto; }
/* Own row peach highlight — light peach so the current user stands out */
.table__row--highlight { background-color: #fbe7da; }
.table__row--highlight .table__trigger { background-color: transparent; }

/* ── Edit Training Schedule sidebar (§2.4 client feedback) ──────────────
   New sidebar item layout: drag grip + name/tags column + dots menu.
   Ported from the frontend prototype; the compiled CSS still has the old
   single-line layout, so these override/extend it. */
.training-popup__stage-item { align-items: flex-start; gap: .5rem; padding: .625rem .5rem .625rem .25rem; cursor: grab; }
.training-popup__stage-item.is-dragging { opacity: .4; cursor: grabbing; }
.training-popup__stage-drag { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1rem; height: 1.5rem; color: #1a1918; opacity: .4; cursor: grab; touch-action: none; }
.training-popup__stage-content { display: flex; flex-direction: column; gap: .375rem; flex: 1; min-width: 0; }
.training-popup__stage-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.tag--new { background-color: #f56751; border: none; color: #fff; }
.tag--due { border-color: rgba(26,25,24,.18); background-color: rgba(26,25,24,.06); color: #1a1918; }
/* Client-side "Show more" pager for the available-courses grid */
.training-popup__show-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 1rem 0; }

/* ── §1.9 Per-course insights (Overview + Users) ───────────────── */
.course-report__container { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.course-report__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.course-report__eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; color: rgba(26,25,24,.55); text-transform: uppercase; }
.course-report__title { margin: 0.25rem 0 0.25rem; }
.course-report__sub { margin: 0; font-size: 0.9375rem; color: rgba(26,25,24,.65); }
.course-report__actions { display: flex; align-items: center; gap: 0.5rem; }
.course-report__export { position: relative; }
.course-report__export summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; }
.course-report__export summary::-webkit-details-marker { display: none; }
.course-report__export-menu { position: absolute; right: 0; top: calc(100% + 0.25rem); min-width: 10rem; background: #fff; border: 1px solid #e8e1ce; border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 0.375rem; z-index: 5; display: flex; flex-direction: column; }
.course-report__export-menu a { padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #1a1918; text-decoration: none; border-radius: 0.375rem; }
.course-report__export-menu a:hover { background: #f5f4f2; }

/* Org report (§1.9) export dropdown — the compiled style.css styles the
   trigger button but never shipped rules for the menu, so it rendered
   unstyled when opened. Match the course-report dropdown. */
.report-page__export-menu { position: absolute; right: 0; top: calc(100% + 0.25rem); min-width: 14rem; background: #fff; border: 1px solid #e8e1ce; border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 0.375rem; z-index: 20; display: flex; flex-direction: column; }
.report-page__export-menu[hidden] { display: none; }
.report-page__export-link { padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #1a1918; text-decoration: none; border-radius: 0.375rem; }
.report-page__export-link:hover { background: #f5f4f2; }

/* Report table pagination — 3-column grid keeps the page numbers centered
   whether or not Prev/Next are present (compiled style.css uses
   space-between, which shifted them to the edge on the first/last page).
   Numbers wrap instead of overflowing the card; the template also windows
   the range (… markers) so long paginators stay short. */
.card__footer .pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.pagination__side { display: flex; align-items: center; min-width: 0; }
.pagination__side--end { justify-content: flex-end; }
.pagination__numbers { flex-wrap: wrap; justify-content: center; }

/* Tabs */
.course-report__tabs { display: flex; gap: 1.75rem; border-bottom: 1px solid #e8e1ce; margin-bottom: 1.5rem; }
.course-report__tab { display: inline-block; padding: 0.75rem 0; font-size: 0.9375rem; color: rgba(26,25,24,.55); text-decoration: none; border-bottom: 2px solid transparent; }
.course-report__tab.is-active { color: #f56751; border-bottom-color: #f56751; }

/* KPI tiles */
.course-report__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.875rem; margin-bottom: 1rem; }
.course-report__kpi { padding: 1rem 1.25rem; }
.course-report__kpi-label { margin: 0; font-size: 0.6875rem; letter-spacing: 0.08em; color: rgba(26,25,24,.55); text-transform: uppercase; }
.course-report__kpi-value { margin: 0.25rem 0 0.25rem; font-size: 2rem; font-weight: 500; line-height: 1.1; color: #1a1918; }
.course-report__kpi-note { margin: 0; font-size: 0.8125rem; color: rgba(26,25,24,.55); }

/* Two-panel row */
.course-report__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 63.99em) { .course-report__panels { grid-template-columns: 1fr; } }
.course-report__panel { padding: 1.25rem 1.5rem; }
.course-report__panel-title { margin: 0 0 1rem; font-size: 1rem; font-weight: 500; color: #1a1918; }

/* Progress breakdown bars */
.course-report__breakdown { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.course-report__breakdown-row { display: grid; grid-template-columns: 0.75rem 6rem 1fr auto; gap: 0.625rem; align-items: center; font-size: 0.875rem; }
.course-report__breakdown-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.course-report__breakdown-row[data-band="pass"] .course-report__breakdown-dot { background: #2e9e5b; }
.course-report__breakdown-row[data-band="fail"] .course-report__breakdown-dot { background: #d63a3a; }
.course-report__breakdown-row[data-band="incomplete"] .course-report__breakdown-dot { background: #d9a45e; }
.course-report__breakdown-row[data-band="none"] .course-report__breakdown-dot { background: rgba(26,25,24,.35); }
.course-report__breakdown-label { color: #1a1918; }
.course-report__breakdown-bar { position: relative; height: 6px; background: #f5f4f2; border-radius: 999px; overflow: hidden; }
.course-report__breakdown-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: currentColor; border-radius: 999px; }
.course-report__breakdown-row[data-band="pass"] .course-report__breakdown-bar { color: #2e9e5b; }
.course-report__breakdown-row[data-band="fail"] .course-report__breakdown-bar { color: #d63a3a; }
.course-report__breakdown-row[data-band="incomplete"] .course-report__breakdown-bar { color: #d9a45e; }
.course-report__breakdown-row[data-band="none"] .course-report__breakdown-bar { color: rgba(26,25,24,.35); }
.course-report__breakdown-count { font-variant-numeric: tabular-nums; color: rgba(26,25,24,.75); min-width: 2rem; text-align: right; }

/* Weekly bar chart */
.course-report__weekly { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.375rem; align-items: end; min-height: 10rem; }
.course-report__weekly-bar { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; height: 100%; justify-content: flex-end; }
.course-report__weekly-bar-fill { width: 100%; max-width: 1.5rem; height: max(3px, var(--h, 0%)); background: #83c68a; border-radius: 4px 4px 0 0; }
.course-report__weekly-bar:nth-child(-n+2) .course-report__weekly-bar-fill { background: #a4d2a3; }
.course-report__weekly-bar:nth-last-child(-n+2) .course-report__weekly-bar-fill { background: #d9a45e; }
.course-report__weekly-label { font-size: 0.625rem; color: rgba(26,25,24,.55); }

/* Capability panel */
.course-report__capability { margin-bottom: 1rem; }
.course-report__capability-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; }
.course-report__capability-tile { background: #f5f4f2; border-radius: 0.5rem; padding: 1rem; text-align: center; }
.course-report__capability-label { margin: 0 0 0.25rem; font-size: 0.8125rem; color: rgba(26,25,24,.6); }
.course-report__capability-value { margin: 0; font-size: 2.25rem; font-weight: 500; }
.course-report__capability-tile[data-side="before"] .course-report__capability-value { color: #d63a3a; }
.course-report__capability-tile[data-side="after"] .course-report__capability-value { color: #2e9e5b; }
.course-report__capability-arrow { font-size: 1.5rem; color: rgba(26,25,24,.4); }
.course-report__capability-note { margin: 1rem 0 0; font-size: 0.875rem; color: rgba(26,25,24,.7); }
.course-report__capability-delta { color: #2e9e5b; font-weight: 500; font-size: 1.25rem; margin-right: 0.25rem; }
.course-report__capability-note[data-band="down"] .course-report__capability-delta { color: #d9a45e; }
.course-report__capability-note[data-band="flat"] .course-report__capability-delta { color: rgba(26,25,24,.7); }

/* Question performance */
.course-report__questions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.course-report__question { background: #f9f7f2; border-radius: 0.5rem; padding: 0.875rem 1rem; }
.course-report__question-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.course-report__question-text { font-size: 0.9375rem; color: #1a1918; }
.course-report__question-pct { font-weight: 500; color: #1a1918; font-variant-numeric: tabular-nums; }
.course-report__question-bar { position: relative; height: 6px; background: #eee7d8; border-radius: 999px; overflow: hidden; }
.course-report__question-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); border-radius: 999px; }
.course-report__question[data-band="weak"] .course-report__question-bar-fill,
.course-report__question[data-band="weak"] .course-report__question-pct { background-color: currentColor; color: #d63a3a; }
.course-report__question[data-band="mid"] .course-report__question-bar-fill,
.course-report__question[data-band="mid"] .course-report__question-pct { background-color: currentColor; color: #d9a45e; }
.course-report__question[data-band="strong"] .course-report__question-bar-fill,
.course-report__question[data-band="strong"] .course-report__question-pct { background-color: currentColor; color: #2e9e5b; }
.course-report__question-pct { color: #1a1918; background-color: transparent !important; }
.course-report__question-caption { margin: 0.5rem 0 0; font-size: 0.8125rem; color: rgba(26,25,24,.65); display: inline-flex; align-items: center; gap: 0.375rem; }

/* Users table */
.course-report__users { padding: 1rem 1.25rem; }
.course-report__users-toolbar { display: flex; gap: 0.75rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; }
.course-report__search { flex: 1; min-width: 12rem; display: inline-flex; align-items: center; gap: 0.5rem; background: #f5f4f2; border-radius: 0.5rem; padding: 0.5rem 0.75rem; color: rgba(26,25,24,.55); }
.course-report__search-input { flex: 1; border: 0; background: transparent; font-size: 0.9375rem; color: #1a1918; outline: none; }
.course-report__filter-select { border: 1px solid #e8e1ce; border-radius: 0.5rem; padding: 0.5rem 0.75rem; background: #fff; font-size: 0.875rem; }
.course-report__pill { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
.course-report__pill[data-result="pass"] { background: #dcf3e0; color: #166534; }
.course-report__pill[data-result="failed"] { background: #fde2e2; color: #991b1b; }
.course-report__pill[data-result="incomplete"] { background: #fdf0d5; color: #92400e; }
.course-report__pill[data-result="not_started"] { background: #eee7d8; color: rgba(26,25,24,.6); }

/* Inline "course name → insights" link on the org report */
.course-report__inline-link { color: #f56751; text-decoration: none; }
.course-report__inline-link:hover { text-decoration: underline; }

/* Small "View Insights" chip on training schedule course items */
.training-popup__stage-insights { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: #f56751; text-decoration: none; margin-left: .5rem; }
.training-popup__stage-insights:hover { text-decoration: underline; }

/* §1.9 report — Q6 overconfidence (trap) flag in Individual Course Performance */
.report__overconfidence { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 500; color: #92400e; background: #fdf0d5; padding: .125rem .5rem; border-radius: 999px; }

/* §1.9 report — completed after the due date */
.report__overdue { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 500; color: #9f1239; background: #ffe4e6; padding: .125rem .5rem; border-radius: 999px; }

/* §1.9 report — COMPLETION and PERFORMANCE share one table, but the count
   column is headed "Completed" on one tab and "Passed" on the other. Desktop
   uses auto table layout, so that difference resizes the column and the rows
   jump on every tab switch. Pin both numeric columns. Mobile already sets its
   own flex-basis below 64em, so scope this to desktop only. */
@media (min-width: 64em) {
  .report-table__th-completed,
  .report-table__td-completed,
  .report-table__th-total,
  .report-table__td-total { width: 8rem; }
}

/* Dashboard alert banner — the badge pill has a fixed min-width and no side
   padding, so longer labels ("Your team is waiting.") spilled past its edges.
   Let it grow with its text and never shrink below it. */
.banner__badge { padding: 0 .5rem; flex-shrink: 0; }

/* Course preview (business users) — quiz review marks the correct answer in
   green with a tick; the design's orange read like an error state. */
.quiz-question__option--correct { border-color: #50a55a; background-color: rgba(80,165,90,.08); }
.quiz-question__option--correct .quiz-question__marker { border-color: #50a55a; background-color: #50a55a; }

/* Business Training Schedule — VIEW INSIGHTS sits under PREVIEW as a
   secondary (white) button, same width. */
.training-card__actions { display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; width: 12rem; }
.training-card__actions .training-card__btn { width: 100%; justify-content: center; }

/* Disabled buttons — the design had no disabled state, so disabled buttons
   kept their active look (or borrowed the white secondary outline). Flat
   grey, no hover change, across every .btn variant. */
.btn:disabled,
.btn:disabled:hover,
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
  background-color: #ebe9e5;
  border-color: #ebe9e5;
  color: rgba(26, 25, 24, .4);
  box-shadow: none;
  cursor: not-allowed;
}

/* Health Check results — a plain `1fr` track can't shrink below its content,
   so the wide pillar legend pushed the grid ~14px past the container and the
   right-hand Human Risk Score card sat outside it. Let the columns shrink and
   the legend wrap. */
@media (min-width: 79.99875em) {
  .health__grid { grid-template-columns: minmax(0, 1fr) 380px; }
}
.health__body,
.health__left,
.health__right { min-width: 0; }
.benchmark-card__legend { flex-wrap: wrap; }

/* Human Defence Benchmark page reuses .health__container, whose desktop grid
   reserves a 240px column for the results-page aside. This page has no
   aside, so everything was squeezed into that narrow column. */
@media (min-width: 63.99875em) {
  .health__container--single { grid-template-columns: minmax(0, 1fr); }
}

/* Account Details — logo/photo upload sits at the top of the Business
   Details card (above Business Name) instead of its own card. */
.account-details-logo { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding-bottom: 1.25rem; margin-bottom: .25rem; border-bottom: 1px solid #e8e1ce; }
.account-details__grid { align-items: start; }

/* Business dashboard — the Overdue number opens a modal listing the overdue
   learners and the course each is overdue on. */
/* The whole Overdue tile is the button: looks like the other tiles; on hover
   the background darkens and the number turns orange. */
.dashboard__overview-item--link {
  width: 100%; border: 0; text-align: left; cursor: pointer;
  transition: background-color .2s ease;
}
.dashboard__overview-item--link .dashboard__overview-value { transition: color .2s ease; }
.dashboard__overview-item--link:hover { background-color: #f1ede4; }
.dashboard__overview-item--link:hover .dashboard__overview-value { color: #f56751; }
.dashboard__overview-item--link:focus-visible { outline: 2px solid #f56751; outline-offset: 2px; }
.overdue-table-wrap { max-height: 60vh; overflow-y: auto; }
.overdue-table { width: 100%; border-collapse: collapse; font-size: .875rem; color: #1a1918; }
.overdue-table th {
  text-align: left; font-weight: 500; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .04em; color: rgba(26,25,24,.55);
  padding: .5rem .75rem; border-bottom: 1px solid #e8e1ce;
}
.overdue-table td { padding: .75rem; border-bottom: 1px solid #f0ece3; vertical-align: top; }
.overdue-table__name { display: block; font-weight: 500; }
.overdue-table__email { display: block; color: rgba(26,25,24,.55); font-size: .8125rem; }
.overdue-table__date { white-space: nowrap; color: #cf4943; }

/* Course report Users tab — "Overdue only" switch on the right of the
   toolbar (filters the table to learners past their due date). */
.course-report__overdue-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: #1a1918; cursor: pointer; white-space: nowrap; }

/* Business "All Courses" tab (under Training Schedule). */
.aside__link--sub { padding-left: 2rem; }
.all-courses__toolbar { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.all-courses__search { flex: 1; min-width: 14rem; display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid #e8e1ce; border-radius: 999px; padding: .625rem 1rem; color: rgba(26,25,24,.55); }
.all-courses__search input { flex: 1; border: 0; background: transparent; font-size: .9375rem; color: #1a1918; outline: none; }
.all-courses__category { min-width: 12rem; }
.all-courses__added { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 999px; background: #e6f5ea; color: #1f8a4c; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
[data-all-courses-item][hidden] { display: none; }

/* Settings › Support & Feedback — confirmation popup after a message is sent. */
.support-sent__container { max-width: 30rem; }
.support-sent__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.support-sent__icon {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; margin-bottom: 1.25rem; border-radius: 50%;
  background: #f56751; color: #fff; box-shadow: 0 0 0 0.5rem #fde4df;
}
.support-sent__title {
  margin: 0 0 0.75rem; color: #1a1918; font-family: "PP Editorial New", serif;
  font-size: 2.25rem; font-weight: 400; line-height: 1.1;
}
.support-sent__title span { color: #f56751; font-style: italic; }
.support-sent__desc { max-width: 24rem; margin: 0 0 1.75rem; color: #5f5e5d; font-size: 0.9375rem; line-height: 1.5; }
.support-sent__desc strong { color: #1a1918; font-weight: 500; overflow-wrap: anywhere; }
.support-sent__btn { min-width: 10rem; }

/* Settings cards are single-column grids; a plain 1fr track won't shrink below
   its widest content, so on phones the forms ran past the card's right edge. */
.settings-card { grid-template-columns: minmax(0, 1fr); }

/* Dashboard alert — larger, more readable text (client: an alert is
   important). The base style clips the bar at a fixed 4.5rem:
   - one alert: the bar grows with the message;
   - several alerts rotate in a vertical Swiper, which needs a fixed height,
     so it gets a taller one with the message centred. */
.banner.is-active { height: auto; }
.banner__slider:not(.swiper) { max-height: none; }
.banner__slider.swiper { height: 8rem; max-height: none; }
.banner__slider.swiper .banner__slide { display: flex; align-items: center; padding-block: 1rem; }
@media (max-width: 47.99875em) {
  .banner__slider.swiper { height: 13rem; }
}
.banner__content { align-items: center; }
.banner__text { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 500; line-height: 1.4; }
.banner__badge { font-size: .875rem; height: 1.75rem; }

/* Settings — "Saved" confirmations were too small to notice. */
.settings-card__hint[role="status"]:not(:empty) { margin: .5rem 0; font-size: .9375rem; font-weight: 500; color: #1a1918; }
/* Hidden form parts (alert fields, reporting options) must stay hidden even
   where the base styles set a display value. */
[data-dashboard-alert-fields][hidden],
.reporting-settings__dependent[hidden],
.settings-card__separator[hidden] { display: none !important; }

/* Survey question pages: gradient background with blurred glow circles.
   Copied from the frontend repo (psyber-frontend df93fef) without the rest of
   that asset update, which restyles the Edit Training Schedule popup. */
.wrapper--gradient {
  background: linear-gradient(181deg, #FBE7DA -25.65%, #F9F7F2 17.01%),#f9f7f2;
}

.wrapper--glow {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.wrapper--glow::before,
.wrapper--glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  -webkit-filter: blur(35px);
          filter: blur(35px);
  pointer-events: none;
}

.wrapper--glow::before {
  top: 19.05%;
  left: 17.6875rem;
  width: 78.375rem;
  height: 76.625rem;
  -webkit-transform: translate(-50%, -50%) rotate(-135deg) scaleX(-1);
      -ms-transform: translate(-50%, -50%) rotate(-135deg) scaleX(-1);
          transform: translate(-50%, -50%) rotate(-135deg) scaleX(-1);
  background: radial-gradient(58.38% 58.38% at 50.14% 0%, rgba(255, 108, 71, 0.36) 0%, rgba(255, 255, 255, 0.36) 50.93%, rgba(251, 231, 218, 0.36) 100%);
}

.wrapper--glow::after {
  top: 95.55%;
  left: 27.37%;
  width: 38.8125rem;
  height: 38rem;
  -webkit-transform: translate(-50%, -50%) rotate(120deg) scaleX(-1);
      -ms-transform: translate(-50%, -50%) rotate(120deg) scaleX(-1);
          transform: translate(-50%, -50%) rotate(120deg) scaleX(-1);
  background: radial-gradient(58.38% 58.38% at 50.14% 0%, rgba(255, 108, 71, 0.34) 0%, rgba(255, 255, 255, 0.34) 50.93%, rgba(251, 231, 218, 0.34) 100%);
}

/* Training Schedule: the account's cadence next to the page title. */
.training-section__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.training-section__cadence {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e8e1ce;
  border-radius: 6.25rem;
  background: #fff;
  padding: 0.375rem 0.875rem;
  font-family: "DM Mono", monospace;
  font-size: 0.8125rem;
  text-transform: uppercase;
  color: #1a1918;
  white-space: nowrap;
}

/* My Training: Next Certificate card (progress within the closest certificate). */
.bs-training__certificate-title {
  align-self: stretch;
  margin: 0 0 0.5rem;
  text-align: left;
}

.bs-training__certificate-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1a1918;
  text-align: center;
}

.bs-training__certificate-remaining {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: #5f5e5d;
  text-align: center;
}

/* Recommended Action popup: left-aligned, a 'Why it matters' callout and
   numbered 'How to do it' steps (easier to read than centred italics). */
.action-popup__card {
  align-items: stretch;
  gap: 1.25rem;
  padding: 2.25rem 2.5rem;
  width: 44rem;
}

.action-popup__label,
.action-popup__title {
  text-align: left;
}

.action-popup__title {
  max-width: none;
  padding-right: 2rem;
}

.action-popup__block {
  align-items: stretch;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
}

.action-popup__block--why {
  border-left: 4px solid #f56751;
  border-radius: 0.75rem;
}

.action-popup__block--why .action-popup__block-text {
  font-style: normal;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #1a1918;
}

.action-popup__block--how {
  border: 1px solid #e8e1ce;
  background: #fff;
}

.action-popup__steps {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.action-popup__steps li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  counter-increment: step;
  font-size: 1rem;
  line-height: 1.5;
  color: #1a1918;
}

.action-popup__steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #1a1918;
  color: #fff;
  font-family: "DM Mono", monospace;
  font-size: 0.8125rem;
}

/* The last step is the takeaway. */
.action-popup__steps li:last-child {
  font-weight: 500;
}

@media (max-width: 47.99875em) {
  .action-popup__card {
    padding: 1.75rem 1.25rem;
  }
}

/* Completed modules: quiz average and attempts as labelled stat boxes. */
.training-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.training-card__stat {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 7rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #e8e1ce;
  border-radius: 0.75rem;
  background: #fcfaf5;
}

.training-card__stat-label {
  font-family: "DM Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f5e5d;
}

.training-card__stat-value {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  color: #1a1918;
}

/* Settings: a clear confirmation under a Save button (was small grey text). */
.settings-card__save-status:empty {
  display: none;
}

.settings-card__save-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  background: #e7f4ea;
  color: #22663a;
  font-size: 1rem;
  font-weight: 500;
}

.settings-card__save-status::before {
  content: "\2713";
  font-weight: 700;
}

.settings-card__save-status.is-error {
  background: #fdecea;
  color: #b42318;
}

.settings-card__save-status.is-error::before {
  content: "!";
}

/* Settings: no text smaller than the setting descriptions' 16px, apart from
   short hints (15px). Card subtitles were 14px and hints 12px. */
.settings-card__subtitle {
  font-size: 1rem;
  line-height: 1.4;
}

.settings-card__hint,
.settings-card__hint span {
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Reports: a muted learner (no training emails) is still listed, marked. */
.muted-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 6.25rem;
  background: #efebe2;
  color: #5f5e5d;
  font-family: "DM Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* Settings: staff without a role / access level (was a dashboard popup). */
.settings__setup-alert {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
}
.settings__setup-alert-text { margin: 0; }
.settings__setup-alert-link {
  flex-shrink: 0;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
}
@media (max-width: 47.99875em) {
  .settings__setup-alert { flex-direction: column; align-items: flex-start; }
}

/* Readable small text (client: "the font is really quite small").
   Info text is at least 14px, uppercase labels 13px, tags and chart labels 12px. */
.training-card__inline-item,
.training-card__date,
.dashboard__training-date,
.course-card__meta-item,
.course-card__completed-date,
.course-report__kpi-note,
.course-report__question-caption,
.user-block__dept,
.top-performers__dept,
.bs-leaderboard__stats-delta,
.risk-score__label,
.recommendations-card__pillar {
  font-size: 0.875rem;
}
.course-report__kpi-label,
.score-card__level-label,
.bs-leaderboard__stats-desc,
.report-table .table__th,
.card__tab,
.recommendations-card__item-meta span:not(.recommendations-card__pillar),
.manage-staff-table__btn,
.manage-staff-table__btn-icon {
  font-size: 0.8125rem;
}
.course-report__weekly-label,
.tag {
  font-size: 0.75rem;
}

/* Resources: eye button on each card + the preview popup. */
.resource-card__image-wrap { position: relative; }
.resource-card__preview {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1918;
  box-shadow: 0 2px 8px rgba(26, 25, 24, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.resource-card__preview:hover { transform: scale(1.08); }
.resource-card__preview svg { fill: currentColor; }
.resource-preview__container { width: min(60rem, calc(100vw - 2rem)); max-width: none; }
.resource-preview__title { margin-top: 0.75rem; }
.resource-preview__frame-wrap {
  margin: 1rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f5f4f2;
}
.resource-preview__frame { display: block; width: 100%; height: min(70vh, 48rem); border: 0; }
.resource-preview__image { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; }
.resource-preview__summary { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.6; color: rgba(26, 25, 24, 0.75); }

/* Admin leaderboard: Top Performers podium (#2, #1, #3) above Overall Rankings. */
.top-podium { margin-bottom: 1.5rem; }
.top-podium__title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 500; }
.top-podium__tiles { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; }
.top-podium__tile {
  flex: 1 1 0;
  max-width: 24rem;
  padding: 1.5rem 1rem 1.25rem;
  color: #1a1918;
  border-radius: 1.25rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 3px rgba(26, 25, 24, 0.06);
}
.top-podium__tile--1 { flex-grow: 1.15; max-width: 27rem; padding: 2.25rem 1rem 1.75rem; background: #fdf1ea; border: 1px solid #f6d3c2; }
.top-podium__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 1.75rem;
  margin-bottom: 0.75rem;
  padding: 0 0.6rem;
  border-radius: 6.25rem;
  color: #fff;
  font: 500 0.875rem "DM Mono", monospace;
}
.top-podium__rank--1 { background: #f4694f; }
.top-podium__rank--2 { background: #9aa0a6; }
.top-podium__rank--3 { background: #c98a5a; }
.top-podium__avatar {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  object-fit: cover;
}
.top-podium__tile--1 .top-podium__avatar { width: 5rem; height: 5rem; }
.top-podium__name { margin: 0; font-size: 1.125rem; font-weight: 500; }
.top-podium__dept { margin: 0.15rem 0 0; font-size: 0.875rem; color: rgba(26, 25, 24, 0.6); }
.top-podium__points { margin: 0.75rem 0 0; font-size: 1.75rem; font-weight: 500; }
.top-podium__points small {
  margin-left: 0.25rem;
  font: 400 0.8125rem "DM Mono", monospace;
  letter-spacing: 0.06em;
  color: rgba(26, 25, 24, 0.6);
}
@media (max-width: 47.99875em) {
  .top-podium__tiles { flex-direction: column; align-items: stretch; }
  .top-podium__tile { max-width: none; }
  .top-podium__tile--1 { order: -1; }
}

/* Select placeholders ("Select Department"): same light grey as input
   placeholders until a value is picked. */
.select__field--placeholder:has(option[value=""]:checked) { color: rgba(26, 25, 24, 0.3); }
.select__field--placeholder option { color: #1a1918; }

/* Module descriptions everywhere were hard to read at 14px (client, Oct
   2026). */
.course-card__desc,
.training-card__desc,
.training-popup__course-desc { font-size: 1rem; line-height: 1.4; }
/* Admin homepage puts the duration in front: keep "5 mins – text" on one line. */
.dashboard__training-desc p { display: inline; }