/* Custom styles on top of Tailwind (CDN) and its typography plugin. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 5rem; }

.callout > p { margin: .35rem 0; }
.callout-title { font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

/* Retrieval-practice checkpoint inside the explanation (teal, same shape as the callouts). */
.quick-recall { margin: 1.5rem 0; padding: .75rem 1.25rem; border-left: 4px solid #14b8a6; border-radius: 0 .75rem .75rem 0; background: rgb(20 184 166 / .1); }
.quick-recall > p, .quick-recall details > p { margin: .35rem 0; }
.quick-recall summary { cursor: pointer; font-weight: 500; color: #14b8a6; }

.review-due-banner { margin-bottom: 1.5rem; padding: .9rem 1.25rem; border-radius: .75rem; border-left: 4px solid #f59e0b; background: rgb(245 158 11 / .12); font-weight: 500; }
.review-badge { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 9999px; background: rgb(245 158 11 / .18); color: #d97706; font-size: .7rem; font-weight: 600; vertical-align: middle; }
.dark .review-badge { color: #fcd34d; }

.prose pre[class*="language-"] { border-radius: .75rem; font-size: .85rem; }
.prose code:not(pre code) { padding: .1rem .35rem; border-radius: .35rem; background: rgb(99 102 241 / .12); font-weight: 500; }
.prose code::before, .prose code::after { content: none; }
.prose figure img { margin-inline: auto; border-radius: .75rem; }
.prose table { display: block; overflow-x: auto; }
/* KaTeX's hidden MathML copy (for screen readers) otherwise widens the page on phones. */
.katex .katex-mathml { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.katex { position: relative; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .25rem 0; }
.mermaid { background: transparent !important; text-align: center; }

@media print {
  .no-print { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  main { max-width: none !important; }
  pre, figure, table, .callout, .mermaid { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}