/* ==========================================================================
   MindMonks Self-Assessment Centre

   Loaded on the Self Assessment page and nowhere else.

   EVERY selector in this file is nested under .mm-assess. There is not a single
   bare element selector, utility override or global rule, so this stylesheet
   cannot reach any other part of the site even if it is enqueued somewhere by
   accident. Colours, type, spacing, radii and motion are all theme tokens — no
   raw values, per the site's design-system audit.

   Tone: calm, clinical, premium. Not a quiz. Nothing celebrates a score.
   ========================================================================== */

.mm-assess {
  --mm-as-max: 46rem;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-lg);
  max-width: var(--mm-container-narrow);
  margin-inline: auto;
  min-width: 0;
}

.mm-assess [hidden] {
  display: none !important;
}

/* Visually hidden, still read aloud. Scoped, so it cannot collide with the
   theme's own utility of the same purpose. */
.mm-assess .mm-as-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The screen container. Every screen paints one or more panels in here, so
   the rhythm between them belongs on this element — without it the panels
   are plain blocks with no margin and sit flush against each other. */
.mm-assess .mm-as-app {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-lg);
  min-width: 0;
  scroll-margin-top: calc(var(--mm-header-height) + var(--mm-space-sm));
}

/* --- The panel every screen lives in ------------------------------------- */

.mm-assess .mm-as-panel {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
  padding: clamp(var(--mm-space-md), 4vw, var(--mm-space-xl));
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
  min-width: 0;
}

.mm-assess .mm-as-panel--wellbeing {
  border-color: var(--mm-olive-200);
  background: var(--mm-surface-olive);
}

.mm-assess .mm-as-panel__title {
  margin: 0;
  font-size: var(--mm-text-2xl);
  line-height: var(--mm-leading-snug);
  color: var(--mm-teal-900);
  text-wrap: pretty;
}

.mm-assess .mm-as-panel__lead {
  margin: 0;
  font-size: var(--mm-text-md);
  color: var(--mm-text-secondary);
}

.mm-assess .mm-as-panel p {
  text-wrap: pretty;
}

.mm-assess .mm-as-instrument {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-space-3xs);
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-surface-muted);
  border: 1px solid var(--mm-border-primary);
  font-size: var(--mm-text-2xs);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: var(--mm-teal-700);
}

.mm-assess .mm-as-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-3xs);
}

.mm-assess .mm-as-meta li {
  margin: 0;
  padding-left: var(--mm-space-sm);
  position: relative;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

.mm-assess .mm-as-meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--mm-olive-300);
}

.mm-assess .mm-as-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
  align-items: center;
  margin: var(--mm-space-2xs) 0 0;
}

@media (max-width: 34rem) {
  .mm-assess .mm-as-actions,
  .mm-assess .mm-as-actions .mm-btn {
    width: 100%;
  }
}

/* --- Assessment header: name, question counter, progress, exit ----------- */

.mm-assess .mm-as-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mm-space-2xs);
  min-width: 0;
}

.mm-assess .mm-as-head__name {
  margin: 0;
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-base);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
  min-width: 0;
}

.mm-assess .mm-as-head__count {
  margin: 0;
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  font-variant-numeric: tabular-nums;
}

.mm-assess .mm-as-bar {
  height: 6px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-border);
  overflow: hidden;
}

.mm-assess .mm-as-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-teal-500);
  transition: width var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-assess .mm-as-exit {
  align-self: flex-start;
}

/* --- The question itself ------------------------------------------------- */

.mm-assess .mm-as-prompt {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-muted);
}

.mm-assess .mm-as-question {
  margin: 0;
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-xl);
  line-height: var(--mm-leading-snug);
  color: var(--mm-teal-900);
  text-wrap: pretty;
}

/* A fieldset wraps every question so the legend is the accessible name for
   its radio group. Styling lives here rather than inline, so the site's
   design-system audit stays at zero findings. */
.mm-assess .mm-as-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.mm-assess .mm-as-fieldset--plain {
  display: block;
}

.mm-assess .mm-as-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mm-space-2xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.mm-assess .mm-as-option {
  position: relative;
  min-width: 0;
}

