@import url('_tokens.css');

:root {
  --ms-accent-warm: #f6e9eb;
  /* The submit button while a page is in flight. A LIGHTER maroon, not `opacity`:
     opacity composites the whole control toward the page behind it, moving the white
     label with the fill and costing contrast on the one word a trainee on a slow
     connection is trying to read. Measured against #ffffff: idle #8e1f2d is 8.81:1,
     this is 6.00:1, and #b0616b - only slightly further - is 4.40:1 and FAILS AA. The
     margin is the point; do not nudge this lighter without re-measuring. */
  --ms-primary-busy: #a34450;
  /* Deliberate blue-grey question ink (a confirmed reading-comfort decision,
     KEPT at s85). Distinct from the brand ink --ms-text-main (#221c19) — do
     not harmonise it away. Named here so the question text + number share one
     source instead of duplicating the colour literal per selector. */
  --ms-question-ink: lab(35.5623% 1.74978 -15.4316);
  /* Status-pill ink. Both were darkened at s589 after measuring the RENDERED
     list page: each pill lays its text over a translucent wash of its own hue,
     so the real contrast is the token against the COMPOSITED wash, not against
     the surface. #64748b and #b45309 read fine token-to-token and failed WCAG
     AA in place (3.79:1 and 3.93:1 at the 0.12 wash over --ms-background).
     ops/lint/theme_a11y.py::status_pill_contrast_errors pins this; it checks
     both --ms-surface and --ms-background because the darker one fails first. */
  --ms-status-upcoming: #55606f;
  --ms-status-closing-soon: #9c4507;
  --ms-radius-card-compact: 12px;
  --ms-shadow-gate: 0 6px 24px -4px rgba(24, 24, 27, 0.22);
  /* AA-compliant text shade of the accent-warning family. The shared
     --ms-accent-warning (#9a6a16) on --ms-accent-warning-soft is 4.31:1, under the
     4.5:1 that 15px copy needs — and it shipped on both the validation toast a blocked
     trainee reads and the session-expiry panel. This clears at 5.20:1 on the same fill.
     NOT invented here: the facilitator portal reached the same finding first and pinned
     this exact value at ops/upload/static/upload.css:14-19, deliberately keeping it out
     of the byte-identical shared _tokens.css so the participant theme stayed untouched.
     Held theme-side for the same reason in reverse — promoting it to _tokens.css would
     mirror into the upload copy and cost a ?v= bump on four gate templates for a token
     neither the gate nor the portal consumes. Two scopes, one measured value; if a third
     consumer appears, promote it. Pinned by opaque_token_pair_contrast_errors in
     ops/lint/theme_a11y.py. */
  --ms-accent-warning-strong: #8a5e12;
  /* The scrim over a sealed question page. Translucent so the blurred page reads as a
     page rather than as flat paint; see .is-ms-session-expired for why the blur alone is
     not the control. */
  --ms-scrim: rgba(248, 244, 241, 0.72);
  --ms-shadow-soft: 0 2px 12px -2px rgba(24, 24, 27, 0.1);
}

body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--ms-text-body);
  background: var(--ms-background);
}

/* LimeSurvey core injects an inline <style> in <head> AFTER custom.css that
   hardcodes body { background-color: #ffffff }. Same specificity as our bare
   `body` rule, later in source, so it wins. Raise specificity via the
   `mytheme` class already on <body> to restore our warm surface without
   resorting to !important or modifying LimeSurvey core templates. */
body.mytheme {
  background-color: var(--ms-background);
  color: var(--ms-text-body);
}

body.ms-view-access {
  min-height: 100vh;
  background:
    linear-gradient(rgba(34, 28, 25, 0.12) 0px, rgba(34, 28, 25, 0) 144px),
    var(--ms-pattern-diamonds)
    var(--ms-background);
  background-repeat: no-repeat, repeat;
}

body.ms-view-question {
  min-height: 100vh;
  background: transparent;
}

html:has(.ms-view-welcome),
html:has(.ms-view-completion),
html:has(.ms-view-question) {
  min-height: 100%;
  background:
    var(--ms-pattern-diamonds)
    var(--ms-background);
}

body.ms-view-welcome,
body.ms-view-completion {
  background: transparent;
}

body.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.ms-view-welcome,
body.ms-view-access {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.ms-view-welcome > article,
body.ms-view-access > article {
  margin-top: auto;
  margin-bottom: auto;
}

.question-container {
  background-color: transparent;
}

#survey-nav {
  background: transparent;
  box-shadow: none;
}

#navbar-toggler {
  color: var(--ms-text-muted);
}

#navbar-menu,
.navbar-brand {
  display: none;
}

.survey-main,
#outerframeContainer,
.ms-participant-shell {
  max-width: 1080px;
  margin: 0 auto;
}

.ls-js-hidden.warningjs,
.survey-welcome:empty,
.survey-description:empty,
.question-text:empty,
.survey-contact:empty,
#surveys-list-jumbotron,
#surveyListFooter {
  display: none;
}

.outerframe.container-fluid,
#surveys-list-container {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

#main-row,
#main-col {
  position: relative;
}

.ms-assessment-branding {
  display: inline-grid;
  gap: 0.5rem;
  margin-bottom: var(--ms-space-4);
}

.ms-brand-logo {
  display: block;
  width: auto;
  height: clamp(28px, 4vw, 36px);
}

.ms-brand-title {
  margin: 0;
  color: var(--ms-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ms-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ms-participant-topbar {
  max-width: 46rem;
  margin: 0 auto clamp(2.75rem, 6vw, 4.5rem);
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--ms-border);
}

.ms-participant-topbar__inner {
  display: flex;
  align-items: center;
}

.ms-participant-topbar__logo {
  display: block;
  width: auto;
  height: clamp(46px, 5vw, 64px);
}

.ms-welcome-topbar {
  max-width: none;
  margin-bottom: clamp(1.5rem, 3.5vw, 2rem);
  padding-bottom: 0;
  border-bottom: 0;
}

.ms-welcome-topbar__logo {
  height: 40px;
}

.ms-list-topbar {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2rem);
  padding: 1.1rem clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 0;
  box-shadow: 0px 8px 20px 5px rgba(34, 28, 25, 0.25);
  background-color: var(--ms-topbar-bg);
  background-image: var(--ms-pattern-topbar);
}

.ms-list-topbar .ms-participant-topbar__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.ms-list-topbar__logo {
  height: clamp(38px, 4.5vw, 52px);
}

.ms-question-topbar {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.1rem clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 0;
  box-shadow: 0px 8px 20px 5px rgba(34, 28, 25, 0.25);
  background-color: var(--ms-topbar-bg);
  background-image: var(--ms-pattern-topbar);
}

@media (min-width: 1200px) {
  html:has(.ms-view-question),
  body.ms-view-question {
    height: auto;
  }

  .ms-question-topbar {
    position: sticky;
    top: 0;
  }
}


.ms-question-topbar .ms-participant-topbar__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.ms-question-topbar__logo {
  height: clamp(38px, 4.5vw, 52px);
}

.ms-session-badge,
.ms-progress-caption,
.ms-progress-chip,
.ms-state-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-pill);
  background: var(--ms-surface);
  color: var(--ms-text-muted);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Quiet attempt chip pinned to the right of the question topbar (Wave-1
   journey-audit finding 3). Visual is the shared .ms-state-chip pill; this only
   positions it. The light pill reads clearly on the maroon topbar. */
.ms-question-attempt-chip {
  margin-left: auto;
}

.ms-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--ms-space-3);
  color: var(--ms-primary);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--ms-primary);
  border-radius: 2px;
}

.ms-view-list#surveys-list-container,
.ms-view-list #surveys-list-container {
  padding-bottom: 0;
}

.ms-view-list#surveys-list-container,
.ms-view-list #surveys-list-container,
.ms-view-access#outerframeContainer,
.ms-view-access #outerframeContainer,
.ms-view-welcome#outerframeContainer,
.ms-view-welcome #outerframeContainer,
.ms-view-question#outerframeContainer,
.ms-view-question #outerframeContainer,
.ms-view-completion#outerframeContainer,
.ms-view-completion #outerframeContainer {
  max-width: 1120px;
}

.ms-view-question .outerframe.container-fluid > .row > .col-xl-8,
.ms-view-completion .outerframe.container-fluid > .row > .col-xl-8 {
  flex: 0 0 100%;
  max-width: 100%;
}

.ms-view-question .outerframe.container-fluid > .row > .col-xl-4,
.ms-view-completion .outerframe.container-fluid > .row > .col-xl-4 {
  display: none;
}

.ms-view-access .outerframe.container-fluid,
.ms-view-welcome .outerframe.container-fluid,
.ms-view-completion .outerframe.container-fluid {
  padding-top: var(--ms-space-4);
  padding-bottom: var(--ms-space-4);
}

