/* ==========================================================================
   MediLab components. Every interactive element has five explicit states:
   default, hover, active/pressed, loading (spinner) and disabled.
   Fields have default, focus (colored ring), error and warning.
   Class names from the prototype are kept, so templates and scripts need no
   renaming: each legacy class is mapped onto one design-system component.
   ========================================================================== */

/* ---------------------------------------------------------------- buttons */
/* Primary: filled blue. Standard buttons are about twice as wide as tall. */
.ml-b,
.ml-btn, .ml-glow, .ml-hd .ml-cta, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta,
.ml-btn-primary, a.d-cta:not(.is-ghost), .ml-send, .bq-ask-upgrade-cta, .mlp-actions .ml-btn-primary {
  --b-bg: var(--ml-accent);
  --b-bg-hover: var(--ml-accent-hover);
  --b-bg-press: var(--ml-accent-press);
  --b-fg: var(--ml-on-accent);
  --b-shadow: var(--ml-elev-accent);
  --b-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 2px 4px rgb(20 79 146 / 0.14), 0 8px 20px rgb(20 79 146 / 0.14);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml-sp-2);
  box-sizing: border-box;
  min-height: var(--ml-control);
  min-width: calc(var(--ml-control) * 2);
  max-width: 100%;
  padding: 0 var(--ml-sp-5);
  border: 0;
  border-radius: var(--ml-r-md);
  background: var(--b-bg);
  color: var(--b-fg);
  box-shadow: var(--b-shadow);
  font-family: var(--ml-font);
  font-size: var(--ml-fs-3);
  font-weight: var(--ml-fw-bold);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease),
              transform var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease);
}
/* the prototype wraps some labels in a span: it carries no look of its own */
.ml-btn > span {
  display: contents;
}
.ml-b:hover, .ml-btn:hover, .ml-glow:hover, .ml-cta:hover, .ml-shop-go:hover, .ml-shop-buy:hover,
.ml-stick-cta:hover, .ml-btn-primary:hover, a.d-cta:not(.is-ghost):hover, .ml-send:hover, .bq-ask-upgrade-cta:hover {
  background: var(--b-bg-hover);
  color: var(--b-fg);
  box-shadow: var(--b-shadow-hover);
  text-decoration: none;
}
.ml-b:active, .ml-btn:active, .ml-glow:active, .ml-cta:active, .ml-shop-go:active, .ml-shop-buy:active,
.ml-stick-cta:active, .ml-btn-primary:active, a.d-cta:not(.is-ghost):active, .ml-send:active, .bq-ask-upgrade-cta:active {
  background: var(--b-bg-press);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
  transform: translateY(1px);
}
html[data-ml-theme="dark"] :is(.ml-b, .ml-btn, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary, a.d-cta:not(.is-ghost), .ml-send) {
  color: var(--ml-on-accent);
}

/* Ghost: no background at rest, a subtle fill only on hover. Pairs with a primary. */
.ml-b--ghost,
.ml-btn2, .ml-fill, a.d-cta.is-ghost, .ml-flip-cta, .ml-dl, .ml-guest-in, .ml-shop-try, .ml-wa,
.ml-btn-secondary, .ml-btn-quiet, .ml-hint, .auth-skip, .auth-plans, .ml-qmore {
  --b-bg: transparent;
  --b-bg-hover: var(--ml-accent-soft);
  --b-bg-press: var(--ml-accent-soft-2);
  --b-fg: var(--ml-accent-text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml-sp-2);
  box-sizing: border-box;
  min-height: var(--ml-control);
  min-width: calc(var(--ml-control) * 2);
  max-width: 100%;
  padding: 0 var(--ml-sp-4);
  border: 0;
  border-radius: var(--ml-r-md);
  background: var(--b-bg);
  color: var(--b-fg);
  box-shadow: none;
  font-family: var(--ml-font);
  font-size: var(--ml-fs-3);
  font-weight: var(--ml-fw-bold);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease);
}
.ml-b--ghost:hover, .ml-btn2:hover, .ml-fill:hover, a.d-cta.is-ghost:hover, .ml-flip-cta:hover, .ml-dl:hover, .ml-guest-in:hover,
.ml-shop-try:hover, .ml-wa:hover, .ml-btn-secondary:hover, .ml-btn-quiet:hover, .ml-hint:hover, .auth-skip:hover, .auth-plans:hover, .ml-qmore:hover {
  background: var(--b-bg-hover);
  color: var(--b-fg);
  text-decoration: none;
}
.ml-b--ghost:active, .ml-btn2:active, .ml-fill:active, a.d-cta.is-ghost:active, .ml-flip-cta:active, .ml-dl:active, .ml-guest-in:active,
.ml-shop-try:active, .ml-wa:active, .ml-btn-secondary:active, .ml-btn-quiet:active, .ml-hint:active, .auth-skip:active, .auth-plans:active, .ml-qmore:active {
  background: var(--b-bg-press);
  transform: translateY(1px);
}
/* a ghost button beside running text stays compact */
.ml-qmore, .ml-shop-try { min-width: 0; padding: 0 var(--ml-sp-3); font-size: var(--ml-fs-2); }
.ml-wa svg { width: 20px; height: 20px; flex: none; }

/* Small: 36px to the eye, 44px to the finger. */
.ml-b--sm, .ml-dl, .ml-flip-cta, .ml-guest-in, .ml-shop-go, .ml-hint {
  min-height: var(--ml-control-sm);
  padding: 0 var(--ml-sp-4);
  font-size: var(--ml-fs-2);
}
.ml-b--sm::before, .ml-dl::before, .ml-flip-cta::before, .ml-guest-in::before, .ml-shop-go::before, .ml-hint::before {
  content: "";
  position: absolute;
  inset: calc((var(--ml-control-sm) - var(--ml-tap)) / 2) 0;
}
.ml-b--lg, .ml-btn, .ml-glow, .ml-stick-cta { min-height: var(--ml-control-lg); padding: 0 var(--ml-sp-6); }
.ml-b--block { display: flex; width: 100%; }

