/* ─── Hint <details> block ────────────────────────────────────────────── */
details.hint {
  border-color: #ffc107;
  background-color: rgba(240, 160, 0, 0.12);
}

details.hint > summary::before {
  background-color: #ffc107;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/></svg>");
  mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/></svg>");
}

/* ─── Dark mode overrides ────────────────────────────────────────────── */
[data-md-color-scheme="slate"] details.hint {
  background-color: rgba(240, 160, 0, 0.12);
}

[data-md-color-scheme="slate"] details.hint > summary {
  color: #ffc107;
}


/* ─── Solution <details> block ───────────────────────────────────────── */
details.solution {
  border-color: #2e7d32;
  background-color: rgba(46, 125, 50, 0.08);
}

details.solution > summary::before {
  background-color: #2e7d32;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>");
  mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>");
}

/* ─── Dark mode overrides ────────────────────────────────────────────── */
[data-md-color-scheme="slate"] details.solution {
  background-color: rgba(46, 125, 50, 0.14);
}

[data-md-color-scheme="slate"] details.solution > summary {
  color: #66bb6a;
}
