/* ════════════════════════════════════════════════════════════════════════
   study-page-editor.css: editor v2 on a Space page (study-page-editor*.js,
   behind the switch in study-deeptutor.js). What a page looks like is shared
   with the Quill editor: study-pages.css, study-page-tables.css and
   study-page-math.css style both through :is(.ql-editor, .sp-pm). This file
   is what v2 draws its own way: ProseMirror's base rules, lists (a line each,
   numbered by the editor), tables (a real grid with column widths), the caret
   between blocks and the placeholder. Tokens come from khio-ui.css, so dark
   mode needs nothing here.
   ════════════════════════════════════════════════════════════════════════ */

/* ── ProseMirror's own rules ────────────────────────────────────────────── */
.sp-pm-frame { position: relative; font-family: var(--k-sans); font-size: 17px; }
.sp-pm { position: relative; outline: 0; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; font-feature-settings: "liga" 0; tab-size: 4; caret-color: var(--k-ink); }
.sp-pm pre { white-space: pre-wrap; }
.sp-pm-frame .ProseMirror-hideselection *::selection { background: transparent; }
.sp-pm-frame .ProseMirror-hideselection { caret-color: transparent; }
.sp-pm img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }
.sp-pm [draggable][contenteditable="false"] { user-select: text; }
/* A block picked whole (a divider, a link to a page, a picture): one soft ring. */
.sp-pm .ProseMirror-selectednode { outline: 2px solid color-mix(in srgb, var(--k-blue) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
.sp-pm hr.ProseMirror-selectednode { outline-offset: 6px; }
/* The caret where there is no line to hold it: before a table at the top, between two tables. */
.sp-pm .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
.sp-pm .ProseMirror-gapcursor::after { content: ''; display: block; position: absolute; top: -2px; width: 22px; border-top: 1.5px solid var(--k-ink); animation: sp-pm-blink 1.1s steps(2, start) infinite; }
.sp-pm.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
@keyframes sp-pm-blink { to { visibility: hidden; } }

/* The empty page's one muted line. */
#view-deeptutor .sp-editor .sp-pm > .is-blank::before { content: attr(data-placeholder); position: absolute; left: 0; right: 0; color: var(--k-ink-3); pointer-events: none; }

/* The page waits for a choice on a draft from Khio ("/ Generate"). */
#view-deeptutor .sp-editor .sp-pm-frame.sp-gen-locked .sp-pm { cursor: default; }

/* ── Indents, alignment and direction (Quill's classes), on the page and in a box ── */
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > :is(p, h1, h2, h3, h4, h5, h6, blockquote):is([class*="ql-indent-"]) { padding-left: calc(var(--ind) * 3em); }
#view-deeptutor .sp-editor .sp-pm .ql-indent-1 { --ind: 1; }
#view-deeptutor .sp-editor .sp-pm .ql-indent-2 { --ind: 2; }
#view-deeptutor .sp-editor .sp-pm .ql-indent-3 { --ind: 3; }
#view-deeptutor .sp-editor .sp-pm .ql-indent-4 { --ind: 4; }
#view-deeptutor .sp-editor .sp-pm .ql-indent-5 { --ind: 5; }
#view-deeptutor .sp-editor .sp-pm .ql-indent-6 { --ind: 6; }
#view-deeptutor .sp-editor .sp-pm .ql-indent-7 { --ind: 7; }
#view-deeptutor .sp-editor .sp-pm .ql-indent-8 { --ind: 8; }
#view-deeptutor .sp-editor .sp-pm .ql-align-center { text-align: center; }
#view-deeptutor .sp-editor .sp-pm .ql-align-right { text-align: right; }
#view-deeptutor .sp-editor .sp-pm .ql-align-justify { text-align: justify; }
#view-deeptutor .sp-editor .sp-pm .ql-direction-rtl { direction: rtl; }
/* Older pages' fonts (Co-Writer's toolbar), as study-deeptutor.js draws them for Quill. */
.sp-pm .ql-font-inter { font-family: 'Inter', -apple-system, sans-serif; }
.sp-pm .ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.sp-pm .ql-font-georgia, .sp-pm .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.sp-pm .ql-font-garamond { font-family: 'EB Garamond', Garamond, Georgia, serif; }
.sp-pm .ql-font-tahoma { font-family: Tahoma, Geneva, Verdana, sans-serif; }
.sp-pm .ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.sp-pm .ql-font-courier, .sp-pm .ql-font-monospace { font-family: 'Courier New', Courier, monospace; }
.sp-pm .ql-video { display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }

/* ── Lists: a line each ─────────────────────────────────────────────────────
   Items sit close together whatever their kind; the last of a run keeps the
   space a block has under it. The marker is drawn in the margin the item's
   depth leaves: a bullet, the number the editor counted (data-n), or the box.
   The same in a callout or a worked example (study-page-boxes.css). */
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li { position: relative; margin: 0 !important; padding-left: calc(28px + var(--ind, 0) * 3em); }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li.is-last { margin-bottom: .5em !important; }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li::before { position: absolute; left: calc(var(--ind, 0) * 3em); width: 22px; text-align: right; color: var(--k-ink-3); font-variant-numeric: tabular-nums; }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li[data-list="bullet"]::before { content: '\2022'; }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li[data-list="ordered"]::before { content: attr(data-n); }
/* Checklists: the box Quill's page draws, ticked with a click on it. */
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li:is([data-list="checked"], [data-list="unchecked"]) { padding-left: calc(32px + var(--ind, 0) * 3em); }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li:is([data-list="checked"], [data-list="unchecked"])::before { content: ''; left: calc(2px + var(--ind, 0) * 3em); top: calc((1.7em - 19px) / 2); width: 19px; height: 19px; box-sizing: border-box; border-radius: 6px;
    border: 1.6px solid color-mix(in srgb, var(--k-ink) 38%, transparent); background: var(--k-surface); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li[data-list="unchecked"]:hover::before { border-color: color-mix(in srgb, var(--k-ink) 62%, transparent); }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li[data-list="checked"]::before { background: var(--k-ink); border-color: var(--k-ink); }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li[data-list="checked"]::after { content: ''; position: absolute; left: calc(9px + var(--ind, 0) * 3em); top: calc((1.7em - 19px) / 2 + 3px); width: 5px; height: 9px; border: solid var(--k-paper); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .sp-li[data-list="checked"] { color: var(--k-ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--k-ink) 30%, transparent); }
#view-deeptutor .sp-editor .sp-pm-frame.sp-gen-locked .sp-li::before { pointer-events: none; }

/* ── Tables: the grid study-page-tables.css draws, in ProseMirror's frame ──
   A table sits in a wrapper that scrolls sideways when its columns are wider
   than the page. Its columns keep the widths they were dragged to. */
#view-deeptutor .sp-editor :is(.sp-pm, [data-callout], [data-example]) > .tableWrapper { margin: .4em 0 1.1em !important; overflow-x: auto; }
#view-deeptutor .sp-editor .sp-pm table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15.5px; line-height: 1.5; }
#view-deeptutor .sp-editor .sp-pm table :is(td, th) { position: relative; box-sizing: border-box; }
#view-deeptutor .sp-editor .sp-pm table tr > :first-child { border-left: 1px solid var(--k-line); }
#view-deeptutor .sp-editor .sp-pm table tbody > tr:first-child > * { border-top: 1px solid var(--k-line); }
#view-deeptutor .sp-editor .sp-pm table tbody > tr:first-child > :first-child { border-top-left-radius: 12px; }
#view-deeptutor .sp-editor .sp-pm table tbody > tr:first-child > :last-child { border-top-right-radius: 12px; }
#view-deeptutor .sp-editor .sp-pm table tbody > tr:last-child > :first-child { border-bottom-left-radius: 12px; }
#view-deeptutor .sp-editor .sp-pm table tbody > tr:last-child > :last-child { border-bottom-right-radius: 12px; }
/* The cell the caret is in, and a block of cells selected together. */
#view-deeptutor .sp-editor .sp-pm.ProseMirror-focused table .is-caret { box-shadow: inset 0 0 0 2px var(--k-blue); background: color-mix(in srgb, var(--k-blue) 5%, transparent); }
#view-deeptutor .sp-editor .sp-pm table .selectedCell { background: color-mix(in srgb, var(--k-blue) 14%, transparent); }
#view-deeptutor .sp-editor .sp-pm table .selectedCell *::selection { background: transparent; }
/* Dragging a column's edge. */
.sp-pm .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: -1px; width: 3px; z-index: 3; border-radius: 2px; background: var(--k-blue); pointer-events: none; }
.sp-pm.resize-cursor, .sp-pm.resize-cursor * { cursor: col-resize; }

@media (prefers-reduced-motion: reduce) {
    .sp-pm .ProseMirror-gapcursor::after { animation: none; }
}