.mm-assess .mm-as-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mm-assess .mm-as-option__body {
  display: flex;
  align-items: center;
  gap: var(--mm-space-xs);
  width: 100%;
  min-height: var(--mm-tap-target);
  padding: 0.85rem 1rem;
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
  font-size: var(--mm-text-base);
  color: var(--mm-text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--mm-duration-fast) var(--mm-ease-soft),
    background var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-assess .mm-as-option__dot {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--mm-border-strong);
  background: transparent;
  position: relative;
  transition: border-color var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-assess .mm-as-option__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--mm-teal-600);
  opacity: 0;
  transition: opacity var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-assess .mm-as-option input:checked + .mm-as-option__body {
  border-color: var(--mm-teal-500);
  background: var(--mm-surface-muted);
}

.mm-assess .mm-as-option input:checked + .mm-as-option__body .mm-as-option__dot {
  border-color: var(--mm-teal-600);
}

.mm-assess .mm-as-option input:checked + .mm-as-option__body .mm-as-option__dot::after {
  opacity: 1;
}

.mm-assess .mm-as-option input:focus-visible + .mm-as-option__body {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 2px;
}

.mm-assess .mm-as-error {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: var(--mm-error);
}

.mm-assess .mm-as-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
  align-items: center;
  margin-top: var(--mm-space-2xs);
}

.mm-assess .mm-as-nav .mm-btn {
  flex: 1 1 auto;
}

@media (min-width: 34rem) {
  .mm-assess .mm-as-nav {
    justify-content: flex-end;
  }

  .mm-assess .mm-as-nav .mm-btn {
    flex: 0 0 auto;
    min-width: 9rem;
  }

  .mm-assess .mm-as-nav .mm-as-nav__back {
    margin-right: auto;
  }
}

/* --- Assessment selection cards ------------------------------------------ */

.mm-assess .mm-as-cards {
  display: grid;
  gap: var(--mm-space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-assess .mm-as-card {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  margin: 0;
  padding: var(--mm-space-md);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  min-width: 0;
}

.mm-assess .mm-as-card__title {
  margin: 0;
  font-size: var(--mm-text-lg);
  color: var(--mm-teal-900);
}

.mm-assess .mm-as-card__text {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

.mm-assess .mm-as-card__done {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-space-3xs);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-success);
}

/* --- Recommendation ------------------------------------------------------ */

.mm-assess .mm-as-rec {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  padding: var(--mm-space-md);
  border: 1px solid var(--mm-border-primary);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface-muted);
}

.mm-assess .mm-as-rec__title {
  margin: 0;
  font-size: var(--mm-text-xl);
  color: var(--mm-teal-900);
}

.mm-assess .mm-as-gap {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  padding: var(--mm-space-sm) var(--mm-space-md);
  border: 1px dashed var(--mm-olive-300);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface-olive);
}

.mm-assess .mm-as-gap__title {
  margin: 0;
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-md);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-assess .mm-as-gap p {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

/* --- Result -------------------------------------------------------------- */

.mm-assess .mm-as-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mm-space-2xs) var(--mm-space-sm);
}

.mm-assess .mm-as-score__value {
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-4xl);
  line-height: 1;
  color: var(--mm-teal-800);
  font-variant-numeric: tabular-nums;
}

.mm-assess .mm-as-score__of {
  font-size: var(--mm-text-lg);
  color: var(--mm-text-muted);
  font-variant-numeric: tabular-nums;
}

.mm-assess .mm-as-score__noun {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: var(--mm-text-muted);
}

.mm-assess .mm-as-band {
  display: flex;
  align-items: center;
  gap: var(--mm-space-2xs);
  margin: 0;
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-lg);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-900);
}

.mm-assess .mm-as-band__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--mm-radius-xs);
  font-size: var(--mm-text-xs);
  line-height: 1;
}

/* Severity: colour is one of four cues, never the only one. Each level also
   carries its own word, its own glyph, and its own position on the ladder
   below, so the meaning survives any colour-vision deficiency and greyscale
   printing alike. */
.mm-assess .mm-as-l0 .mm-as-band__glyph,
.mm-assess .mm-as-rung.is-on[data-level="0"] {
  background: var(--mm-success-soft);
  color: var(--mm-success);
}

.mm-assess .mm-as-l1 .mm-as-band__glyph,
.mm-assess .mm-as-rung.is-on[data-level="1"] {
  background: var(--mm-olive-100);
  color: var(--mm-olive-800);
}