/* Danger: only for destructive actions. */
.ml-b--danger { --b-bg: var(--ml-danger); --b-bg-hover: color-mix(in srgb, var(--ml-danger) 88%, black); --b-bg-press: color-mix(in srgb, var(--ml-danger) 78%, black); --b-fg: #FFFFFF; --b-shadow: none; }

/* Loading: the label steps aside for an integrated spinner; the width holds. */
:is(.ml-b, .ml-b--ghost, .ml-btn, .ml-btn2, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary,
    .d-cta, .ml-send, .ml-fill, .ml-dl, .ml-guest-in, .ml-wa, .ml-hint, .ml-flip-cta, .ml-btn-secondary, .ml-btn-quiet)[aria-busy="true"],
:is(.ml-b, .ml-btn, .ml-btn-primary).is-loading {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
:is(.ml-b, .ml-b--ghost, .ml-btn, .ml-btn2, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary,
    .d-cta, .ml-send, .ml-fill, .ml-dl, .ml-guest-in, .ml-wa, .ml-hint, .ml-flip-cta, .ml-btn-secondary, .ml-btn-quiet)[aria-busy="true"] > *:not(.ml-spin) {
  visibility: hidden;
}

/* Any other button that waits on the network gets the same integrated spinner. */
:where(button, [role="button"], a)[aria-busy="true"]:has(> .ml-spin) {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
:where(button, [role="button"], a)[aria-busy="true"]:has(> .ml-spin) > :not(.ml-spin) { visibility: hidden; }

/* Disabled: muted grey, no depth, no pointer. */
:is(.ml-b, .ml-b--ghost, .ml-btn, .ml-btn2, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary,
    .d-cta, .ml-send, .ml-fill, .ml-dl, .ml-guest-in, .ml-wa, .ml-hint, .ml-flip-cta, .ml-btn-secondary, .ml-btn-quiet):is(:disabled, [aria-disabled="true"], .is-disabled) {
  background: var(--ml-sunken-2) !important;
  color: var(--ml-subtle) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* ------------------------------------------------------ spinner (shared) */
.ml-spin {
  --ml-spin-color: var(--ml-accent-text);
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: var(--ml-r-full);
  border: 2px solid var(--ml-spin-color, currentColor);
  border-inline-end-color: transparent;
  animation: ml-spin 700ms linear infinite;
  visibility: visible !important;
  -webkit-text-fill-color: initial;
  pointer-events: none;
}
.ml-busy-host { position: relative; }
:is(.ml-b, .ml-btn, .ml-glow, .ml-cta, .ml-shop-go, .ml-shop-buy, .ml-stick-cta, .ml-btn-primary, a.d-cta:not(.is-ghost), .ml-send) .ml-spin { --ml-spin-color: var(--ml-on-accent); }
:is(.ml-b--ghost, .ml-btn2, .ml-fill, .d-cta.is-ghost, .ml-dl, .ml-guest-in, .ml-wa, .ml-hint, .ml-flip-cta) .ml-spin { --ml-spin-color: var(--ml-accent-text); }

/* ------------------------------------------------ generic interactive state */
/* Prototype buttons carry their own inline look; the states come from
   filters and transforms, which inline styles leave alone. */
@media (hover: hover) {
  :where(button, [role="button"], summary, a.ml-tile, a.ml-of, .ml-urow, .ml-topic-card, .bq-opt, .mlp-option):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(0.97);
  }
  html[data-ml-theme="dark"] :where(button, [role="button"], summary, a.ml-tile, a.ml-of, .ml-urow, .ml-topic-card, .bq-opt, .mlp-option):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.12);
  }
}
:where(button, [role="button"], a.ml-tile, a.ml-of, .ml-urow, .ml-topic-card, .bq-opt, .mlp-option):not(:disabled):active {
  filter: brightness(0.93);
  transform: translateY(1px);
}
html[data-ml-theme="dark"] :where(button, [role="button"], a.ml-tile, a.ml-of, .ml-urow, .ml-topic-card, .bq-opt, .mlp-option):not(:disabled):active {
  filter: brightness(1.2);
}
:where(button, [role="button"], a):is(:disabled, [aria-disabled="true"]) {
  opacity: 0.48;
  filter: grayscale(1);
  cursor: not-allowed;
}
/* A checked question locks its answers to show the result. Those answers
   are results, not unavailable controls: they keep their green and red and
   stay fully readable. Before 1.3.0 the rule above turned them grey. */
:where(.mlp-option, .bq-opt, .opt, .slot, .node, .lbl-badge, .mlu-qdot, [data-ml-result]):is(:disabled, [aria-disabled="true"]) {
  opacity: 1;
  filter: none;
  cursor: default;
}
:where(button, [role="button"], a, summary)[aria-busy="true"] {
  -webkit-text-fill-color: transparent;
  cursor: progress;
  pointer-events: none;
}
:where(button, [role="button"], a, summary)[aria-busy="true"] > :not(.ml-spin) { visibility: hidden; }
:where(button, a, summary, [role="button"]) {
  transition: filter var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease), background-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease);
}

/* ------------------------------------------------------------ icon buttons */
.ml-ib,
.ml-guest-cart, .ml-cta-icon, .ml-burger, .ml-termsearch, .auth-theme, .ml-marq-nav, .qm-i, .ml-share > .sh {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--ml-tap);
  height: var(--ml-tap);
  min-width: var(--ml-tap);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--ml-r-full);
  background: transparent;
  color: var(--ml-text);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease), transform var(--ml-dur-1) var(--ml-ease);
}
.ml-ib:hover, .ml-guest-cart:hover, .ml-cta-icon:hover, .ml-burger:hover, .ml-termsearch:hover, .auth-theme:hover, .ml-marq-nav:hover, .qm-i:hover, .ml-share > .sh:hover {
  background: var(--ml-tint);
  color: var(--ml-ink);
}
.ml-ib:active, .ml-guest-cart:active, .ml-cta-icon:active, .ml-burger:active, .ml-termsearch:active, .auth-theme:active, .ml-marq-nav:active, .qm-i:active {
  background: var(--ml-tint-2);
  transform: scale(0.96);
}
.ml-ib svg, .ml-guest-cart svg, .ml-cta-icon svg, .ml-termsearch svg, .ml-marq-nav svg { width: 20px; height: 20px; }
/* The personal-area icon is the phone's stand-in for the labelled "אזור אישי"
   button (mobile.css shows it at 900px and below). On a wider screen the
   labelled button is there, so the icon would be a second copy of it. */