.ms-view-list .surveys-list-container {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.token-page,
.ms-welcome-shell,
.ms-question-shell,
.ms-completion-shell,
.surveys-list-container {
  position: relative;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ms-view-question .ms-question-shell {
  max-width: 56rem;
  margin-right: auto;
  margin-left: auto;
  padding: var(--ms-space-5) var(--ms-space-6);
  padding-bottom: 0;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-card);
  scroll-padding-bottom: 5rem;
}

.ms-page-header {
  max-width: 42rem;
  margin-bottom: var(--ms-space-5);
}

.ms-page-title,
.survey-name,
.ms-completion-title,
.group-title {
  margin: 0 0 0.4rem;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: 600;
}

.ms-page-copy,
.survey-description,
.survey-welcome,
.welcome-container p,
.survey-contact,
.ms-completion-copy,
.ms-helper-copy {
  margin: 0;
  max-width: 42rem;
  color: var(--ms-text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.ms-page-copy + .ms-page-copy,
.survey-contact {
  margin-top: 0.85rem;
}

.ms-view-welcome .survey-welcome:has(.em-error) {
  display: none;
}

.ms-view-list .survey-list-heading,
.ms-view-list .survey-contact,
.ms-view-list .survey-list {
  position: relative;
}

/* Scope heading wrap and contact block to the same 46rem shell as the
   .surveys-list-container so everything aligns in one column. Without this,
   LimeSurvey's .col-12 wrappers render them at full bootstrap row width
   (~1096px on a 1908px body), escaping the scoped 736px card shell and
   producing the "alignment completely off" bug from round 3. */
.ms-view-list .survey-list-heading,
.ms-view-list .survey-contact {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.ms-view-list .survey-contact {
  margin-top: var(--ms-space-5);
  font-size: 0.92rem;
}

.ms-view-list .ms-list-copyright {
  margin-top: auto;
  padding-top: var(--ms-space-5);
  padding-bottom: var(--ms-space-3);
  font-size: 0.8125rem;
  color: var(--ms-primary);
  text-align: center;
}

.ms-view-list .survey-list-heading {
  margin-bottom: var(--ms-space-3);
}

.ms-view-list .survey-list-heading .form-heading {
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(2rem, 2.7vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: 600;
}

.ms-view-list .ms-list-helper-copy {
  margin-top: var(--ms-space-2);
}

.ms-view-list .surveys-list:not(.ms-list-decorated) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ms-space-3);
  margin: 0;
  padding: 0;
}

/* LimeSurvey renders each survey row as <li class="btn-group col-12 col-md-6">.
   The col-md-6 forces 50% width at >=md, which collapses the cards to half the
   shell on desktop. Reset to full width inside the list view so each card
   spans the single-column grid. */
.ms-view-list .surveys-list:not(.ms-list-decorated) > li,
.ms-view-list .surveys-list:not(.ms-list-decorated) > li.col-md-6 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.ms-view-list .surveys-list-container .surveytitle.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-card-compact, 14px);
  background: var(--ms-surface);
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  text-align: left;
  box-shadow: var(--ms-shadow-soft);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.ms-view-list .surveys-list-container .surveytitle.btn:hover,
.ms-view-list .surveys-list-container .surveytitle.btn:focus-visible {
  transform: translateY(-1px);
  border-color: var(--ms-primary);
  box-shadow: 0 18px 40px -20px rgba(142, 31, 45, 0.22);
}

.ms-view-list .surveytitle.btn::after {
  content: "Open";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.token-page {
  max-width: 34rem;
  margin: 0 auto;
}

.token-page .form-heading,
.token-page .alert,
.token-page .form-token {
  position: relative;
  z-index: 1;
}

.token-page > .form-heading {
  margin: 0 0 0.85rem;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.95rem, 3vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: 600;
}

.token-page .alert {
  margin: var(--ms-space-4) 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(64, 51, 48, 0.12);
  border-radius: var(--ms-radius-card-compact);
  background: var(--ms-alert-bg);
  color: var(--ms-text-body);
  font-size: 0.92rem;
  line-height: 1.55;
  box-shadow: none;
}

.token-page .alert-danger {
  border-color: rgba(185, 28, 28, 0.28);
  background: var(--ms-alert-danger-bg);
  color: var(--ms-alert-danger-text);
}

.token-page.has-access-error .alert-info {
  display: none;
}

.ms-view-access .alert-info:not(.alert-danger) {
  display: none;
}

.ms-view-access .ms-participant-topbar {
  max-width: 34rem;
}

.token-page label.control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.token-page label.control-label small.asterisk {
  display: none;
}

.token-page .load-survey-submit {
  margin-top: var(--ms-space-4);
}

.token-page .input-group {
  display: block;
}

.token-page .input-group-text {
  display: none;
}

.token-page .form-control {
  width: 100%;
  min-height: 54px;
  padding: 0 1.25rem;
  border-radius: var(--ms-radius-pill);
  font-size: 1.05rem;
}

/* Bootstrap's `.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu)`
   rule is specificity (0,5,0) and forces a left-rounded-only radius on the
   token input when the show/hide toggle sibling is present in the DOM (we
   hide it visually, but it still exists). Match that specificity and beat
   it by one type selector so the token input renders as a full pill. */
.ms-view-access .token-page .input-group:not(.has-validation) > input.form-control {
  border-radius: var(--ms-radius-pill);
}

.token-page .captcha,
.token-page .captcha-container,
.token-page .g-recaptcha,
.token-page .ls-captcha {
  margin-top: var(--ms-space-4);
}

.ms-view-welcome .ms-welcome-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--ms-space-6) var(--ms-space-6);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card);
  box-shadow: var(--ms-shadow-gate);
  -webkit-hyphens: manual;
  hyphens: manual;
}

.ms-view-welcome .progress {
  display: none;
  max-width: 46rem;
  height: 0.18rem;
  margin: 0 auto var(--ms-space-5);
}

.ms-view-welcome .ls-progress-container,
.ms-view-welcome .progress-wrapper {
  display: none;
}

.ms-view-welcome .top-container,
.ms-view-access .top-container,
.ms-view-completion .top-container,
.ms-view-question .top-container {
  display: none;
}

.ms-view-list #survey-nav,
.ms-view-welcome #survey-nav,
.ms-view-completion #survey-nav,
.ms-view-question #survey-nav {
  display: none;
}

body.ms-view-list,
body.ms-view-welcome,
body.ms-view-completion,
body.ms-view-question {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ms-view-welcome .ms-eyebrow {
  display: flex;
  width: max-content;
  margin-bottom: var(--ms-space-3);
}

.ms-view-welcome .ms-assessment-branding {
  display: grid;
  margin-bottom: var(--ms-space-3);
}

.ms-assessment-title {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ms-primary);
  opacity: 0.85;
  margin: 0 0 0.25rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.ms-view-welcome .survey-name {
  font-size: clamp(2rem, 2.7vw, 2.4rem);
}

.ms-view-welcome .ms-page-copy {
  margin-top: 0.85rem;
}

.ms-welcome-checkpoint {
  display: grid;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-5);
}

.ms-welcome-panel {
  padding: 1rem 1.15rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card-compact);
  background: var(--ms-surface);
  /* Shadow removed: panels are subsections inside the welcome card, not
     cards-in-cards. */
}

.ms-welcome-panel.is-final-attempt {
  border-color: var(--ms-accent-warning-border);
  background: var(--ms-accent-warning-soft);
}

.ms-welcome-panel.is-readiness-panel {
  border-color: var(--ms-accent-info-border);
  background: var(--ms-accent-info-soft);
}

.ms-welcome-panel.is-readiness-panel .ms-welcome-panel__title {
  color: var(--ms-accent-info);
}

/* The fill is on the panel one rule up, so this pairing spans two rules and the
   same-rule contrast check could not see it. 16px at weight 700 is under the 18.66px
   large-text threshold, so it needs the full 4.5:1 and --ms-accent-warning gives 4.31:1
   on that fill — on the panel that tells a trainee this is their last try. */
.ms-welcome-panel.is-final-attempt .ms-welcome-panel__title {
  color: var(--ms-accent-warning-strong);
}

.ms-welcome-panel__title {
  margin: 0 0 0.45rem;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
}

