/* ════════════════════════════════════════════════════════════════════════
   study-page-math.css: formulas on a Space page
   (public/js/study/study-page-math.js). KaTeX draws them in the text's own
   colour, so light and dark need nothing. A formula is clickable to change,
   so it answers a hover; one on its own line is centred and scrolls sideways
   when it is wider than the page. The card that changes one sits in #spLayer
   with the page's other popovers (study-pages.css).
   ════════════════════════════════════════════════════════════════════════ */

#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) .ql-formula { border-radius: 6px; padding: 1px 2px; cursor: pointer; transition: background .15s ease; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) .ql-formula:hover { background: var(--k-hover); }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) .sp-math { display: block; margin: .5em 0 .9em !important; padding: 8px 14px; border-radius: 12px; text-align: center; overflow-x: auto; overflow-y: hidden; cursor: pointer; transition: background .15s ease; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) .sp-math:hover { background: var(--k-hover); }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) .sp-math .katex-display { margin: 0; }
/* Until KaTeX has loaded (or if it never does), the TeX itself. */
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) .is-raw, #spLayer .sp-mathcard-view.is-raw { font: .9em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--k-ink-2); }
/* TeX that does not parse: KaTeX writes it in red, in the page's own red. */
.sp-editor .katex-error, #spLayer .katex-error { color: var(--k-bad) !important; }

/* The card: the TeX, a live preview, Remove and Done. */
#spLayer .sp-mathcard { width: 380px; padding: 10px; border-radius: 14px; background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: var(--k-shadow); animation: k-rise .2s var(--k-ease) both; }
#spLayer .sp-mathcard textarea { display: block; width: 100%; min-height: 38px; max-height: 160px; padding: 8px 11px; border: 1px solid var(--k-line) !important; border-radius: 10px !important; background: var(--k-paper) !important; box-shadow: none !important; outline: 0 !important; resize: none;
    color: var(--k-ink) !important; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
#spLayer .sp-mathcard textarea:focus { border-color: var(--k-blue) !important; box-shadow: 0 0 0 3px rgba(10, 132, 255, .14) !important; }
#spLayer .sp-mathcard textarea::placeholder { color: var(--k-ink-3) !important; font-family: var(--k-sans) !important; }
#spLayer .sp-mathcard-view { display: flex; align-items: center; justify-content: center; min-height: 56px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--k-hover); color: var(--k-ink); overflow-x: auto; }
#spLayer .sp-mathcard-view .katex-display { margin: 0; }
#spLayer .sp-mathcard-view.is-empty { color: var(--k-ink-3); font-size: 13px; }
#spLayer .sp-mathcard-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
#spLayer .sp-mathcard-hint { flex: 1; font-size: 12.5px; color: var(--k-ink-3); }
#spLayer .sp-mathcard-remove, #spLayer .sp-mathcard-done { height: 32px; padding: 0 13px; border: 0; border-radius: 9px; font: 500 13.5px var(--k-sans); cursor: pointer; }
#spLayer .sp-mathcard-remove { background: none; color: var(--k-ink-2); }
#spLayer .sp-mathcard-remove:hover { background: var(--k-hover); color: var(--k-bad); }
#spLayer .sp-mathcard-done { background: var(--k-ink); color: var(--k-paper); font-weight: 600; }
#spLayer .sp-mathcard-remove:focus-visible, #spLayer .sp-mathcard-done:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { #spLayer .sp-mathcard { animation: none; } }