@media (min-width: 901px) { .ml-cta-icon { display: none; } }
/* Controls that sit on photos get their own contrasted, outlined disc. */
.ml-ib--media, .ml-marq-nav {
  background: rgb(9 14 20 / 0.52);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ml-ib--media:hover, .ml-marq-nav:hover { background: rgb(9 14 20 / 0.68); color: #FFFFFF; }

/* ------------------------------------------------------------------ chips */
.ml-chip, .bq-chip, .ml-tab-choice, .bq-filter, .gl-chip, .mlp-pill, .ml-engagement-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml-sp-1);
  box-sizing: border-box;
  min-height: var(--ml-control-sm);
  padding: 0 var(--ml-sp-3);
  border: 0;
  border-radius: var(--ml-r-full);
  background: var(--ml-sunken);
  color: var(--ml-text);
  font-family: var(--ml-font);
  font-size: var(--ml-fs-2);
  font-weight: var(--ml-fw-medium);
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: none;
}
button.ml-chip, button.bq-chip, .ml-tab-choice, .bq-filter, .gl-chip { cursor: pointer; user-select: none; }
button.ml-chip::before, .ml-tab-choice::before, .bq-filter::before, .gl-chip::before {
  content: ""; position: absolute; inset: calc((var(--ml-control-sm) - var(--ml-tap)) / 2) 0;
}
.ml-chip:hover, .ml-tab-choice:hover, .bq-filter:hover, .gl-chip:hover { background: var(--ml-sunken-2); }
.ml-chip:active, .bq-filter:active, .gl-chip:active { transform: translateY(1px); }
.ml-chip:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-on, .is-active),
.ml-tab-choice.is-active, .bq-filter.is-active, .gl-chip.is-on {
  background: var(--ml-accent-soft);
  color: var(--ml-accent-text);
  box-shadow: inset 0 0 0 1px var(--ml-accent-line);
}
html[data-ml-theme="dark"] .bq-filter.is-active,
html[data-ml-theme="dark"] .ml-tab-choice.is-active { background: var(--ml-accent-soft) !important; color: var(--ml-accent-text) !important; }

/* Badges: minimal, one fact each. */
.ml-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-sp-1);
  min-height: 24px;
  padding: 0 var(--ml-sp-2);
  border-radius: var(--ml-r-full);
  background: var(--ml-tint);
  color: var(--ml-muted);
  font-size: var(--ml-fs-1);
  font-weight: var(--ml-fw-bold);
  line-height: 1;
  white-space: nowrap;
}
.ml-badge--accent { background: var(--ml-accent-soft); color: var(--ml-accent-text); }
.ml-badge--success { background: var(--ml-success-soft); color: var(--ml-success); }
.ml-badge--warning { background: var(--ml-warning-soft); color: var(--ml-warning-text); }
.ml-badge--danger { background: var(--ml-danger-soft); color: var(--ml-danger); }

/* Segmented control: one sunken track, the active segment lifts. */
.ml-seg {
  display: inline-flex;
  gap: var(--ml-sp-1);
  padding: var(--ml-sp-1);
  border-radius: var(--ml-r-md);
  background: var(--ml-sunken);
  box-shadow: var(--ml-sunken-shadow);
}
.ml-seg > * { border-radius: var(--ml-r-sm) !important; box-shadow: none !important; min-height: 36px; }

/* ------------------------------------------------------------------ fields */
/* Element selectors sit in :where() so a page's own field class (search
   fields with an icon inset, for example) keeps its padding and size. */