.ms-welcome-panel__copy,
.ms-welcome-list {
  margin: 0;
  color: var(--ms-text-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ms-welcome-list {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.15rem;
}

.ms-welcome-detail-list {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.65rem 1rem;
  margin: 0;
  color: var(--ms-text-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.ms-welcome-detail-list dt,
.ms-welcome-detail-list dd {
  margin: 0;
}

.ms-welcome-detail-list dt {
  color: var(--ms-text-muted);
  font-weight: 700;
}

.ms-welcome-detail-list dd {
  color: var(--ms-text-main);
  overflow-wrap: anywhere;
}

.ms-view-welcome .ms-action-row {
  margin-top: var(--ms-space-3);
  margin-bottom: 0;
  width: 100%;
  justify-content: center;
}

.ms-view-welcome .ms-welcome-shell {
  padding-bottom: var(--ms-space-4);
}

.ms-view-welcome .ms-action-row .row.navigator {
  width: 100%;
  margin: 0;
}

.ms-view-welcome .ms-action-row .row.navigator > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.ms-view-welcome .ms-action-row .btn {
  width: 100%;
}

.number-of-questions {
  margin-top: var(--ms-space-2);
  color: var(--ms-text-main);
  font-size: 1rem;
  font-weight: 600;
}

.ms-question-shell {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding-top: 0;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.ms-question-shell .ms-question-heading {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.ms-question-shell .ms-question-heading .ms-assessment-title {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-accent-soft);
  color: var(--ms-primary);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.group-outer-container {
  margin: 0;
}

.group-container {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.group-title {
  margin-bottom: var(--ms-space-3);
  color: var(--ms-text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-question-shell .group-title {
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(2rem, 2.7vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
}

.question-valid-container,
.ls-questionhelp,
.ls-question-message,
.text-info,
.em-tip {
  display: none;
}

.ms-question-shell .question-container {
  margin: 0 0 var(--ms-space-6);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.question-title-container {
  margin-bottom: 0.85rem;
}

.ms-question-number {
  display: inline;
  margin-right: 0.35em;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ms-question-ink);
}

.ms-view-question .question-title-container .asterisk {
  display: none;
}

.question-text,
.ms-question-shell .ms-question-title {
  color: var(--ms-question-ink);
  font-family: "Sora", "Manrope", sans-serif;
  font-weight: 600;
}

.question-text {
  font-size: 1.125rem;
  line-height: 1.42;
}

.answer-container {
  margin-top: 0.25rem;
}

.ls-answers.answers-list {
  display: grid;
  gap: 0;
}

.answer-item {
  margin: 0;
}

.ls-answers .radio-item,
.ls-answers .checkbox-item {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-bottom: 0;
  padding-left: 0;
}

/* M-type (multiple choice) wraps checkbox + label inside .row > .col-auto.
   .col-auto defaults to block, which stacks the input above the label. */
.ls-answers .checkbox-item > .row {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.ls-answers .checkbox-item > .row > .col-auto {
  display: flex;
  align-items: flex-start;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}

.ls-answers .ms-answer-row {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-card-compact);
  background: rgba(255, 253, 252, 0.72);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.ls-answers .ms-answer-row + .ms-answer-row {
  margin-top: 0.9rem;
}

.ls-answers .ms-answer-row:nth-child(even) {
  background: rgba(246, 233, 235, 0.22);
}

.ls-answers .ms-answer-row:hover {
  border-color: var(--ms-answer-border-hover);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-soft);
}

.ls-answers .ms-answer-row-selected {
  border-color: var(--ms-primary);
  background: var(--ms-accent-soft);
  box-shadow: 0 0 0 2px rgba(142, 31, 45, 0.18);
}

.ls-answers .ms-answer-row-selected:hover {
  border-color: var(--ms-primary-hover);
  background: var(--ms-answer-selected-hover-bg);
}

.ls-answers .ms-answer-row-focus {
  border-color: rgba(142, 31, 45, 0.45);
  box-shadow: 0 0 0 4px var(--ms-focus);
}

.no-anwser-item {
  display: none !important;
}

.ls-answers .ms-answer-row-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Live "N of M selected" counter for multi-select questions (R13). Colour and
   text only, no transition, so it needs no prefers-reduced-motion handling. */
.ms-select-counter {
  margin: var(--ms-space-2) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ms-text-muted);
}

.ms-select-counter.is-complete {
  color: var(--ms-status-pass);
}

.radio-item input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  position: static;
  opacity: 1;
  z-index: auto;
  margin: 0.3rem 0.6rem 0 0;
  border: 2px solid var(--ms-input-border);
  border-radius: 50%;
  background: transparent;
  outline: none;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.radio-item input[type="radio"]:checked {
  border-color: var(--ms-primary);
  background: var(--ms-primary);
  box-shadow: inset 0 0 0 3px var(--ms-surface);
}

.radio-item input[type="radio"]:hover:not(:checked) {
  border-color: var(--ms-input-border-hover);
}

.radio-item input[type="radio"]:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--ms-focus);
}

.radio-item input[type="radio"]:checked:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 3px var(--ms-surface), 0 0 0 3px var(--ms-focus);
}

.checkbox-item input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  position: static;
  opacity: 1;
  z-index: auto;
  margin: 0.3rem 0.6rem 0 0;
  border: 2px solid var(--ms-input-border);
  border-radius: 4px;
  background: transparent;
  outline: none;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.checkbox-item input[type="checkbox"]::after {
  content: "";
  display: block;
  width: 0.35rem;
  height: 0.65rem;
  margin: 0.05rem auto 0;
  border: solid var(--ms-surface);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  opacity: 0;
  background-color: transparent;
  transition: opacity 150ms ease;
}

.checkbox-item input[type="checkbox"]:checked {
  border-color: var(--ms-primary);
  background: var(--ms-primary);
}

.checkbox-item input[type="checkbox"]:checked::after {
  opacity: 1;
}

.checkbox-item input[type="checkbox"]:hover:not(:checked) {
  border-color: var(--ms-input-border-hover);
}

.checkbox-item input[type="checkbox"]:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--ms-focus);
}

.checkbox-item input[type="checkbox"]:checked:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--ms-focus);
}

.radio-item .control-label,
.checkbox-item .control-label {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0.15rem 0;
  border-radius: 0;
  background: transparent;
  color: var(--ms-text-main);
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.radio-item .control-label::before,
.radio-item .control-label::after,
.checkbox-item .control-label::before,
.checkbox-item .control-label::after {
  content: none;
  display: none;
}

.radio-item input[type="radio"]:checked + .control-label,
.checkbox-item input[type="checkbox"]:checked + .control-label {
  color: var(--ms-text-main);
}

.radio-item input[type="radio"]:focus-visible + .control-label,
.checkbox-item input[type="checkbox"]:focus-visible + .control-label,
.surveytitle.btn:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
textarea:focus {
  outline: 2px solid transparent;
  border-color: rgba(142, 31, 45, 0.45);
  box-shadow: 0 0 0 4px var(--ms-focus);
}

.no-anwser-item .control-label {
  color: var(--ms-text-muted);
}

.ls-progress-container,
.ms-progress-row,
.ls-progress,
.progress-wrapper {
  margin-bottom: var(--ms-space-4);
}

.ms-view-question .ls-progress-container,
.ms-view-question .ms-progress-row,
.ms-view-question .ls-progress,
.ms-view-question .progress-wrapper {
  width: 100%;
  margin-bottom: var(--ms-space-3);
}

.ms-view-question .ls-progress-container > h3,
.ms-view-question .ls-progress-container > .progress-title,
.ms-view-question .ls-progress-container > .progress-text,
.ms-view-question .ms-question-progress > h3,
.ms-view-question .ms-question-progress > .progress-title,
.ms-view-question .ms-question-progress > .progress-text {
  display: none;
}

.ms-view-question .ms-question-progress {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  gap: 0.55rem;
  margin-top: 0;
  margin-bottom: var(--ms-space-4);
}

.ms-view-question .ms-progress-caption {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  gap: 1rem;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ms-text-body);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  letter-spacing: 0.01em;
  text-transform: none;
}

.ms-progress-caption__label {
  color: var(--ms-text-body);
  font-weight: 600;
}

.ms-progress-caption__value {
  color: var(--ms-text-body);
  font-weight: 700;
}

.ms-progress-caption__range {
  display: block;
  width: 100%;
  color: var(--ms-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.15rem;
}

body.ms-view-question .progress,
body.ms-view-question .ls-progress-container .progress,
body.ms-view-question .progress-wrapper .progress,
.ms-view-question .progress {
  height: 0.75rem !important;
}

body.ms-view-question .progress .progress-bar {
  height: 100% !important;
}

.progress {
  height: 0.5rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-progress-bg);
  overflow: hidden;
  box-shadow: none;
}

.progress-bar {
  background: var(--ms-progress-fill);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ls-move-btns,
.ms-action-row,
.navigator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: var(--ms-space-4);
}

.ls-move-btns .btn,
.ms-action-row .btn,
.token-page .btn,
.surveytitle.btn,
.ms-completion-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 54px;
  min-width: 220px;
  max-width: 100%;
  padding: 0.95rem 2rem;
  border-radius: var(--ms-radius-pill);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.btn-primary:not(.surveytitle),
.ls-move-btns .btn-primary,
.ms-action-row .btn-primary,
.token-page .btn-primary {
  border: 1px solid var(--ms-primary);
  background: var(--ms-primary);
  color: #fff;
  box-shadow: none;
}

.btn-primary:not(.surveytitle):hover,
.ls-move-btns .btn-primary:hover,
.ms-action-row .btn-primary:hover,
.token-page .btn-primary:hover {
  border-color: var(--ms-primary-hover);
  background: var(--ms-primary-hover);
  color: #fff;
}

.btn-primary.ms-primary-action,
.ms-primary-action {
  box-shadow: 0 14px 26px -18px rgba(142, 31, 45, 0.55);
}

.btn-primary.ms-primary-action:hover,
.btn-primary.ms-primary-action:focus-visible,
.ms-primary-action:hover,
.ms-primary-action:focus-visible {
  box-shadow: 0 18px 34px -20px rgba(142, 31, 45, 0.62);
}

.token-page .btn {
  width: 100%;
  min-height: 54px;
  font-size: 1rem;
}

.ms-view-question .ms-action-row {
  margin-top: 0;
  margin-left: calc(-1 * var(--ms-space-6));
  margin-right: calc(-1 * var(--ms-space-6));
  padding: var(--ms-space-5) var(--ms-space-6);
  border-top: 1px solid var(--ms-border);
  border-radius: 0 0 var(--ms-radius-card) var(--ms-radius-card);
  background: var(--ms-background);
  transition: opacity 400ms ease, transform 400ms ease, box-shadow 400ms ease;
}

@keyframes ms-nav-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ms-view-question .ms-action-row.ms-nav-sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 12px -4px rgba(24, 24, 27, 0.08);
  animation: ms-nav-slide-in 400ms ease both;
}

.ms-view-question .ms-action-row.ms-nav-entering {
  animation: none;
  opacity: 0;
  transform: translateY(8px);
}

.ms-view-question .ms-action-row.ms-nav-instant {
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 12px -4px rgba(24, 24, 27, 0.08);
  animation: none;
}

.ms-view-question .ms-action-row .row.navigator,
.ms-view-question .row.navigator,
.ms-view-question #navigator-container {
  width: 100%;
  flex-basis: 100%;
  gap: 0;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
}

.ms-view-question .row.navigator > [class*="col-"] {
  flex: 1 1 50%;
  max-width: 50%;
  padding-left: 0;
  padding-right: 0;
}

.ms-view-question .row.navigator .ls-move-btn {
  width: auto;
}

.ms-view-question .ls-move-previous-btn {
  border-color: var(--ms-border-strong);
  background: rgba(255, 255, 255, 0.84);
  color: var(--ms-text-main);
  box-shadow: none;
}

.ms-view-question .ls-move-previous-btn:hover {
  border-color: var(--ms-primary);
  background: var(--ms-accent-soft);
  color: var(--ms-text-main);
}

.ms-view-question .ls-move-next-btn {
  box-shadow: 0 14px 26px -18px rgba(142, 31, 45, 0.55);
}

/* --- Move buttons in flight (BACKLOG `Now` #4) ---
   Spinner + dimmed fill + the label change, because that trio is the pattern people
   already read as "working, don't press again" (operator decision, s623). The spinner
   mirrors `.ms-btn-spinner` on the facilitator side rather than inventing a second
   one - same 1em ring, same 0.8s linear spin, same light-on-maroon treatment - but is
   copied rather than shared, because the LimeSurvey theme loads `custom.css` ALONE and
   never `_components.css`.

   It is a `::before`, so `custom.js` needs no DOM change: `button.textContent = text`
   replaces child nodes and leaves pseudo-elements untouched. */
.ls-move-btn[aria-busy="true"],
.ms-primary-action[aria-busy="true"] {
  cursor: progress;
}

