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

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


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

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

/* §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; }

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

.benchmark-modal h3 {
  margin: 1.25rem 0 0.5rem;
}

.benchmark-modal__pillars {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.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;
}

/* ``.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;
}

/* Disabled Enterprise tier select — looks like the others but can't open. */
.plan-card__select--locked select {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.plan-card__select--locked select option {
  color: inherit;
}

/* 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. */
.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;
}

/* Staff dashboard "Current Courses" / "My Training": completed cards dim
   and drop to the bottom so in-progress work surfaces first. */
.course-card--completed { opacity: .65; transition: opacity .3s ease; order: 1; }
.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;
}

/* Band name shown as a soft pink bubble (replaces the neutral pill). */
.risk-score__badge {
  border-color: transparent;
  background: #fbe9e5;
  color: #b23b22;
  font-weight: 600;
}

/* 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: 0.9375rem;
  line-height: 1.4;
}

.answers-score {
  margin-bottom: 1.25rem;
}

.answers-score__label {
  display: block;
  color: #5f5e5d;
  font-size: 0.75rem;
  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;
  border-radius: 6.25rem;
  padding: 0.375rem 1rem;
  background: #fbe9e5;
  color: #b23b22;
  font-size: 0.9375rem;
  font-weight: 600;
}

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

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

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

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

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

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

.answers-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

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

.answers-option--selected {
  border-color: #1f9d57;
  background: #eaf7ef;
  color: #15683a;
  font-weight: 500;
}

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

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

.answers__locked-note {
  margin: 2rem 0 0;
  color: #5f5e5d;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* 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 ── */
.pss-actions {
  margin-top: 1.5rem;
}

.pss-actions__deadline {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 6.25rem;
  background: #fbe9e5;
  color: #b23b22;
  font-size: 0.8125rem;
  font-weight: 600;
}

.pss-actions__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.pss-actions__title {
  margin: 0;
  color: #1a1918;
  font-size: 1.0625rem;
  font-weight: 600;
}

.pss-actions__count {
  flex-shrink: 0;
  color: #5f5e5d;
  font-size: 0.8125rem;
}

.pss-actions__progress {
  margin: 0.625rem 0 1.25rem;
  height: 0.375rem;
  border-radius: 6.25rem;
  background: #e8e1ce;
  overflow: hidden;
}

.pss-actions__progress-fill {
  width: 0;
  height: 100%;
  border-radius: 6.25rem;
  background: #f56751;
  transition: width 0.4s ease;
}

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

.pss-actions__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pss-actions__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e8e1ce;
  border-radius: 1rem;
  background: #fff;
  transition: opacity 0.4s ease;
}

.pss-actions__item.is-completed {
  opacity: 0.55;
}

.pss-actions__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fdeeea;
  color: #f56751;
}

.pss-actions__text {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: #1a1918;
  font: inherit;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

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

.pss-actions__check {
  flex-shrink: 0;
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.pss-actions__check-filled {
  display: none;
}

.pss-actions__item.is-completed .pss-actions__check-empty {
  display: none;
}

.pss-actions__item.is-completed .pss-actions__check-filled {
  display: inline;
}

.pss-actions__icon img {
  width: 1.375rem;
  height: 1.375rem;
  object-fit: contain;
}

/* 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. */
.details__content {
  -ms-grid-columns: minmax(18rem, 26rem) 1fr;
  grid-template-columns: minmax(18rem, 26rem) 1fr;
}

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