.ml-input,
:where(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"],
input[type="password"], input[type="url"], input[type="date"], input:not([type]), select, textarea) {
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--ml-sp-3) var(--ml-sp-4);
  border: 1px solid var(--ml-line-strong);
  border-radius: var(--ml-r-md);
  background-color: var(--ml-surface);
  color: var(--ml-ink);
  font-family: var(--ml-font);
  font-size: var(--ml-fs-3);   /* 16px also stops iOS from zooming the page */
  line-height: var(--ml-lh-ui);
  box-shadow: var(--ml-sunken-shadow);
  transition: border-color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease), background-color var(--ml-dur-1) var(--ml-ease);
}
:where(textarea) { min-height: 112px; resize: vertical; }
::placeholder { color: var(--ml-subtle); opacity: 1; }
:is(.ml-input, input, select, textarea):hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--ml-ink) 28%, transparent); }
:is(.ml-input, input, select, textarea):focus,
:is(.ml-input, input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--ml-accent);
  box-shadow: 0 0 0 3px var(--ml-accent-line);
}
:is(.ml-input, input, select, textarea):is([aria-invalid="true"], .is-error) {
  border-color: var(--ml-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-danger) 20%, transparent);
}
:is(.ml-input, input, select, textarea):is([data-state="warning"], .is-warning) {
  border-color: var(--ml-warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-warning) 26%, transparent);
}
:is(.ml-input, input, select, textarea):disabled {
  background: var(--ml-sunken-2);
  color: var(--ml-subtle);
  box-shadow: none;
  cursor: not-allowed;
}
.ml-field-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--ml-sp-2);
  margin: var(--ml-sp-2) 0 0;
  font-size: var(--ml-fs-2);
  line-height: var(--ml-lh-ui);
  color: var(--ml-muted);
}
.ml-field-msg::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: var(--ml-r-full);
  background: currentColor;
  -webkit-mask: var(--ml-msg-icon) center / contain no-repeat;
  mask: var(--ml-msg-icon) center / contain no-repeat;
}
.ml-field-msg.is-error { color: var(--ml-danger); --ml-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E"); }
.ml-field-msg.is-warning { color: var(--ml-warning-text); --ml-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z'/%3E%3C/svg%3E"); }
.ml-field-msg:not(.is-error):not(.is-warning)::before { display: none; }
.ml-label { display: block; margin: 0 0 var(--ml-sp-2); font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); color: var(--ml-ink); }

/* The prototype's underline field becomes a regular field. */
.ml-field input, .ml-field textarea {
  border: 1px solid var(--ml-line-strong) !important;
  border-radius: var(--ml-r-md) !important;
  background: var(--ml-surface) !important;
  padding: var(--ml-sp-3) var(--ml-sp-4) !important;
}

/* Checkbox. The label is the 44px target; the box is 20px. */
.ml-cbx { display: inline-flex; align-items: center; gap: var(--ml-sp-3); min-height: var(--ml-tap); cursor: pointer; }
.ml-cbx span:first-child {
  flex: none;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid color-mix(in srgb, var(--ml-ink) 36%, transparent) !important;
  border-radius: var(--ml-r-xs) !important;
  background: var(--ml-surface) !important;
  transition: background-color var(--ml-dur-1) var(--ml-ease), border-color var(--ml-dur-1) var(--ml-ease);
}
.ml-cbx:hover span:first-child { border-color: var(--ml-accent) !important; }
.ml-cbx-in:checked + .ml-cbx span:first-child { background: var(--ml-accent) !important; border-color: var(--ml-accent) !important; }
.ml-cbx-in:focus-visible + .ml-cbx span:first-child { box-shadow: 0 0 0 3px var(--ml-accent-line); }
.ml-cbx-in:disabled + .ml-cbx { opacity: 0.48; cursor: not-allowed; }

/* Answer mark inside an option: a plain radio, no gradient ring. */
.ml-ck {
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--ml-ink) 36%, transparent);
  border-radius: var(--ml-r-full);
  background: var(--ml-surface);
  transition: border-color var(--ml-dur-1) var(--ml-ease), background-color var(--ml-dur-1) var(--ml-ease);
}
.ml-ck svg { display: none; }
.bq-opt:hover .ml-ck { border-color: var(--ml-accent); }
.ml-ck.is-on { border-color: var(--ml-accent); background: radial-gradient(circle, var(--ml-accent) 0 5px, var(--ml-surface) 5.5px); }
.ml-ck.is-bad { border-color: var(--ml-danger); background: var(--ml-danger-soft); }
/* the right answer, once checked: a filled green circle with a check */
.ml-ck.is-ok { border-color: var(--ml-success); background: var(--ml-success); }
.ml-ck.is-ok::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ml-on-accent); font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); line-height: 1;
}
.ml-ck.is-bad::after {
  content: "✕";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ml-danger); font-size: var(--ml-fs-1); font-weight: var(--ml-fw-bold); line-height: 1;
}

/* Switches: 52x32 track, the whole label reaches 44px. */
.ml-switch, .ml-liq { position: relative; display: inline-block; width: 52px; height: 32px; min-height: 0; flex: none; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; }
.ml-switch::before, .ml-liq::before { content: ""; position: absolute; inset: -6px -4px; }
.ml-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.ml-switch .slider, .ml-liq .lw {
  position: absolute; inset: 0;
  border-radius: var(--ml-r-full);
  background: var(--ml-sunken-2);
  box-shadow: var(--ml-sunken-shadow);
  transition: background-color var(--ml-dur-2) var(--ml-ease);
  overflow: hidden;
}
.ml-switch .sun-moon, .ml-liq .lo {
  position: absolute; top: 4px; left: 4px; right: auto; bottom: auto;
  width: 24px; height: 24px;
  border-radius: var(--ml-r-full);
  background: var(--ml-surface);
  box-shadow: 0 1px 2px rgb(22 31 42 / 0.2), 0 2px 6px rgb(22 31 42 / 0.12);
  transition: transform var(--ml-dur-2) var(--ml-ease), background-color var(--ml-dur-2) var(--ml-ease);
  animation: none !important;
}
.ml-switch input:checked + .slider, .ml-liq.on .lw { background: var(--ml-accent); box-shadow: none; }
.ml-switch input:checked + .slider .sun-moon, .ml-liq.on .lo { transform: translateX(20px); background: #FFFFFF; }
.ml-liq { direction: ltr; }
.ml-liq .lo { left: auto; right: 4px; }
.ml-liq.on .lo { transform: translateX(-20px); }
.ml-switch input:focus-visible + .slider, .ml-liq:focus-visible .lw { box-shadow: 0 0 0 3px var(--ml-accent-line); }
.ml-switch .stars, .ml-switch .moon-dot, .ml-switch .cloud-light, .ml-switch .cloud-dark, .ml-switch .light-ray { display: none !important; }
html[data-ml-theme="dark"] .ml-switch .sun-moon, html[data-ml-theme="dark"] .ml-liq .lo { background: var(--ml-surface-3); box-shadow: none; }
html[data-ml-theme="dark"] .ml-switch input:checked + .slider .sun-moon, html[data-ml-theme="dark"] .ml-liq.on .lo { background: #FFFFFF; }

/* ------------------------------------------------------------------- cards */
.ml-card {
  box-sizing: border-box;
  padding: var(--ml-sp-4);
  border-radius: var(--ml-r-lg);
  background: var(--ml-surface);
  box-shadow: var(--ml-elev-1);
}
@media (min-width: 720px) { .ml-card { padding: var(--ml-sp-6); } }
a.ml-card, button.ml-card, .ml-card--interactive {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--ml-dur-2) var(--ml-ease), transform var(--ml-dur-2) var(--ml-ease);
}
a.ml-card:hover, button.ml-card:hover, .ml-card--interactive:hover { box-shadow: var(--ml-elev-2); transform: translateY(-2px); }
/* inside a card, groups are separated by space and type, never by another card */
.ml-card__section + .ml-card__section { margin-top: var(--ml-sp-4); padding-top: var(--ml-sp-4); box-shadow: inset 0 1px 0 var(--ml-line); }
.ml-card__title { margin: 0; font-size: var(--ml-fs-4); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-title); color: var(--ml-ink); }
.ml-card__meta { margin: var(--ml-sp-1) 0 0; font-size: var(--ml-fs-2); color: var(--ml-muted); }