.ls-move-btn[aria-busy="true"]::before,
.ms-primary-action[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ms-spin 0.8s linear infinite;
}

@keyframes ms-spin {
  to { transform: rotate(360deg); }
}

/* The dim. `disabled` lands a tick after the submit and a UA stylesheet would
   otherwise grey out both fill and text; this restates the surface as the lighter
   maroon instead, so the button reads as busy rather than as broken. */
.ls-move-btn[aria-busy="true"],
.ms-primary-action[aria-busy="true"],
.ls-move-btn[aria-busy="true"]:disabled,
.ms-primary-action[aria-busy="true"]:disabled,
.btn-primary.ms-primary-action[aria-busy="true"]:disabled {
  background: var(--ms-primary-busy);
  border-color: var(--ms-primary-busy);
  color: #fff;
  opacity: 1;
}

/* A control that cannot be pressed must not answer a press. */
.ls-move-btn[aria-busy="true"]:hover,
.ls-move-btn[aria-busy="true"]:focus-visible,
.ms-primary-action[aria-busy="true"]:hover,
.ms-primary-action[aria-busy="true"]:focus-visible {
  background: var(--ms-primary-busy);
  box-shadow: 0 14px 26px -18px rgba(142, 31, 45, 0.55);
  transform: none;
}

.btn-default,
.btn-outline-secondary,
.btn-secondary {
  border-color: var(--ms-border-strong);
  background: rgba(255, 255, 255, 0.84);
  color: var(--ms-text-main);
}

/* --- Completion topbar --- */

.ms-completion-topbar {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: 0;
  border-bottom: 0;
}

/* --- Completion shell --- */

.ms-completion-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  min-width: 0;
}

.ms-completion-card,
.completed-wrapper,
.completed-text {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ms-view-completion .completed-wrapper {
  box-shadow: var(--ms-shadow-gate);
  border-radius: var(--ms-radius-card);
}

.ms-completion-shell .ms-completion-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ms-completion-card p {
  margin: 0 0 0.75rem;
  color: var(--ms-text-body);
  line-height: 1.6;
}

.ms-completion-source.is-hidden {
  display: none;
}

/* --- Completion structured layout --- */

.ms-completion-structured {
  display: grid;
  gap: var(--ms-space-5);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-soft);
  overflow-x: hidden;
}

.ms-completion-structured p,
.ms-completion-structured ul {
  margin: 0;
}

/* --- Hero (centred layout) --- */

.ms-completion-hero {
  display: grid;
  gap: var(--ms-space-3);
  padding: 0;
  text-align: center;
  justify-items: stretch;
}

.ms-completion-hero-top {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
}

.ms-completion-title {
  font-size: clamp(1.9rem, 3vw, 2.55rem);
  overflow-wrap: anywhere;
}

.ms-completion-status-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.ms-completion-status-chip,
.ms-completion-section-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-pill);
  background: var(--ms-surface-soft);
  color: var(--ms-text-body);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.ms-completion-status-chip.is-outcome {
  min-height: 2rem;
  padding-inline: 0.85rem;
  font-size: 0.82rem;
}

.ms-completion-shell.is-pass .ms-completion-status-chip.is-outcome,
.ms-completion-section-status.is-pass {
  border-color: rgba(46, 111, 87, 0.35);
  background: rgba(46, 111, 87, 0.09);
  color: var(--ms-status-pass);
}

.ms-completion-shell.is-fail .ms-completion-status-chip.is-outcome,
.ms-completion-section-status.is-review {
  border-color: rgba(185, 28, 28, 0.3);
  background: rgba(185, 28, 28, 0.07);
  color: var(--ms-status-fail);
}

.ms-completion-status-chip.is-attempt {
  border-color: rgba(142, 31, 45, 0.2);
  background: var(--ms-accent-warm);
  color: var(--ms-primary);
}

.ms-completion-status-chip.is-tries {
  border-color: rgba(142, 31, 45, 0.2);
  background: var(--ms-accent-warm);
  color: var(--ms-primary);
}

/* --- Score focal point --- */

.ms-completion-score-ring {
  position: relative;
  display: grid;
  box-sizing: content-box;
  gap: 0.15rem;
  justify-items: center;
  align-content: center;
  justify-self: center;
  width: clamp(140px, 20vw, 180px);
  height: clamp(140px, 20vw, 180px);
  margin-top: var(--ms-space-2);
  padding: var(--ms-space-3);
  border-radius: 50%;
  background: var(--ms-primary);
  border: 0;
  box-shadow: 0 22px 44px -26px rgba(24, 24, 27, 0.48);
  color: #fff;
  text-align: center;
}

.ms-completion-ring-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.ms-completion-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 6;
}

.ms-completion-ring-arc {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s ease-out;
}

/* --- Pass confetti micro-interaction --- */

.ms-completion-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

@keyframes ms-confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dot-x), var(--dot-y)) scale(0.5);
  }
}

.ms-completion-confetti-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: ms-confetti-burst 1.5s ease-out forwards;
  animation-delay: calc(var(--dot-index) * 0.08s + 0.3s);
}

