/* Embedded Strudel instrument.
   @strudel/repl v1.3.0 leaves the <strudel-editor> host EMPTY and renders the
   real editor as a sibling <div> right after it. So we must NOT give the host a
   background or min-height (that was the stray dark box above the code) — let it
   collapse, and style the rendered sibling instead. */
.md-typeset .strudel-embed { margin: 1.1em 0; }
.md-typeset .strudel-embed > strudel-editor { display: block; }     /* empty host → 0px */
.md-typeset .strudel-embed > div {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .4rem;
  overflow: hidden;
}

/* Task progress badge injected by progress.js */
#task-progress {
  display: inline-block;
  margin: .2rem 0 1rem;
  padding: .2rem .6rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
  border-radius: 999px;
}

/* Interactive tasks: cards with a "done" state */
.md-typeset .task-list-item {
  list-style: none;
  margin-left: -1.6em;
  padding: .35em .7em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .35rem;
  background: var(--md-code-bg-color);
  margin-bottom: .4rem;
}
.md-typeset .task-list-item .task-list-control { cursor: pointer; }
.md-typeset .task-list-item input[type=checkbox] { cursor: pointer; }
.md-typeset .task-list-item.done { opacity: .55; }

/* Pyodide/sympy self-check widget */
.math-check {
  margin: 1.2em 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-primary-fg-color);
  border-radius: .4rem;
  background: var(--md-code-bg-color);
}
.math-check .mc-input {
  font-family: var(--md-code-font-family, monospace);
  font-size: .9rem;
  padding: .45rem .6rem;
  width: min(28rem, 100%);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .3rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.math-check .mc-btn { margin: .5rem 0 .3rem; }
.math-check .mc-status { font-size: .82rem; margin: .4rem 0 0; color: var(--md-default-fg-color--light); }
.math-check .mc-status.ok  { color: #1a9f55; font-weight: 700; }
.math-check .mc-status.err { color: #d3455b; font-weight: 600; }