.ml-divider { height: 1px; margin: var(--ml-sp-4) 0; border: 0; background: var(--ml-line); }

/* Wells: progress tracks, recessed tables, quote boxes. */
.ml-well { background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow); border-radius: var(--ml-r-md); }
.ml-progress { height: 8px; border-radius: var(--ml-r-full); background: var(--ml-sunken-2); box-shadow: var(--ml-sunken-shadow); overflow: hidden; }
.ml-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ml-accent); transition: width var(--ml-dur-3) var(--ml-ease); }
.ml-progress.is-done > span { background: var(--ml-success); }
/* Progress tracks in lessons and practice are wells in both themes. */
.mlp-track.mlp-track { background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow); }

/* Notes inside a card are wells, not second cards. In the dark theme the
   soft semantic fills sit a step lighter than the card surface and would
   read as another raised card, so a note inside a card takes a deeper shade
   of its own hue and the sunken inset. */
html[data-ml-theme="dark"] :is([style*="background:var(--ml-surface)"], [style*="background: var(--ml-surface)"], .ml-card, .mlp-card, .auth-card)
  :is(div, p, aside, section):is(
    [style*="background:var(--ml-accent-soft)"], [style*="background: var(--ml-accent-soft)"],
    [style*="background:var(--ml-warning-soft)"], [style*="background: var(--ml-warning-soft)"],
    [style*="background:var(--ml-danger-soft)"], [style*="background: var(--ml-danger-soft)"],
    [style*="background:var(--ml-success-soft)"], [style*="background: var(--ml-success-soft)"]),
html[data-ml-theme="dark"] .auth-status {
  --ml-accent-soft: var(--ml-well-accent);
  --ml-warning-soft: var(--ml-well-warning);
  --ml-danger-soft: var(--ml-well-danger);
  --ml-success-soft: var(--ml-well-success);
  box-shadow: var(--ml-sunken-shadow);
}
html[data-ml-theme="dark"] .mlp-track.mlp-track { background: var(--ml-sunken-2); }
html[data-ml-theme="dark"] .mlc-note.mlc-note,
html[data-ml-theme="dark"] .mlc-comment.mlc-comment { background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow); }

/* Accordions */
summary { list-style: none; cursor: pointer; min-height: var(--ml-tap); display: flex; align-items: center; gap: var(--ml-sp-2); }
summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------- legacy cards, calmer now */
/* Topic cards: the swinging colour sheet behind the card is retired;
   hover lifts the card toward the user instead. */
.ml-of { position: relative; z-index: 0; }
.ml-of::before, .ml-of::after { content: none !important; }
a.ml-of:hover, button.ml-of:hover { box-shadow: var(--ml-elev-2) !important; }

/* The four ways into the question bank: calm cards, no spinning liquid. */
.ml-ecard {
  position: relative;
  overflow: hidden;
  border-radius: var(--ml-r-lg);
  background: var(--ml-surface);
  color: var(--ml-ink);
  box-shadow: var(--ml-elev-1);
  cursor: pointer;
  transition: box-shadow var(--ml-dur-2) var(--ml-ease), transform var(--ml-dur-2) var(--ml-ease), background-color var(--ml-dur-1) var(--ml-ease);
}
.ml-ecard .wv { display: none !important; }
.ml-ecard:hover { box-shadow: var(--ml-elev-2); transform: translateY(-2px); }
.ml-ecard.playing { background: var(--ml-accent-soft); box-shadow: inset 0 0 0 2px var(--ml-accent), var(--ml-elev-1); }
.ml-ecard .in { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--ml-sp-1); padding: var(--ml-sp-4); min-height: 96px; text-align: start; }
.ml-ecard .in b { font-size: var(--ml-fs-4); font-weight: var(--ml-fw-bold); color: var(--ml-ink); }
.ml-ecard .in span { font-size: var(--ml-fs-2); line-height: var(--ml-lh-ui); color: var(--ml-muted); }

/* The overview block: a quiet inverse surface, no corner glows or beams. */
.ml-fb {
  position: relative;
  border-radius: var(--ml-r-xl);
  padding: var(--ml-sp-8);
  color: var(--ml-on-inverse);
  background: var(--ml-inverse);
  background-image: none !important;
  box-shadow: var(--ml-elev-2);
}
.ml-fb .fbb { display: none !important; }
.ml-fb .fbtitle { margin: 0; font-size: var(--ml-fs-section); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-display); letter-spacing: var(--ml-ls-display); color: var(--ml-on-inverse); }
.ml-fb .fbsub { margin: var(--ml-sp-2) 0 0; max-width: 62ch; font-size: var(--ml-fs-3); line-height: var(--ml-lh-body); color: var(--ml-on-inverse-muted); }
.ml-fb .fblist { margin: var(--ml-sp-6) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr)); gap: var(--ml-sp-3) var(--ml-sp-6); }
.ml-fb .fbi { display: flex; align-items: flex-start; gap: var(--ml-sp-3); }
.ml-fb .fbck { flex: none; width: 20px; height: 20px; margin-top: 4px; border-radius: var(--ml-r-full); background: var(--ml-accent); display: flex; align-items: center; justify-content: center; }
.ml-fb .fbck svg { width: 12px; height: 12px; fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ml-fb .fbi span { font-size: var(--ml-fs-3); line-height: var(--ml-lh-body); color: var(--ml-on-inverse); }
.ml-fb .fbfoot { margin-top: var(--ml-sp-6); display: flex; align-items: center; gap: var(--ml-sp-4); flex-wrap: wrap; }
.ml-fb .fbnote { font-size: var(--ml-fs-1); color: var(--ml-on-inverse-muted); }
@media (max-width: 560px) { .ml-fb { padding: var(--ml-sp-6) var(--ml-sp-4); } }
html[data-ml-theme="dark"] .ml-fb { box-shadow: var(--ml-elev-2); }

/* Plans: the recommended plan is marked by an accent outline, not animation. */
.ml-plan-hot {
  border: 0 !important;
  background: var(--ml-surface) !important;
  animation: none !important;
  box-shadow: inset 0 0 0 2px var(--ml-accent), var(--ml-elev-2) !important;
}
.ml-planx {
  border-radius: var(--ml-r-xl);
  background: var(--ml-surface);
  box-shadow: var(--ml-elev-1);
  transition: transform var(--ml-dur-2) var(--ml-ease), box-shadow var(--ml-dur-2) var(--ml-ease);
}
.ml-planx:hover { transform: translateY(-2px); box-shadow: var(--ml-elev-2); }

/* Info rows: one quiet list, grouped by a divider not by boxes. */
.ml-info {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ml-sp-3);
  min-height: 48px; padding: 0 var(--ml-sp-4);
  border-radius: 0; background: transparent;
  box-shadow: inset 0 -1px 0 var(--ml-line);
  font-size: var(--ml-fs-2);
}
.ml-info b { color: var(--ml-ink); }
.ml-info span { color: var(--ml-muted); }