.ms-completion-confetti-dot:nth-child(1) { --dot-x: -50px; --dot-y: -60px; background: #f59e0b; }
.ms-completion-confetti-dot:nth-child(2) { --dot-x: 45px; --dot-y: -55px; background: var(--ms-status-pass); }
.ms-completion-confetti-dot:nth-child(3) { --dot-x: 60px; --dot-y: -10px; background: var(--ms-primary); }
.ms-completion-confetti-dot:nth-child(4) { --dot-x: 50px; --dot-y: 45px; background: #3b82f6; }
.ms-completion-confetti-dot:nth-child(5) { --dot-x: -8px; --dot-y: 58px; background: #f59e0b; }
.ms-completion-confetti-dot:nth-child(6) { --dot-x: -55px; --dot-y: 35px; background: var(--ms-status-pass); }
.ms-completion-confetti-dot:nth-child(7) { --dot-x: -35px; --dot-y: -52px; background: #3b82f6; }
.ms-completion-confetti-dot:nth-child(8) { --dot-x: 30px; --dot-y: 55px; background: var(--ms-primary); }

.ms-completion-score-value {
  display: block;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.ms-completion-score-label {
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Result panel colour coding --- */

.ms-completion-shell.is-pass .ms-completion-score-ring {
  background: var(--ms-status-pass);
  box-shadow: 0 22px 44px -26px rgba(46, 111, 87, 0.5);
}

.ms-completion-shell.is-fail .ms-completion-score-ring {
  background: var(--ms-status-fail);
  box-shadow: 0 22px 44px -26px rgba(185, 28, 28, 0.45);
}

.ms-completion-result-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-self: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 46rem;
  height: auto;
  margin-top: 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ms-border);
  border-left: 5px solid var(--ms-primary);
  border-radius: var(--ms-radius-card-compact);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-soft);
  color: var(--ms-text-main);
  text-align: left;
}

.ms-completion-result-copy {
  display: grid;
  gap: 0.2rem;
}

.ms-completion-result-state {
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.ms-completion-result-primary,
.ms-completion-result-panel .ms-completion-score-value {
  color: var(--ms-text-main);
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.ms-completion-result-panel .ms-completion-score-label {
  color: var(--ms-text-muted);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
}

.ms-completion-shell.is-pass .ms-completion-result-panel {
  border-left-color: var(--ms-status-pass);
  background: var(--ms-surface);
}

.ms-completion-shell.is-pass .ms-completion-result-state,
.ms-completion-shell.is-pass .ms-completion-result-panel .ms-completion-score-value {
  color: var(--ms-status-pass);
}

.ms-completion-shell.is-fail .ms-completion-result-panel {
  border-left-color: var(--ms-status-fail);
  background: var(--ms-surface);
}

.ms-completion-shell.is-fail .ms-completion-result-state,
.ms-completion-shell.is-fail .ms-completion-result-panel .ms-completion-score-value {
  color: var(--ms-status-fail);
}

/* --- Interpretation (centred, softer) --- */

/* Scoped through .ms-completion-copy on purpose. custom.js builds this paragraph
   with both classes, so a bare .ms-completion-interpretation rule (0-1-0) loses
   its measure to the shared .ms-completion-shell .ms-completion-copy rule
   (0-2-0, 48rem) further down. 0-3-0 wins on specificity alone, so this stays
   correct wherever either rule sits in the file. Locked by invariant 9 in
   ops/lint/theme_consistency.py, which resolves the cascade rather than
   grepping for the declaration. */
.ms-completion-shell .ms-completion-copy.ms-completion-interpretation {
  max-width: 38rem;
  justify-self: center;
  color: var(--ms-text-body);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* --- Summary cards --- */

.ms-completion-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ms-space-3);
  margin: 0;
}

.ms-completion-summary dt,
.ms-completion-summary dd {
  margin: 0;
}

.ms-completion-summary-item {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card-compact);
  background: var(--ms-surface-soft);
}

.ms-completion-summary-item.is-pass {
  border-color: rgba(46, 111, 87, 0.34);
  background: rgba(46, 111, 87, 0.1);
}

.ms-completion-summary-item.is-pass .ms-completion-summary-label {
  color: var(--ms-text-muted);
}

.ms-completion-summary-item.is-pass .ms-completion-summary-value {
  color: var(--ms-status-pass);
}

.ms-completion-summary-item.is-fail {
  border-color: rgba(185, 28, 28, 0.34);
  background: rgba(185, 28, 28, 0.1);
}

.ms-completion-summary-item.is-fail .ms-completion-summary-label {
  color: var(--ms-text-muted);
}

.ms-completion-summary-item.is-fail .ms-completion-summary-value {
  color: var(--ms-status-fail);
}

.ms-completion-summary-item.is-result {
  box-shadow: 0 14px 26px -22px rgba(24, 24, 27, 0.45);
}

.ms-completion-summary-item.is-pass.is-result {
  border-color: var(--ms-status-pass);
  background: var(--ms-status-pass);
}

.ms-completion-summary-item.is-pass.is-result .ms-completion-summary-label {
  color: rgba(255, 255, 255, 0.8);
}

.ms-completion-summary-item.is-pass.is-result .ms-completion-summary-value {
  color: #fff;
  font-weight: 700;
}

.ms-completion-summary-item.is-fail.is-result {
  border-color: var(--ms-status-fail);
  background: var(--ms-status-fail);
}

.ms-completion-summary-item.is-fail.is-result .ms-completion-summary-label {
  color: rgba(255, 255, 255, 0.8);
}

.ms-completion-summary-item.is-fail.is-result .ms-completion-summary-value {
  color: #fff;
  font-weight: 700;
}

.ms-completion-summary-item.is-accent {
  border-color: rgba(142, 31, 45, 0.2);
}

.ms-completion-summary-label {
  color: var(--ms-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-completion-summary-value {
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.25rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* --- Summary card icons --- */

.ms-completion-summary-item::before {
  content: "";
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin-bottom: 0.15rem;
  background-color: var(--ms-text-muted);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.ms-completion-summary-item:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

.ms-completion-summary-item:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='12' width='4' height='9' rx='1'/%3E%3Crect x='10' y='7' width='4' height='14' rx='1'/%3E%3Crect x='17' y='3' width='4' height='18' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='12' width='4' height='9' rx='1'/%3E%3Crect x='10' y='7' width='4' height='14' rx='1'/%3E%3Crect x='17' y='3' width='4' height='18' rx='1'/%3E%3C/svg%3E");
}

.ms-completion-summary-item:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.ms-completion-summary-item.is-pass::before {
  background-color: var(--ms-status-pass);
}

.ms-completion-summary-item.is-fail::before {
  background-color: var(--ms-status-fail);
}

.ms-completion-summary-item.is-result::before {
  background-color: rgba(255, 255, 255, 0.7);
}

/* --- Section breakdown --- */

.ms-completion-sections,
.ms-completion-guidance {
  display: grid;
  gap: var(--ms-space-2);
}

.ms-completion-section-heading {
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.ms-completion-section {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card-compact);
  background: var(--ms-surface-soft);
}

.ms-completion-section.is-pass {
  border-color: rgba(46, 111, 87, 0.4);
  background: rgba(46, 111, 87, 0.08);
}

.ms-completion-section.is-pass .ms-completion-section-score {
  color: var(--ms-status-pass);
}

.ms-completion-section.is-pass .ms-completion-section-bar-fill {
  background: var(--ms-status-pass);
}

.ms-completion-section.is-fail {
  border-color: rgba(185, 28, 28, 0.32);
  background: rgba(185, 28, 28, 0.06);
}

.ms-completion-section.is-fail .ms-completion-section-score {
  color: var(--ms-status-fail);
}

.ms-completion-section.is-fail .ms-completion-section-bar-fill {
  background: var(--ms-status-fail);
}

.ms-completion-section.is-near-pass {
  border-color: rgba(180, 83, 9, 0.32);
  background: rgba(180, 83, 9, 0.06);
}

.ms-completion-section.is-near-pass .ms-completion-section-score {
  color: var(--ms-status-closing-soon);
}

.ms-completion-section.is-near-pass .ms-completion-section-bar-fill {
  background: var(--ms-status-closing-soon);
}

.ms-completion-section-label {
  margin: 0;
  color: var(--ms-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-completion-section-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ms-completion-section-score {
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.ms-completion-section-status.is-priority {
  border-color: rgba(142, 31, 45, 0.35);
  background: var(--ms-accent-warm);
  color: var(--ms-primary);
}

.ms-completion-section-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--ms-accent-warm);
  overflow: hidden;
}

.ms-completion-section-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ms-primary);
  transition: width 0.4s ease;
}

@keyframes ms-section-entrance {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ms-completion-section.is-entered {
  animation: ms-section-entrance 300ms ease forwards;
}

.ms-completion-section-hint,
.ms-completion-guidance li {
  margin: 0;
  color: var(--ms-text-body);
  font-size: 0.92rem;
  line-height: 1.6;
}

.ms-completion-guidance ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.1rem;
}

/* --- Guidance footer --- */

.ms-completion-guidance-footer {
  display: grid;
  gap: var(--ms-space-2);
  padding-top: var(--ms-space-5);
  border-top: 1px solid var(--ms-border);
}

.ms-completion-guidance-footer .ms-completion-copy {
  color: var(--ms-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ms-completion-shell .ms-completion-copy {
  max-width: 48rem;
}

.ms-completion-cta {
  justify-self: center;
  margin-top: var(--ms-space-3);
  border: 1px solid var(--ms-primary);
  background: var(--ms-primary);
  color: #ffffff;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ms-completion-cta:hover,
.ms-completion-cta:focus-visible {
  background: var(--ms-primary-hover);
  border-color: var(--ms-primary-hover);
  color: #ffffff;
  outline: 0;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(142, 31, 45, 0.55);
  text-decoration: none;
}

.ms-completion-cta:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 14px 28px -18px rgba(142, 31, 45, 0.55), 0 0 0 4px var(--ms-focus);
}

.ms-completion-structured.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
}

.ms-completion-structured:focus {
  outline: none;
}

/* --- Gap message callout (fail only) --- */

/* Same cascade trap as .ms-completion-interpretation above: custom.js gives this
   callout .ms-completion-copy too, so the shared 48rem shell rule out-specified
   the measure here even though this block sits after it. Source order does not
   rescue a 0-1-0 rule from a 0-2-0 one. */
.ms-completion-shell .ms-completion-copy.ms-completion-gap {
  max-width: 38rem;
  justify-self: center;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--ms-status-fail);
  border-radius: var(--ms-radius-card-compact);
  background: rgba(185, 28, 28, 0.06);
  color: var(--ms-status-fail);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}

/* --- Assessment name boost + truncation in hero --- */

.ms-completion-hero .ms-assessment-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.1rem;
  opacity: 0.9;
  letter-spacing: 0.03em;
}

/* --- Completion topbar aligned to wider shell --- */

.ms-completion-topbar {
  max-width: 56rem;
}

.ms-completion-topbar .ms-participant-topbar__logo {
  height: clamp(36px, 5vw, 48px);
}

/* --- Pass/fail card treatment (neutral - colour only on chip and outcome card) --- */

.ms-completion-shell.is-pass .ms-completion-card,
.ms-completion-shell.is-fail .ms-completion-card {
  border: 0;
}

.ms-completion-shell.is-pass .ms-completion-title {
  font-weight: 500;
}

/* --- Footer tinting per outcome --- */

.ms-completion-shell.is-pass .ms-completion-guidance-footer {
  background: rgba(46, 111, 87, 0.04);
  border-radius: var(--ms-radius-card-compact);
  padding: var(--ms-space-5);
  border-top: 1px solid rgba(46, 111, 87, 0.15);
}

.ms-completion-shell.is-fail .ms-completion-guidance-footer {
  border-top: 4px solid rgba(185, 28, 28, 0.25);
}

/* --- Near-pass chip style --- */

.ms-completion-section-status.is-near-pass {
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(180, 83, 9, 0.09);
  color: var(--ms-status-closing-soon);
}

.form-control,
.form-select,
textarea {
  border: 1px solid var(--ms-border-strong);
  border-radius: 12px;
  min-height: 52px;
  background: var(--ms-surface);
  color: var(--ms-text-main);
  box-shadow: none;
}

.has-error .form-control,
.has-error select,
.has-error textarea,
.has-error .help-block,
.text-danger {
  color: var(--ms-status-fail);
  border-color: rgba(185, 28, 28, 0.55);
  font-weight: 600;
}

.ms-question-error {
  border: 2px solid var(--ms-validation-error-border);
  background: var(--ms-validation-error-bg);
  border-radius: var(--ms-radius-card-compact);
  animation: ms-pulse-warn 0.5s ease;
  transition: border-color 300ms ease, background-color 300ms ease;
}
.ms-question-error .question-text {
  color: var(--ms-status-fail);
}
.ms-question-error .ms-question-number {
  color: var(--ms-status-fail);
}
@keyframes ms-pulse-warn {
  0%, 100% { outline: 0 solid transparent; }
  30% { outline: 3px solid rgba(185, 28, 28, 0.3); outline-offset: 8px; border-radius: 12px; }
}
body.ms-view-question #bootstrap-alert-box-modal.show,
body.ms-view-question #bootstrap-alert-box-modal.in {
  opacity: 0;
  pointer-events: none;
}
body.ms-view-question .modal-backdrop {
  opacity: 0 !important;
  transition: none;
}

.ms-validation-toast {
  position: fixed;
  top: 6rem;
  left: 50%;
  transform: translateX(-50%) translateY(-1rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--ms-accent-warning-border);
  background: var(--ms-accent-warning-soft);
  /* 15px copy needs 4.5:1; the plain --ms-accent-warning gives 4.31:1 on this fill.
     This is the message a blocked trainee has to read to get unblocked. */
  color: var(--ms-accent-warning-strong);
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease;
}
.ms-validation-toast::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ms-validation-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Session expiry warning. Bottom of the viewport rather than the top, so it cannot
   collide with the validation toast: both can be on screen at once (a trainee who
   under-selects an answer while their session is running out), and one covering the
   other would hide the more urgent of the two. Persistent, not auto-hiding -- unlike the
   toast this is the only notice of something the trainee will otherwise lose. */
.ms-session-warning {
  position: fixed;
  left: 50%;
  bottom: var(--ms-space-5);
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-3);
  width: calc(100% - 2rem);
  max-width: 32rem;
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-accent-warning-border);
  border-radius: 12px;
  background: var(--ms-accent-warning-soft);
  /* See .ms-validation-toast: --ms-accent-warning is 4.31:1 on this fill, and this copy
     is 15px. Both surfaces that pair these two tokens are pinned by
     opaque_token_pair_contrast_errors in ops/lint/theme_a11y.py. */
  color: var(--ms-accent-warning-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  text-align: center;
}

.ms-session-warning__text {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
}

/* The expired panel, composed. The warning above is a toast that must stay clear of a
   live question, so it is pinned to the bottom edge; at zero there is no question left
   to avoid and the notice is the only thing on the page, which is why the same geometry
   read as a card stranded in an empty room. Measured on the shipped code at 1512x680:
   panel top 438px, with 351px of blank cover above it.

   Column rather than the base's wrapping row. The row put "Sign in again" BESIDE the
   countdown at 1512px and BENEATH it at narrower widths, misaligned by ~23px either way
   on the shared line -- the composition changed with the viewport because nothing pinned
   it. */
.ms-session-warning--expired {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--ms-space-2);
  max-width: 30rem;
  padding: var(--ms-space-5);
  background: var(--ms-surface);
  border-color: var(--ms-border);
  box-shadow: var(--ms-shadow-gate);
}

.ms-session-warning__glyph {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--ms-space-1);
  color: var(--ms-accent-warning-strong);
}