.mm-assess .mm-as-l2 .mm-as-band__glyph,
.mm-assess .mm-as-rung.is-on[data-level="2"],
.mm-assess .mm-as-l3 .mm-as-band__glyph,
.mm-assess .mm-as-rung.is-on[data-level="3"] {
  background: var(--mm-warning-soft);
  color: var(--mm-warning-text);
}

.mm-assess .mm-as-l4 .mm-as-band__glyph,
.mm-assess .mm-as-rung.is-on[data-level="4"] {
  background: var(--mm-error-soft);
  color: var(--mm-error);
}

/* The ladder: position carries the severity as much as the colour does. */
.mm-assess .mm-as-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-3xs);
}

.mm-assess .mm-as-rung {
  flex: 1 1 6rem;
  min-width: 0;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-background);
  font-size: var(--mm-text-2xs);
  color: var(--mm-text-muted);
  text-align: center;
  text-wrap: pretty;
}

.mm-assess .mm-as-rung.is-on {
  border-color: currentColor;
  font-weight: var(--mm-weight-semibold);
}

.mm-assess .mm-as-rung__mark {
  display: block;
  font-size: var(--mm-text-xs);
  line-height: 1;
  margin-bottom: 0.15rem;
}

/* --- Result sections ----------------------------------------------------- */

.mm-assess .mm-as-sec {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  padding-top: var(--mm-space-sm);
  border-top: 1px solid var(--mm-border);
}

.mm-assess .mm-as-sec__title {
  margin: 0;
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-md);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-assess .mm-as-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
}

.mm-assess .mm-as-list li {
  margin: 0;
  padding-left: var(--mm-space-md);
  position: relative;
  font-size: var(--mm-text-base);
  color: var(--mm-text-secondary);
  text-wrap: pretty;
}

.mm-assess .mm-as-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--mm-olive-500);
}

.mm-assess .mm-as-context {
  margin: 0;
  padding: var(--mm-space-xs) var(--mm-space-sm);
  border-left: 3px solid var(--mm-teal-200);
  background: var(--mm-surface-muted);
  border-radius: 0 var(--mm-radius-sm) var(--mm-radius-sm) 0;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

/* --- What happens next --------------------------------------------------- */

.mm-assess .mm-as-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mm-space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  counter-reset: mm-as-step;
}

.mm-assess .mm-as-steps li {
  margin: 0;
  padding-top: var(--mm-space-xs);
  border-top: 2px solid var(--mm-olive-300);
  min-width: 0;
}

.mm-assess .mm-as-steps li::before {
  counter-increment: mm-as-step;
  content: counter(mm-as-step, decimal-leading-zero);
  display: block;
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-md);
  color: var(--mm-olive-600);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.mm-assess .mm-as-steps strong {
  display: block;
  font-size: var(--mm-text-base);
  color: var(--mm-teal-800);
}

.mm-assess .mm-as-steps span {
  display: block;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

/* --- Safety pathway ------------------------------------------------------ */

.mm-assess .mm-as-crisis {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
  padding: clamp(var(--mm-space-md), 4vw, var(--mm-space-lg));
  border: 2px solid var(--mm-teal-600);
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface);
  box-shadow: var(--mm-shadow-md);
  min-width: 0;
}

.mm-assess .mm-as-crisis__title {
  margin: 0;
  font-size: var(--mm-text-xl);
  color: var(--mm-teal-900);
  text-wrap: pretty;
}

.mm-assess .mm-as-crisis p {
  margin: 0;
  text-wrap: pretty;
}

.mm-assess .mm-as-crisis__urgent {
  padding: var(--mm-space-xs) var(--mm-space-sm);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-surface-muted);
  border-left: 4px solid var(--mm-teal-600);
  font-weight: var(--mm-weight-medium);
  color: var(--mm-teal-900);
}

.mm-assess .mm-as-crisis__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-xs);
}

.mm-assess .mm-as-crisis__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mm-space-3xs) var(--mm-space-xs);
  margin: 0;
  padding: var(--mm-space-xs) var(--mm-space-sm);
  border: 1px solid var(--mm-border-primary);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-neutral-025);
  min-width: 0;
}

.mm-assess .mm-as-crisis__list li.is-urgent {
  border-color: var(--mm-teal-500);
  background: var(--mm-surface-muted);
}