/* Illustrations and logos drawn for a white page sit on a plate. */
.ml-value-ico { background: var(--ml-surface); border-radius: var(--ml-r-lg); padding: var(--ml-sp-3); box-sizing: content-box; box-shadow: var(--ml-elev-1); }
img[src*="logo-full"] { background: #FFFFFF; border-radius: var(--ml-r-md); padding: var(--ml-sp-2) var(--ml-sp-3); box-sizing: content-box; box-shadow: none; }
html[data-ml-theme="dark"] .ml-flip-art,
html[data-ml-theme="dark"] img[src*="/tour/"] { background: #F2F4F7; border-radius: var(--ml-r-lg); padding: var(--ml-sp-2); box-sizing: border-box; }
html[data-ml-theme="dark"] img[src*="/edu/"] { background: #F2F4F7; border-radius: var(--ml-r-sm); padding: var(--ml-sp-2); box-sizing: content-box; }
html[data-ml-theme="dark"] .ml-bookimg { mix-blend-mode: normal !important; background: #F2F4F7; border-radius: var(--ml-r-md); padding: var(--ml-sp-2); box-sizing: border-box; }

/* The classroom slideshow keeps its frame still. */
.ml-hh::after { content: none !important; }

/* Favourite and share: 44px icon buttons, accent when on. */
.ml-fav {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ml-tap); height: var(--ml-tap); padding: 0;
  border: 0; border-radius: var(--ml-r-full);
  background: transparent; box-shadow: none; cursor: pointer;
  transition: background-color var(--ml-dur-1) var(--ml-ease);
}
.ml-fav:hover { background: var(--ml-tint); }
.ml-fav svg { width: 20px; height: 20px; fill: none; stroke: var(--ml-muted); stroke-width: 2; transition: fill var(--ml-dur-1), stroke var(--ml-dur-1); }
.ml-fav.is-on svg { fill: var(--ml-accent); stroke: var(--ml-accent); }
.ml-share {
  position: relative; display: inline-flex; align-items: center;
  height: var(--ml-tap); max-width: none; overflow: visible;
  border-radius: var(--ml-r-full); background: transparent; box-shadow: none;
}
.ml-share .nets { display: none; }

/* Hint: a quiet ghost with a leading icon. */
.ml-hint { font-size: var(--ml-fs-2); }
.ml-hint::after { content: none !important; }

/* Sign out: a plain ghost button with its icon; nothing slides. */
.ml-logout {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: row;
  gap: var(--ml-sp-2);
  width: auto; min-width: var(--ml-tap); height: var(--ml-tap); padding: 0 var(--ml-sp-3);
  border: 0; border-radius: var(--ml-r-md);
  background: transparent; color: var(--ml-muted); box-shadow: none;
  font: var(--ml-fw-medium) var(--ml-fs-2)/1 var(--ml-font);
  overflow: visible; cursor: pointer;
}
.ml-logout .sign { width: auto; display: inline-flex; }
.ml-logout .sign svg { width: 16px; height: 16px; }
.ml-logout .sign svg path { fill: currentColor; }
.ml-logout .text { position: static; width: auto; opacity: 1; color: inherit; font-size: inherit; padding: 0; }
.ml-logout:hover { width: auto; border-radius: var(--ml-r-md); background: var(--ml-tint); color: var(--ml-ink); }
.ml-logout:hover .sign, .ml-logout:hover .text { width: auto; padding: 0; }
.ml-logout:active { transform: translateY(1px); background: var(--ml-tint-2); }

/* Loader: calm, accent-coloured. */
.ml-loader { --uib-color: var(--ml-accent); }

/* Terms in running text */
.ml-qterm, .bq-term {
  color: var(--ml-accent-text) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ml-accent-line) !important;
  border-radius: 0 !important;
}
.ml-qterm:hover, .bq-term:hover { background: var(--ml-accent-soft) !important; border-bottom-color: currentColor !important; }

/* The sticky call to action bar for guests */
.ml-stick { background: var(--ml-glass) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--ml-elev-2) !important; }

/* Wordmark: the printed logo's colours in both modes. */
.ml-wm-name { color: var(--ml-brand-blue); }
.ml-wm-mid { color: var(--ml-brand-green); }
.ml-wm-tld { color: var(--ml-brand-ink); }

/* Testimonial quote marks are decoration: no semantic hue. */
svg[fill="#F4845F"] { fill: var(--ml-accent-line); }
svg [stop-color="#e81cff"], svg [stop-color="#40c9ff"] { stop-color: var(--ml-accent); }

/* ------------------------------------------- sound, touch and motion menu */
/* Each setting is a switch with its state written next to it, so on and
   off read without colour. */
.ml-fxset { display: grid; }
.ml-fxrow { display: flex; align-items: center; gap: var(--ml-sp-4); padding: var(--ml-sp-3) 0; box-shadow: inset 0 -1px 0 var(--ml-line); }
.ml-fxrow:last-child { box-shadow: none; }
.ml-fxrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ml-sp-1); }
.ml-fxrow-t b { font-size: var(--ml-fs-3); font-weight: var(--ml-fw-bold); line-height: var(--ml-lh-ui); color: var(--ml-ink); }
.ml-fxrow-t span { font-size: var(--ml-fs-2); line-height: var(--ml-lh-ui); color: var(--ml-muted); }
.ml-fxrow-t .ml-fxrow-note { color: var(--ml-warning-text); }
.ml-fxrow.is-off .ml-fxrow-t b { color: var(--ml-muted); }
.ml-fxtry { padding: 0 0 var(--ml-sp-3); box-shadow: inset 0 -1px 0 var(--ml-line); }
.ml-fxsw {
  flex: none; display: inline-flex; align-items: center; gap: var(--ml-sp-2);
  min-height: var(--ml-tap); min-width: 96px; padding: 0 var(--ml-sp-1); border: 0; border-radius: var(--ml-r-md);
  background: none; color: var(--ml-text); font: inherit; font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); cursor: pointer;
}
.ml-fxsw-t {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--ml-r-full);
  background: var(--ml-sunken-2); box-shadow: var(--ml-sunken-shadow);
  transition: background-color var(--ml-dur-2) var(--ml-ease);
}
.ml-fxsw-t::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--ml-r-full);
  background: var(--ml-surface); box-shadow: 0 1px 2px rgb(22 31 42 / 0.2), 0 2px 6px rgb(22 31 42 / 0.12);
  transition: transform var(--ml-dur-2) var(--ml-ease);
}
.ml-fxsw[aria-checked="true"] .ml-fxsw-t { background: var(--ml-accent); box-shadow: none; }
/* the same direction as the night-mode switch in the header */
.ml-fxsw[aria-checked="true"] .ml-fxsw-t::after { transform: translateX(18px); }
.ml-fxsw[aria-checked="true"] .ml-fxsw-l { color: var(--ml-accent-text); }
.ml-fxsw[aria-disabled="true"] { cursor: not-allowed; opacity: 0.56; }