.ms-session-warning__title {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ms-text-main);
  text-wrap: balance;
}

/* Body copy drops to the resting weight under the title. Both paragraphs computed to
   600 before, so the state, the consequence and the clock all arrived at once. The
   measure is capped in characters rather than pixels so the wrap stays readable however
   the panel is sized. */
.ms-session-warning--expired .ms-session-warning__text {
  max-width: 44ch;
  text-wrap: pretty;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ms-text-main);
}

.ms-session-warning--expired .ms-session-warning__text--quiet {
  margin-top: var(--ms-space-1);
  font-size: 0.9375rem;
  color: var(--ms-text-muted);
}

.ms-session-warning--expired .ms-session-warning__stay {
  margin-top: var(--ms-space-2);
}

/* Tabular figures so the seconds do not shuffle the sentence sideways each tick. */
.ms-session-warning__time {
  font-variant-numeric: tabular-nums;
}

/* The polite announcement region carries no visible text of its own -- the ticking
   sentence above already says it -- but must stay in the accessibility tree, so it is
   sized away rather than display:none. */
.ms-session-warning__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Styled here rather than by borrowing .ms-btn: that class lives in _components.css,
   which the gate templates link but the LimeSurvey theme does not (config.xml adds
   css/custom.css alone), so it would render as a raw browser button on the only surface
   this component appears on. Same tokens as the participant primary action. */
.ms-session-warning__stay {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--ms-primary);
  border-radius: var(--ms-radius-pill);
  background: var(--ms-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.ms-session-warning__stay:hover {
  background: var(--ms-primary-hover);
  border-color: var(--ms-primary-hover);
  color: #fff;
}

.ms-session-warning__stay:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 4px var(--ms-focus);
}

/* The expired page, covered. These are shared training-room machines, so once the gate
   session has closed the previous trainee's questions and answers must stop being
   readable to whoever sits down next -- the same exposure killSurveySession() prevents
   server-side, applied to the screen. The controls underneath are also disabled, so this
   is a second layer rather than the only one.

   `isolation: isolate` is still doing real work now that the scrim has moved out to the
   body. A cover at z-index 1 was measured failing without it: .ms-action-row.ms-nav-instant
   is position: sticky, z-index: 10, so the Continue button painted straight over the
   cover while the sealed class said otherwise. Isolating makes the assessment one
   stacking context whose own z-index is auto, so NOTHING inside it — whatever z-index it
   claims — can climb over the body scrim above. Without this the sticky nav would be
   competing in the root stacking context again, which is the bug that started this. */
.is-ms-session-expired {
  position: relative;
  isolation: isolate;
}

/* The scrim covers the WHOLE VIEWPORT, and it is anchored to the body rather than to the
   sealed container. Scoped to the container it stopped at the container's edges, so the
   branded topbar — a sibling of it, not a child — stayed perfectly sharp above a blurred
   page and went on reading as a live header on a dead session.

   Fixed rather than absolute so it covers the viewport at any scroll position; the page
   underneath still scrolls (see below), and a scrim that scrolled with it would expose
   the page at the edges. */
.is-ms-session-sealed body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--ms-background);
}

/* Above the scrim, and only in the terminal state — the warning shares this component
   and must stay at its own level, below nothing and above the page it sits beside. */
.ms-session-warning--expired {
  z-index: 31;
}

/* Blur the page rather than paint over it — but only where the blur is real.

   Flat paint is a guarantee: nothing shows through an opaque fill. A blur is not, on its
   own; it degrades to NOTHING on a browser that cannot do it, and that failure is silent
   and total. So the opaque scrim above stays the default and the blur is layered on only
   inside @supports, where the scrim can safely drop to translucent because the text
   underneath has already been destroyed. Neither branch leaves the previous trainee's
   answers readable. ops/lint/tests/test_theme_browser.py measures that in PIXELS rather
   than trusting either declaration — once the cover stops being opaque, elementFromPoint
   proves only occlusion, and a translucent scrim over sharp text passes it while the
   text stays perfectly readable.

   Every top-level box EXCEPT the notice: the topbar, the assessment, and anything else
   the page puts at that level. `> *` does not match ::after, so the scrim is not blurred
   into a smear along with what it covers — which is why the filter cannot simply go on
   the body itself. The panel is excluded by name because it is a body child too, and a
   blurred notice is worse than no notice.

   14px is not a taste call: it is over the x-height of the 15px-16px body copy on this
   page, which is the point past which stroke detail stops reconstructing. */
@supports (filter: blur(2px)) {
  .is-ms-session-sealed body > *:not(.ms-session-warning) {
    filter: blur(14px);
  }

  .is-ms-session-sealed body::after {
    background: var(--ms-scrim);
  }
}

/* Consequences of the seal that live outside the sealed container. */
/* The sealed page is deliberately still scrollable, after both alternatives were tried
   and measured. `overflow: hidden` on the root stops the wheel but leaves the box
   programmatically scrollable by spec; `overflow: clip` computed on both <html> and
   <body> while Chrome still scrolled the viewport to 238px. Taking the container out of
   flow (position: fixed) does work, and it drags the blurred page up under the topbar --
   a visible layout jump at the moment of expiry, to fix something nobody is harmed by.
   The panel is fixed and centred, so scrolling moves the blurred page beneath a notice
   that stays put, and nothing under it is legible either way. */

/* The attempt chip sits in the topbar, outside #outerframeContainer, so the cover never
   reached it: "Attempt 1 of 3" stayed legible on a session the server had already
   closed, contradicting the notice in the middle of the screen. visibility rather than
   display so the topbar does not reflow, and hidden from assistive technology too —
   the count is stale, not merely decorative. */
.is-ms-session-sealed .ms-question-attempt-chip {
  visibility: hidden;
}

/* =============================================
   Concept D: Enriched Flat List
   ============================================= */

.ms-flat-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ms-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-flat-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title badge"
    "meta cta";
  align-items: start;
  gap: var(--ms-space-1) var(--ms-space-4);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--ms-shadow-soft);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ms-flat-item:hover {
  border-color: rgba(142, 31, 45, 0.3);
  box-shadow: var(--ms-shadow-gate);
}

.ms-flat-title {
  grid-area: title;
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ms-flat-badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  width: max-content;
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  border-radius: var(--ms-radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(107, 98, 93, 0.1);
  color: var(--ms-text-muted);
}

.ms-flat-badge.is-open {
  background: rgba(46, 111, 87, 0.12);
  color: var(--ms-status-pass);
}

.ms-flat-badge.is-closing-soon {
  background: rgba(180, 83, 9, 0.12);
  color: var(--ms-status-closing-soon);
}

.ms-flat-badge.is-upcoming {
  background: rgba(100, 116, 139, 0.12);
  color: var(--ms-status-upcoming);
}

.ms-flat-meta {
  grid-area: meta;
  margin: 0;
  color: var(--ms-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.ms-flat-cta {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-height: 44px;
  min-width: 11rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-primary);
  color: #fff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.ms-flat-cta:hover,
.ms-flat-cta:focus-visible {
  background: var(--ms-primary-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(142, 31, 45, 0.55);
}

.ms-flat-cta:focus-visible {
  outline: 3px solid var(--ms-focus);
  outline-offset: 3px;
}

.ms-flat-cta.is-disabled {
  background: transparent;
  border: 1px solid var(--ms-border);
  color: var(--ms-text-muted);
  font-weight: 700;
  cursor: default;
  transform: none;
}

.ms-flat-cta.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* =============================================
   Concept E: Two-Tier Portal
   ============================================= */

.ms-portal-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ms-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-portal-card {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--ms-shadow-gate);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ms-portal-card:hover {
  border-color: rgba(142, 31, 45, 0.3);
  box-shadow: var(--ms-shadow-gate), 0 0 0 1px rgba(142, 31, 45, 0.06);
}

.ms-portal-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ms-space-3);
}

.ms-portal-card__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ms-portal-card__header .ms-portal-badge {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 0.3rem;
}

.ms-portal-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  border-radius: var(--ms-radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(107, 98, 93, 0.1);
  color: var(--ms-text-muted);
}

.ms-portal-badge.is-open {
  background: rgba(46, 111, 87, 0.12);
  color: var(--ms-status-pass);
}

.ms-portal-badge.is-closing-soon {
  background: rgba(180, 83, 9, 0.12);
  color: var(--ms-status-closing-soon);
}

.ms-portal-badge.is-upcoming {
  background: rgba(100, 116, 139, 0.12);
  color: var(--ms-status-upcoming);
}

.ms-portal-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
}

.ms-portal-meta-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--ms-border);
  border-radius: 10px;
  background: var(--ms-surface);
  color: var(--ms-text-main);
  font-variant-numeric: tabular-nums;
}