.mm-assess .mm-as-crisis__name {
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-assess .mm-as-crisis__number {
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-lg);
  color: var(--mm-teal-700);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  min-height: var(--mm-tap-target);
  display: inline-flex;
  align-items: center;
}

.mm-assess .mm-as-crisis__number:hover,
.mm-assess .mm-as-crisis__number:focus-visible {
  text-decoration: underline;
}

.mm-assess .mm-as-crisis__note {
  flex: 1 1 100%;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

/* The score is never above the safety information, and never shown by
   default alongside it — it has to be asked for. */
.mm-assess .mm-as-deferred {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  background: var(--mm-background);
}

.mm-assess .mm-as-deferred > summary {
  padding: var(--mm-space-sm) var(--mm-space-md);
  min-height: var(--mm-tap-target);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-medium);
  color: var(--mm-text-secondary);
  border-radius: var(--mm-radius-md);
}

.mm-assess .mm-as-deferred > summary:focus-visible {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 2px;
}

.mm-assess .mm-as-deferred__body {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
  padding: 0 var(--mm-space-md) var(--mm-space-md);
}

/* --- Snapshot ------------------------------------------------------------ */

.mm-assess .mm-as-snapshot {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mm-assess .mm-as-snapshot table {
  width: 100%;
  border-collapse: collapse;
  min-width: 22rem;
}

.mm-assess .mm-as-snapshot th,
.mm-assess .mm-as-snapshot td {
  padding: var(--mm-space-xs) var(--mm-space-2xs);
  text-align: left;
  border-bottom: 1px solid var(--mm-border);
  font-size: var(--mm-text-sm);
  vertical-align: top;
}

.mm-assess .mm-as-snapshot th {
  font-size: var(--mm-text-2xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: var(--mm-text-muted);
  font-weight: var(--mm-weight-semibold);
}

.mm-assess .mm-as-snapshot td:first-child {
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

/* Keep the severity glyph beside its label rather than letting a wrapped
   second line start underneath the glyph. */
.mm-assess .mm-as-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

.mm-assess .mm-as-cell .mm-as-band__glyph {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.05rem;
}

/* --- Disclaimer, privacy, about ------------------------------------------ */

.mm-assess .mm-as-disclaimer {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-3xs);
  padding: var(--mm-space-sm) var(--mm-space-md);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  background: var(--mm-background);
}

.mm-assess .mm-as-disclaimer strong {
  font-size: var(--mm-text-sm);
  color: var(--mm-teal-800);
}

.mm-assess .mm-as-disclaimer p {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

.mm-assess .mm-as-foot {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
}

.mm-assess .mm-as-privacy {
  padding: var(--mm-space-md);
  border: 1px solid var(--mm-border-primary);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface-muted);
}

.mm-assess .mm-as-privacy__title {
  display: flex;
  align-items: center;
  gap: var(--mm-space-2xs);
  margin: 0 0 var(--mm-space-2xs);
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-md);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-assess .mm-as-privacy__title svg {
  flex: none;
  color: var(--mm-teal-600);
}

.mm-assess .mm-as-privacy__lead,
.mm-assess .mm-as-privacy__booking {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

.mm-assess .mm-as-privacy__list {
  list-style: none;
  margin: var(--mm-space-2xs) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-3xs);
}

.mm-assess .mm-as-privacy__list li {
  margin: 0;
  padding-left: var(--mm-space-sm);
  position: relative;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

.mm-assess .mm-as-privacy__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--mm-teal-300);
}

.mm-assess .mm-as-about {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
}

.mm-assess .mm-as-about > summary {
  padding: var(--mm-space-sm) var(--mm-space-md);
  min-height: var(--mm-tap-target);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--mm-text-base);
  font-weight: var(--mm-weight-medium);
  color: var(--mm-teal-800);
  border-radius: var(--mm-radius-md);
}

.mm-assess .mm-as-about > summary:focus-visible {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 2px;
}

.mm-assess .mm-as-about__body {
  padding: 0 var(--mm-space-md) var(--mm-space-md);
}