/* the menu row that opens those settings */
.ml-dr-fx {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ml-sp-3);
  width: 100%; min-height: 52px; padding: var(--ml-sp-3) var(--ml-sp-4); border: 0;
  background: transparent; color: var(--ml-muted); font: inherit; font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold);
  text-align: start; cursor: pointer; box-shadow: inset 0 1px 0 0 var(--ml-line);
}
.ml-dr-fx:hover { background: var(--ml-tint); color: var(--ml-ink); }
.ml-dr-fx-state { font-weight: var(--ml-fw-medium); color: var(--ml-muted); white-space: nowrap; }

/* The moments themselves: short, once, and only where they explain what
   happened. Correct answers lift a little, wrong ones shake briefly,
   finishing something glows once. */
@keyframes ml-fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes ml-fx-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ml-fx-glow { from { outline: 6px solid color-mix(in srgb, var(--ml-success) 32%, transparent); outline-offset: 0; } to { outline: 6px solid transparent; outline-offset: 8px; } }
.ml-fx-pop { animation: ml-fx-pop 320ms var(--ml-ease) both; }
.ml-fx-shake { animation: ml-fx-shake 360ms var(--ml-ease) both; }
.ml-fx-glow { animation: ml-fx-glow 700ms var(--ml-ease) both; }

/* ------------------------------------------------------- segmented control */
/* A small set of views over the same content. The chosen view sits on a
   raised white segment in bold, so the state reads without colour. On a
   phone the row scrolls instead of wrapping into a grid. */
.ml-seg {
  display: flex; gap: var(--ml-sp-1); width: fit-content; max-width: 100%;
  margin-bottom: var(--ml-sp-4); padding: var(--ml-sp-1);
  border-radius: var(--ml-r-lg); background: var(--ml-sunken); box-shadow: var(--ml-sunken-shadow);
  overflow-x: auto; scrollbar-width: none; box-sizing: border-box;
}
.ml-seg::-webkit-scrollbar { display: none; }
.ml-seg > [role="tab"], .ml-seg > button {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--ml-sp-2);
  min-height: var(--ml-tap); padding: 0 var(--ml-sp-4); border: 0; border-radius: var(--ml-r-md);
  background: transparent; color: var(--ml-text); font: inherit; font-size: var(--ml-fs-3); font-weight: var(--ml-fw-medium);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--ml-dur-1) var(--ml-ease), color var(--ml-dur-1) var(--ml-ease), box-shadow var(--ml-dur-1) var(--ml-ease);
}
.ml-seg > :hover { background: var(--ml-tint); color: var(--ml-ink); }
.ml-seg > [aria-selected="true"], .ml-seg > [aria-pressed="true"] {
  background: var(--ml-surface); color: var(--ml-accent-text); font-weight: var(--ml-fw-bold); box-shadow: var(--ml-elev-1);
}
html[data-ml-theme="dark"] .ml-seg > [aria-selected="true"], html[data-ml-theme="dark"] .ml-seg > [aria-pressed="true"] { background: var(--ml-surface-2, var(--ml-surface)); }
@media (max-width: 640px) { .ml-seg > [role="tab"], .ml-seg > button { padding: 0 var(--ml-sp-3); font-size: var(--ml-fs-2); } }


/* ------------------------------------------------------------------ score
   A score is a result the student earned, so it reads first: a large number
   in the colour of its band, with a word that says what the band means
   (colour is never the only signal). 80 and up: green. 55 to 79: amber.
   Below 55: red. The badge sits in lists; the ring opens a result screen. */