.ms-portal-meta-chip__label {
  color: var(--ms-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ms-portal-meta-chip strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.ms-portal-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  margin-top: var(--ms-space-1);
  padding: 0.65rem 1.5rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-primary);
  color: #fff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.ms-portal-card__cta:hover,
.ms-portal-card__cta:focus-visible {
  background: var(--ms-primary-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(142, 31, 45, 0.55);
}

.ms-portal-card__cta:focus-visible {
  outline: 3px solid var(--ms-focus);
  outline-offset: 3px;
}

.ms-portal-section-label {
  margin: var(--ms-space-3) 0 0;
  color: var(--ms-text-muted);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ms-portal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title badge"
    "meta  meta";
  align-items: center;
  gap: var(--ms-space-1) var(--ms-space-3);
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border);
  border-radius: 14px;
  background: var(--ms-surface);
}

.ms-portal-row__title {
  grid-area: title;
  margin: 0;
  color: var(--ms-text-body);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ms-portal-row .ms-portal-badge {
  grid-area: badge;
}

.ms-portal-row__meta {
  grid-area: meta;
  margin: 0;
  color: var(--ms-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.ms-portal-empty {
  padding: var(--ms-space-5) var(--ms-space-4);
  border: 1px solid var(--ms-border);
  border-radius: 14px;
  background: var(--ms-surface);
  color: var(--ms-text-muted);
  text-align: center;
}

.ms-portal-empty h2 {
  margin: 0 0 var(--ms-space-1);
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.15rem;
}

.ms-portal-empty p {
  margin: 0;
}

/* =============================================
   Shared: list expand/collapse engine
   ============================================= */

.ms-list-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  -webkit-appearance: none;
  gap: 1rem;
}

.ms-list-toggle:focus-visible {
  outline: 3px solid var(--ms-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.ms-list-chevron {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ms-text-muted);
  transition: transform 200ms ease;
  user-select: none;
}

.is-expanded > .ms-list-toggle > .ms-list-chevron,
.is-expanded > button > .ms-list-chevron {
  transform: rotate(90deg);
}

.ms-list-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 200ms ease-in, opacity 150ms ease-in, padding 200ms ease-in;
}

.is-expanded > .ms-list-detail {
  max-height: 200px;
  opacity: 1;
  transition: max-height 250ms ease-out, opacity 200ms ease-out, padding 250ms ease-out;
}

/* =============================================
   Divider List (NYT-inspired)
   ============================================= */

.ms-divider-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ms-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-divider-item {
  border-bottom: 1px solid var(--ms-list-divider-border);
}

.ms-divider-item:first-child {
  border-top: 1px solid var(--ms-list-divider-border);
}

.ms-divider-row {
  padding: 1.25rem 0.25rem;
}

.ms-divider-row:hover .ms-divider-title {
  color: var(--ms-primary);
}

.ms-divider-title {
  flex: 1;
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 150ms ease;
}

.ms-divider-status {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ms-text-muted);
}

.ms-divider-status.is-open {
  color: var(--ms-status-pass);
}

.ms-divider-status.is-upcoming {
  color: var(--ms-status-upcoming);
}

.ms-divider-detail {
  padding: 0 0.25rem 0;
}

.is-expanded > .ms-divider-detail {
  padding: 0 0.25rem 1.25rem;
}

.ms-divider-meta,
.ms-divider-dates {
  margin: 0 0 0.35rem;
  color: var(--ms-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ms-divider-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 10rem;
  margin-top: 0.65rem;
  padding: 0.4rem 1.15rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-primary);
  color: #fff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.ms-divider-cta:hover {
  background: var(--ms-primary-hover);
  color: #fff;
  text-decoration: none;
}

.ms-divider-cta.is-disabled {
  background: transparent;
  border: 1px solid var(--ms-border-strong);
  color: var(--ms-text-muted);
  cursor: default;
}

/* =============================================
   Warm Row Bars (Manus-inspired)
   ============================================= */

.ms-warm-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-warm-item {
  background: #ffffff;
  border: 1px solid var(--ms-list-item-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 150ms ease;
}

.ms-warm-item:hover {
  border-color: var(--ms-primary);
}

.ms-warm-row {
  padding: 1.25rem 1.35rem;
}

.ms-warm-title {
  flex: 1;
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.15rem);
  font-weight: 600;
  line-height: 1.35;
}

.ms-warm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  border-radius: var(--ms-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(107, 98, 93, 0.1);
  color: var(--ms-text-muted);
}

.ms-warm-badge.is-open {
  background: rgba(46, 111, 87, 0.1);
  color: var(--ms-status-pass);
}

.ms-warm-badge.is-closing-soon {
  background: rgba(180, 83, 9, 0.1);
  color: var(--ms-status-closing-soon);
}

.ms-warm-badge.is-upcoming {
  background: rgba(100, 116, 139, 0.1);
  color: var(--ms-status-upcoming);
}

.ms-warm-detail {
  padding: 0 1.35rem 0;
}

.is-expanded > .ms-warm-detail {
  padding: 0 1.35rem 1.25rem;
}

.ms-warm-meta,
.ms-warm-dates {
  margin: 0 0 0.35rem;
  color: var(--ms-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.ms-warm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 10rem;
  margin-top: 1rem;
  padding: 0.4rem 1.15rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-primary);
  color: #fff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.surveys-list li a.ms-warm-cta {
  margin-left: 0;
}

.ms-warm-cta:hover {
  background: var(--ms-primary-hover);
  color: #fff;
  text-decoration: none;
}

.ms-warm-cta.is-disabled {
  background: transparent;
  border: 1px solid var(--ms-border-strong);
  color: var(--ms-text-muted);
  cursor: default;
}

.ms-warm-item.is-closed {
  border-color: var(--ms-list-item-border-closed);
}

.ms-warm-item.is-closed:hover {
  border-color: var(--ms-list-item-border-closed);
}

.ms-warm-item.is-closed .ms-warm-title {
  color: var(--ms-text-muted);
}

.ms-warm-item.is-closed .ms-warm-badge {
  opacity: 0.65;
}

.ms-warm-item.is-upcoming {
  border-color: var(--ms-list-item-border-closed);
}

.ms-warm-item.is-upcoming .ms-warm-title {
  color: var(--ms-text-muted);
}

/* =============================================
   Bold Accordion (Anthropic-inspired)
   ============================================= */

.ms-accordion-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ms-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-accordion-item {
  border-bottom: 2px solid var(--ms-border-strong);
}

.ms-accordion-item:first-child {
  border-top: 2px solid var(--ms-border-strong);
}

.ms-accordion-row {
  padding: 1.25rem 0.25rem;
}

.ms-accordion-row:hover .ms-accordion-title {
  color: var(--ms-primary);
}

.ms-accordion-title {
  flex: 1;
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  transition: color 150ms ease;
}

.ms-accordion-status {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
}

.ms-accordion-status.is-open {
  color: var(--ms-status-pass);
}

.ms-accordion-status.is-upcoming {
  color: var(--ms-status-upcoming);
}

.ms-accordion-detail {
  padding: 0 0.25rem 0 1rem;
}

.is-expanded > .ms-accordion-detail {
  padding: 0 0.25rem 1.25rem 1rem;
}

.ms-accordion-meta,
.ms-accordion-dates {
  margin: 0 0 0.35rem;
  color: var(--ms-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ms-accordion-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 10rem;
  margin-top: 0.65rem;
  padding: 0.4rem 1.15rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-primary);
  color: #fff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.ms-accordion-cta:hover {
  background: var(--ms-primary-hover);
  color: #fff;
  text-decoration: none;
}

.ms-accordion-cta.is-disabled {
  background: transparent;
  border: 1px solid var(--ms-border-strong);
  color: var(--ms-text-muted);
  cursor: default;
}

/* =============================================
   Ghost Cards (Linear-inspired)
   ============================================= */

.ms-ghost-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-ghost-item {
  border: 1px dashed transparent;
  border-radius: 8px;
  transition: border-color 150ms ease;
}

.ms-ghost-item:hover {
  border-color: var(--ms-border-strong);
}

.ms-ghost-row {
  padding: 0.85rem 0.75rem;
  gap: 0.75rem;
}

.ms-ghost-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ms-text-muted);
}

.ms-ghost-dot.is-open {
  background: var(--ms-status-pass);
}

.ms-ghost-dot.is-upcoming {
  background: var(--ms-status-upcoming);
}