.mm-assess .mm-as-about__body p {
  margin: 0 0 var(--mm-space-2xs);
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

.mm-assess .mm-as-about__meta {
  color: var(--mm-text-muted);
}

/* --- Share button ------------------------------------------------------- */

.mm-assess .mm-btn--share::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-image: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpolyline points='16 6 12 2 8 6'/%3E%3Cline x1='12' y1='2' x2='12' y2='15'/%3E%3C/svg%3E");
  mask-image: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpolyline points='16 6 12 2 8 6'/%3E%3Cline x1='12' y1='2' x2='12' y2='15'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.mm-assess .mm-btn--share:disabled {
  opacity: 0.6;
  cursor: wait;
}
/* --- Persistent clear-answers bar --------------------------------------- */

/* Sits flush with the top-right of the assessment container on every screen.
   Not viewport-fixed: it travels with the page so it never obscures the
   sticky site header or any panel content. */
.mm-assess .mm-as-clear-bar {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  margin-bottom: calc(-1 * var(--mm-space-2xs));
}

.mm-assess .mm-btn--sm {
  padding-block: 0.35rem;
  font-size: var(--mm-text-sm);
}

/* --- Motion -------------------------------------------------------------- */

.mm-assess .mm-as-enter {
  animation: mm-as-fade var(--mm-duration-base) var(--mm-ease-calm) both;
}

@keyframes mm-as-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-assess .mm-as-enter {
    animation: none;
  }

  .mm-assess .mm-as-bar__fill {
    transition: none;
  }
}

/* --- Share button, refined (15 Sep 2026) --------------------------------
   Own row under a hairline, white surface, icon in a soft teal medallion.
   ::before = medallion, ::after = icon (becomes a spinner while preparing). */

.mm-assess .mm-as-actions:has(> .mm-btn--share)::after {
  content: '';
  order: 98;
  flex: 0 0 100%;
  height: 1px;
  margin: var(--mm-space-3xs) 0;
  background: var(--mm-border);
}

.mm-assess .mm-as-actions .mm-btn.mm-btn--share {
  order: 99;
  position: relative;
  gap: 0;
  min-height: 48px;
  padding: 0.5rem 1.25rem 0.5rem 3.1rem;
  background: var(--mm-surface);
  color: var(--mm-teal-800);
  border-color: var(--mm-border);
  box-shadow: var(--mm-shadow-xs);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: 0;
}

.mm-assess .mm-as-actions .mm-btn.mm-btn--share::before {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 50%;
  width: 2.05rem;
  height: 2.05rem;
  margin: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--mm-surface-muted);
  border: 1px solid var(--mm-teal-100);
  -webkit-mask-image: none;
  mask-image: none;
  transition: background-color var(--mm-duration-base) var(--mm-ease-soft),
    border-color var(--mm-duration-base) var(--mm-ease-soft);
}

.mm-assess .mm-as-actions .mm-btn.mm-btn--share::after {
  content: '';
  position: absolute;
  left: calc(0.45rem + 1.025rem - 0.5rem);
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  background-color: var(--mm-teal-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7'/%3E%3Cpolyline points='16 6 12 2 8 6'/%3E%3Cline x1='12' y1='2' x2='12' y2='15'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7'/%3E%3Cpolyline points='16 6 12 2 8 6'/%3E%3Cline x1='12' y1='2' x2='12' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mm-assess .mm-as-actions .mm-btn.mm-btn--share:hover {
  background: var(--mm-surface);
  color: var(--mm-teal-900);
  border-color: var(--mm-border-primary);
  box-shadow: var(--mm-shadow-sm);
}

.mm-assess .mm-as-actions .mm-btn.mm-btn--share:hover::before {
  background: var(--mm-primary-soft);
  border-color: var(--mm-border-primary);
}

.mm-assess .mm-as-actions .mm-btn.mm-btn--share:focus-visible {
  outline: none;
  box-shadow: var(--mm-shadow-focus);
}

.mm-assess .mm-as-actions .mm-btn.mm-btn--share:disabled {
  opacity: 1;
  color: var(--mm-text-secondary);
  cursor: wait;
  transform: none;
}

.mm-assess .mm-as-actions .mm-btn.mm-btn--share:disabled::after {
  -webkit-mask: none;
  mask: none;
  background: transparent;
  border: 2px solid var(--mm-teal-600);
  border-right-color: transparent;
  border-radius: 50%;
  animation: mm-spin 0.8s linear infinite;
}

@media (max-width: 34rem) {
  .mm-assess .mm-as-actions .mm-btn.mm-btn--share {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-assess .mm-as-actions .mm-btn.mm-btn--share:disabled::after {
    animation: none;
  }
}