.ml-score {
  display: inline-flex; align-items: center; gap: var(--ml-sp-2); flex: none;
  min-height: 36px; padding: var(--ml-sp-1) var(--ml-sp-3);
  border-radius: var(--ml-r-full);
  background: var(--ml-score-soft); color: var(--ml-score-ink);
  font-weight: var(--ml-fw-bold); line-height: 1; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ml-score-ring) 40%, transparent);
}
.ml-score b { font-size: var(--ml-fs-5); font-weight: var(--ml-fw-heavy); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ml-score small { font-size: var(--ml-fs-2); font-weight: var(--ml-fw-bold); }
.ml-score--high { --ml-score-soft: var(--ml-success-soft); --ml-score-ink: var(--ml-success); --ml-score-ring: var(--ml-success); }
.ml-score--mid  { --ml-score-soft: var(--ml-warning-soft); --ml-score-ink: var(--ml-warning-text); --ml-score-ring: var(--ml-warning); }
.ml-score--low  { --ml-score-soft: var(--ml-danger-soft);  --ml-score-ink: var(--ml-danger);  --ml-score-ring: var(--ml-danger); }
.ml-score--none { --ml-score-soft: var(--ml-sunken); --ml-score-ink: var(--ml-muted); --ml-score-ring: var(--ml-line-strong); }
.ml-score--none b { font-size: var(--ml-fs-2); }

.ml-score-hero { display: grid; justify-items: center; gap: var(--ml-sp-3); }
.ml-score-ring { position: relative; width: 148px; height: 148px; }
.ml-score-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ml-score-ring .trk { fill: none; stroke: var(--ml-sunken-2); stroke-width: 12; }
.ml-score-ring .arc { fill: none; stroke: var(--ml-score-ring); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1100ms var(--ml-ease); }
.ml-score-ring .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ml-score-ring .num b { font-size: 52px; line-height: 1; font-weight: var(--ml-fw-heavy); color: var(--ml-score-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.ml-score-ring .num small { margin-top: var(--ml-sp-1); font-size: var(--ml-fs-2); color: var(--ml-muted); font-weight: var(--ml-fw-medium); }
.ml-score-word {
  display: inline-flex; align-items: center; gap: var(--ml-sp-2);
  min-height: 36px; padding: var(--ml-sp-1) var(--ml-sp-4); border-radius: var(--ml-r-full);
  background: var(--ml-score-soft); color: var(--ml-score-ink);
  font-size: var(--ml-fs-3); font-weight: var(--ml-fw-bold);
}

/* ------------------------------------------------------------ EXP gained
   Points show where they were earned: a gold "+N EXP" rises from the answer
   or the activity, with a short coin sound, and a bar under the header fills
   toward the next level. A new level gets its own moment with confetti.
   Without animations the same information appears without movement. */
:root { --ml-xp-bg: #FFC83D; --ml-xp-ink: #3A2600; --ml-xp-glow: rgb(255 184 0 / 0.45); }
html[data-ml-theme="dark"] { --ml-xp-bg: #F4C855; --ml-xp-ink: #2A1C00; --ml-xp-glow: rgb(244 200 85 / 0.35); }
.ml-xp-star { width: 18px; height: 18px; flex: none; }
.ml-xp-float {
  position: fixed; z-index: calc(var(--ml-z-toast) + 1); pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 12px; border-radius: var(--ml-r-full);
  background: var(--ml-xp-bg); color: var(--ml-xp-ink);
  font-size: var(--ml-fs-4); font-weight: var(--ml-fw-heavy); line-height: 1; white-space: nowrap;
  box-shadow: 0 0 0 4px var(--ml-xp-glow), var(--ml-elev-2);
  transform: translate(-50%, -50%);
  animation: ml-xp-rise 1600ms var(--ml-ease) forwards;
}
.ml-xp-float bdi { direction: ltr; unicode-bidi: isolate; }
.ml-xp-float.is-still { animation: none !important; transform: translate(-50%, -60%); }
@keyframes ml-xp-rise {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  16%  { opacity: 1; transform: translate(-50%, -60%) scale(1.18); }
  28%  { transform: translate(-50%, -70%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}

.ml-xpbar {
  position: fixed; z-index: var(--ml-z-toast); pointer-events: none;
  top: calc(var(--ml-hd-h, 64px) + var(--ml-sp-3)); inset-inline: 0; margin-inline: auto;
  width: min(440px, calc(100% - 2 * var(--ml-sp-4)));
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ml-sp-2) var(--ml-sp-3);
  padding: var(--ml-sp-3) var(--ml-sp-4); box-sizing: border-box;
  border-radius: var(--ml-r-lg); background: var(--ml-inverse); color: var(--ml-on-inverse);
  box-shadow: var(--ml-elev-3);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--ml-dur-2) var(--ml-ease), transform var(--ml-dur-2) var(--ml-ease);
}
html[data-ml-theme="dark"] .ml-xpbar { background: var(--ml-surface-3); color: var(--ml-ink); }
.ml-xpbar.is-on { opacity: 1; transform: none; }
.ml-xpbar-gain {
  grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px;
  padding: var(--ml-sp-2) var(--ml-sp-3); border-radius: var(--ml-r-full);
  background: var(--ml-xp-bg); color: var(--ml-xp-ink);
  font-size: var(--ml-fs-3); font-weight: var(--ml-fw-heavy); white-space: nowrap;
}
.ml-xpbar-gain bdi { direction: ltr; unicode-bidi: isolate; }
.ml-xpbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ml-sp-3); font-size: var(--ml-fs-2); line-height: var(--ml-lh-ui); }
.ml-xpbar-top b { font-size: var(--ml-fs-3); }
.ml-xpbar-top span { opacity: 0.8; white-space: nowrap; }
.ml-xpbar-track { height: 10px; border-radius: var(--ml-r-full); background: rgb(255 255 255 / 0.16); overflow: hidden; }
html[data-ml-theme="dark"] .ml-xpbar-track { background: var(--ml-sunken-2); }
.ml-xpbar-fill { display: block; height: 100%; border-radius: inherit; background: var(--ml-xp-bg); box-shadow: 0 0 12px var(--ml-xp-glow); transition: width 1000ms var(--ml-ease); }
.ml-xpbar.is-level { box-shadow: 0 0 0 3px var(--ml-xp-bg), var(--ml-elev-3); }
.ml-xpbar.is-level .ml-xpbar-top b { color: var(--ml-xp-bg); font-size: var(--ml-fs-4); }
html[data-ml-theme="dark"] .ml-xpbar.is-level .ml-xpbar-top b { color: var(--ml-warning-text); }
.ml-confetti { position: fixed; z-index: calc(var(--ml-z-toast) + 2); pointer-events: none; width: 0; height: 0; }
.ml-confetti i {
  position: absolute; left: 0; top: 0; width: 8px; height: 12px; border-radius: 2px; background: var(--c);
  animation: ml-confetti 1300ms cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes ml-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .ml-confetti { display: none; } }
html[data-ml-motion="reduced"] .ml-confetti { display: none; }