.ms-ghost-title {
  flex: 1;
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.ms-ghost-detail {
  padding: 0 0.75rem 0 2.35rem;
}

.is-expanded > .ms-ghost-detail {
  padding: 0 0.75rem 0.85rem 2.35rem;
}

.ms-ghost-meta,
.ms-ghost-dates {
  margin: 0 0 0.25rem;
  color: var(--ms-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.ms-ghost-link {
  display: inline;
  margin-top: 0.45rem;
  color: var(--ms-primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.ms-ghost-link:hover {
  color: var(--ms-primary-hover);
}

.ms-ghost-link.is-disabled {
  color: var(--ms-text-muted);
  text-decoration: none;
  cursor: default;
}

/* =============================================
   Concept C: Split Metadata Panel
   ============================================= */

.ms-view-list .surveys-list:not(.ms-concept-c-list):not(.ms-list-decorated) {
  visibility: hidden;
  animation: ms-list-reveal 0s 3s forwards;
}
@keyframes ms-list-reveal {
  to { visibility: visible; }
}

.ms-concept-c-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ms-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-concept-c-card {
  display: grid;
  grid-template-columns: 1fr 220px;
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-card-compact);
  background: #ffffff;
  box-shadow: var(--ms-shadow-soft);
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.ms-concept-c-card:hover {
  transform: translateY(-2px);
  border-color: var(--ms-primary);
  box-shadow: 0 18px 40px -20px rgba(142, 31, 45, 0.22);
}

.ms-concept-c-card:focus-within {
  outline: 2px solid transparent;
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 4px var(--ms-focus);
}

.ms-concept-c-card.is-closed,
.ms-concept-c-card.is-upcoming {
  background: #ffffff;
  border-color: var(--ms-border);
  box-shadow: none;
}

.ms-concept-c-card.is-closed:hover,
.ms-concept-c-card.is-upcoming:hover {
  transform: none;
  border-color: var(--ms-border);
  box-shadow: none;
}

.ms-concept-c-content {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: var(--ms-space-4);
}

.ms-concept-c-status-pill {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border-radius: var(--ms-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(107, 98, 93, 0.1);
  color: var(--ms-text-muted);
}


.ms-concept-c-status-pill.is-open {
  background: rgba(46, 111, 87, 0.1);
  color: var(--ms-status-pass);
}

.ms-concept-c-status-pill.is-closing-soon {
  background: rgba(180, 83, 9, 0.1);
  color: var(--ms-status-closing-soon);
}

.ms-concept-c-status-pill.is-upcoming {
  background: rgba(100, 116, 139, 0.1);
  color: var(--ms-status-upcoming);
}

.ms-concept-c-title {
  margin: 0;
  color: var(--ms-text-main);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
}

.ms-concept-c-card.is-closed .ms-concept-c-title,
.ms-concept-c-card.is-upcoming .ms-concept-c-title {
  color: var(--ms-text-muted);
}

.ms-concept-c-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 36px;
  min-width: 10rem;
  padding: 0.4rem 1.15rem;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-primary);
  color: #fff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.ms-concept-c-cta:hover {
  background: var(--ms-primary-hover);
  color: #fff;
  text-decoration: none;
}

.ms-concept-c-cta.is-disabled {
  background: transparent;
  border: 1px solid var(--ms-border-strong);
  color: var(--ms-text-muted);
  cursor: default;
}

.ms-concept-c-cta.is-disabled:hover {
  background: transparent;
  color: var(--ms-text-muted);
}

.ms-concept-c-sidebar {
  display: flex;
  align-items: stretch;
  padding: var(--ms-space-4);
  border-left: 3px solid var(--ms-status-pass);
  background: #eee8e4;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.ms-concept-c-card.is-closed .ms-concept-c-sidebar,
.ms-concept-c-card.is-upcoming .ms-concept-c-sidebar {
  background: #e8e2de;
  border-left-color: var(--ms-border);
  opacity: 1;
}

.ms-concept-c-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 0.85rem;
  margin: 0;
  align-content: center;
}

.ms-concept-c-details dt {
  margin: 0;
  color: var(--ms-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ms-concept-c-details dd {
  margin: 0;
  color: var(--ms-text-main);
  font-size: 0.85rem;
  font-weight: 600;
}

.survey-list-heading + .ms-concept-c-list {
  margin-top: var(--ms-space-3);
}

.ms-concept-c-list + .survey-contact {
  margin-top: var(--ms-space-6);
}

.ms-concept-c-card--no-meta {
  grid-template-columns: 1fr;
}

/* =============================================
   Concept responsive overrides
   ============================================= */

@media (max-width: 639px) {
  .ms-completion-summary {
    grid-template-columns: 1fr;
  }

  .ms-divider-row {
    padding: 1rem 0.15rem;
  }

  .ms-divider-status {
    font-size: 0.75rem;
  }

  .ms-warm-row {
    padding: 1rem 1.1rem;
  }

  .ms-warm-detail {
    padding: 0 1.1rem 0;
  }

  .is-expanded > .ms-warm-detail {
    padding: 0 1.1rem 1rem;
  }

  .ms-warm-title {
    font-size: 1rem;
  }

  .ms-warm-cta,
  .ms-warm-cta.is-disabled {
    width: 100%;
  }

  .ms-accordion-title {
    font-size: 1.1rem;
  }

  .ms-accordion-detail {
    padding-left: 0.25rem;
  }

  .is-expanded > .ms-accordion-detail {
    padding-left: 0.25rem;
  }

  .ms-concept-c-card {
    grid-template-columns: 1fr;
  }

  .ms-concept-c-sidebar {
    border-left: 0;
    border-top: 1px solid var(--ms-border);
    background: transparent;
  }

  .ms-concept-c-card.is-closed .ms-concept-c-sidebar,
  .ms-concept-c-card.is-upcoming .ms-concept-c-sidebar {
    border-top-color: var(--ms-border);
  }

  .ms-concept-c-details {
    grid-template-columns: repeat(2, max-content 1fr);
    gap: 0.45rem 0.65rem;
  }

  .ms-flat-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "badge"
      "title"
      "meta"
      "cta";
    gap: var(--ms-space-2);
  }

  .ms-flat-badge {
    justify-self: start;
  }

  .ms-flat-cta {
    width: 100%;
    justify-self: stretch;
  }

  .ms-portal-card {
    gap: var(--ms-space-3);
    padding: var(--ms-space-3);
  }

  .ms-portal-card__cta {
    width: 100%;
    align-self: stretch;
  }

  .ms-portal-card__meta {
    display: flex;
    flex-wrap: wrap;
  }

  .ms-portal-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "meta"
      "badge";
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* A spinner that cannot spin is a ring, not a bug: the ::before is kept visible so
     the control does not change width between motion settings, and so the busy state
     still carries a mark beside its label for a reader who asked for no animation.
     Folded into THIS block rather than given its own - `check_theme_reduced_motion`
     reads a single block, and a second one splits its coverage so every selector in
     the other block reports as unneutralised. */
  .ls-move-btn[aria-busy="true"]::before,
  .ms-primary-action[aria-busy="true"]::before,
  .ls-answers .ms-answer-row,
  .radio-item .control-label,
  .checkbox-item .control-label,
  .btn,
  .form-control,
  .form-select,
  textarea,
  .ms-completion-section-bar-fill,
  .ms-list-chevron,
  .ms-list-detail,
  .ms-divider-item,
  .ms-divider-title,
  .ms-divider-cta,
  .ms-warm-item,
  .ms-warm-cta,
  .ms-accordion-item,
  .ms-accordion-title,
  .ms-accordion-cta,
  .ms-ghost-item,
  .ms-concept-c-card,
  .ms-concept-c-cta,
  .progress-bar,
  .ms-question-error,
  .ms-view-question .ms-action-row {
    transition: none;
    animation: none;
  }

  .ms-flat-item,
  .ms-flat-cta {
    transition: none;
  }

  .ms-portal-card__cta,
  .ms-completion-cta {
    transition: none;
  }

  .ms-completion-structured {
    transition: none;
    animation: none;
  }

  .ms-completion-section.is-entered {
    animation: none;
  }

  .ms-completion-ring-arc {
    transition: none;
  }

  .ms-completion-confetti-dot {
    display: none;
    animation: none;
  }
}

@media (max-width: 991px) {
  .outerframe.container-fluid,
  #surveys-list-container {
    padding-top: 2rem;
  }

  .ms-question-shell,
  .ms-welcome-shell,
  .token-page,
  .surveys-list-container,
  .ms-completion-shell {
    padding: 0;
    border-radius: 0;
  }

  .ms-view-question .outerframe.container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .ms-view-question .outerframe.container-fluid > .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  .ms-view-question .outerframe.container-fluid > .row > .col-xl-8 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .ms-view-question .ms-action-row {
    margin-left: calc(-1 * var(--ms-space-6));
    margin-right: calc(-1 * var(--ms-space-6));
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0 0 var(--ms-radius-card) var(--ms-radius-card);
  }
}

@media (max-width: 767px) {
  .ms-assessment-branding {
    gap: 0.35rem;
  }

  .ms-brand-title {
    font-size: 0.8rem;
  }

  .ms-page-title,
  .survey-name,
  .ms-completion-title,
  .group-title,
  .token-page > .form-heading,
  .ms-view-list .survey-list-heading .form-heading {
    font-size: clamp(1.85rem, 9vw, 2.4rem);
  }

  .ls-move-btns,
  .ms-action-row,
  .navigator {
    flex-direction: column;
    align-items: stretch;
  }

  .ms-view-question .ms-action-row {
    margin-left: calc(-1 * var(--ms-space-6));
    margin-right: calc(-1 * var(--ms-space-6));
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ms-view-question .row.navigator,
  .ms-view-welcome .row.navigator {
    flex-wrap: wrap;
    gap: 0;
  }

  .ms-view-question .row.navigator > .col-6,
  .ms-view-welcome .row.navigator > .col-6 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .ms-view-question .row.navigator > .col-6:first-child {
    order: 1;
    margin-top: 0.6rem;
  }

  .ms-view-question .row.navigator .ls-move-btn,
  .ms-view-welcome .row.navigator .ls-move-btn {
    width: 100%;
  }

  .ls-move-btns .btn,
  .ms-action-row .btn,
  .token-page .btn,
  .surveytitle.btn,
  .ms-completion-cta,
  .btn {
    width: 100%;
    min-width: 0;
  }

  .radio-item .control-label,
  .checkbox-item .control-label {
    min-height: 0;
    padding: 0.35rem 0;
  }

  .ms-view-question .ms-progress-caption {
    flex-direction: column;
    gap: 0.15rem;
  }

  .ms-view-question .outerframe.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ms-view-question .outerframe.container-fluid > .row {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .ms-view-question .outerframe.container-fluid > .row > .col-xl-8 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ms-view-list .surveytitle.btn {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .ms-view-list .surveytitle.btn::after {
    width: 100%;
  }

  .ms-welcome-detail-list {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .ms-welcome-detail-list dd {
    margin-bottom: 0.65rem;
  }

  .ms-welcome-detail-list dd:last-child {
    margin-bottom: 0;
  }

  .ms-completion-structured {
    padding: var(--ms-space-4) var(--ms-space-3);
  }

  .ms-completion-section {
    padding: 1.15rem;
  }

  .ms-completion-section-status {
    min-height: 2rem;
    padding: 0.4rem 0.75rem;
  }

  .ms-completion-title {
    font-size: clamp(1.65rem, 8vw, 2rem);
  }

  .ms-completion-score-ring {
    width: 130px;
    height: 130px;
  }

  .ms-completion-score-value {
    font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  }

  .ms-completion-result-panel {
    grid-template-columns: 1fr;
    justify-items: start;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .ms-completion-result-panel .ms-completion-score-value {
    font-size: 2.15rem;
  }
}

/* Suppress the generic "This question is mandatory" message on type-M (multiple-choice)
   questions when LS also renders the more specific "Please check at least one item."
   message. Without this, trainees see two mandatory messages simultaneously. */
.question-valid-container:has(.ls-question-mandatory-multiplechoice) .ls-question-mandatory-initial {
  display: none;
}