/* ════════════════════════════════════════════════════════════════════════
   study-page-boxes.css: callouts, worked examples and the paper a Space page
   is written on (public/js/study/study-page-editor-boxes.js), the look of the
   study pages Khio makes from files (lib/shared/study-notes.js) on a Keep.
   A box is a <div> around lines of the page: div[data-callout="tip|warn|key"]
   or div[data-example], whose first line is its title. The same rules draw
   one in Version history's preview, which sits in the same .sp-editor shell.
   The paper is data-paper on the page's scroll area (#spScroll).
   Tokens come from /css/shared/khio-ui.css and the ones below, which change
   for dark mode; a phone gets a little less padding.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* The example's graph paper, a cool grey-blue as on study notes. */
    --spx-grid: rgba(43, 92, 132, .1);
    --spx-ex-ink: #3e6c93;
    /* The page's paper: hairlines, and dots a touch darker so they read. */
    --spx-rule: rgba(17, 17, 20, .052);
    --spx-dot: rgba(17, 17, 20, .17);
    --spx-tip-ink: #2b7448; --spx-tip-bg: #f2f8f3; --spx-tip-edge: rgba(43, 116, 72, .17);
    --spx-warn-ink: #9b5410; --spx-warn-bg: #fcf5eb; --spx-warn-edge: rgba(155, 84, 16, .19);
    --spx-key-ink: #3457a6; --spx-key-bg: #f2f5fc; --spx-key-edge: rgba(52, 87, 166, .17);
}
html[data-theme="dark"] {
    --spx-grid: rgba(150, 190, 230, .085);
    --spx-ex-ink: #8db4d8;
    --spx-rule: rgba(255, 255, 255, .05);
    --spx-dot: rgba(255, 255, 255, .15);
    --spx-tip-ink: #82cf9f; --spx-tip-bg: rgba(95, 203, 132, .07); --spx-tip-edge: rgba(95, 203, 132, .2);
    --spx-warn-ink: #eeb46c; --spx-warn-bg: rgba(238, 180, 108, .07); --spx-warn-edge: rgba(238, 180, 108, .21);
    --spx-key-ink: #98b8f4; --spx-key-bg: rgba(125, 162, 245, .08); --spx-key-edge: rgba(125, 162, 245, .22);
}

/* ── A box's lines ────────────────────────────────────────────────────────
   The page's spacing inside a box (study-pages.css spaces the page's own
   blocks): a little air between lines, none after the last. */
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) :is([data-callout], [data-example]) > * { margin: 0 0 .5em !important; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) :is([data-callout], [data-example]) > :first-child { margin-top: 0 !important; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) :is([data-callout], [data-example]) > :last-child { margin-bottom: 0 !important; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) :is([data-callout], [data-example]) > :is(h1, h2, h3) { margin-top: .9em !important; font-size: 19px !important; }
/* A box that opens the page sits at its top, as any first block does. */
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) > :is([data-callout], [data-example]):first-child { margin-top: 0 !important; }

/* ── A callout ────────────────────────────────────────────────────────────
   A soft tint of its kind, a hairline in the same hue, and its name over the
   words with a small icon: Tip, Watch out (a trap) or Key idea. */
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout] {
    --spx-ink: var(--spx-tip-ink); --spx-bg: var(--spx-tip-bg); --spx-edge: var(--spx-tip-edge);
    --spx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
    position: relative; margin: .9em 0 1.1em !important; padding: 13px 18px 14px; border: 1px solid var(--spx-edge); border-radius: 14px; background: var(--spx-bg);
}
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout="warn"] {
    --spx-ink: var(--spx-warn-ink); --spx-bg: var(--spx-warn-bg); --spx-edge: var(--spx-warn-edge);
    --spx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout="key"] {
    --spx-ink: var(--spx-key-ink); --spx-bg: var(--spx-key-bg); --spx-edge: var(--spx-key-edge);
    --spx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E");
}
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout]::before {
    content: 'Tip'; display: block; margin: 0 0 5px; padding-left: 21px; color: var(--spx-ink);
    font: 600 11.5px/18px var(--k-sans); letter-spacing: .11em; text-transform: uppercase; pointer-events: none; user-select: none;
}
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout="warn"]::before { content: 'Watch out'; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout="key"]::before { content: 'Key idea'; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout]::after {
    content: ''; position: absolute; top: 15px; left: 18px; width: 14px; height: 14px; background: var(--spx-ink); pointer-events: none;
    -webkit-mask: var(--spx-icon) center / contain no-repeat; mask: var(--spx-icon) center / contain no-repeat;
}

/* ── A worked example ─────────────────────────────────────────────────────
   On graph paper, as on study notes: the page's card colour under a 20px grid,
   a hairline round it. Its title line opens with "Worked example"; a formula
   sits right on the grid, and a table or a code block keeps a plain ground. */
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-example] {
    margin: 1em 0 1.2em !important; padding: 15px 20px 16px; border: 1px solid var(--k-line); border-radius: 14px;
    background-color: var(--k-surface);
    background-image: linear-gradient(var(--spx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--spx-grid) 1px, transparent 1px);
    background-size: 20px 20px; background-position: -1px -1px;
}
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-example] > [data-example-title] { margin-bottom: .45em !important; font-weight: 600; color: var(--k-ink); }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-example] > [data-example-title]::before {
    content: 'Worked example'; display: inline-block; margin-right: 12px; color: var(--spx-ex-ink); vertical-align: 1px;
    font: 600 11.5px/1 var(--k-sans); letter-spacing: .11em; text-transform: uppercase; pointer-events: none; user-select: none;
}
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-example] :is(table, pre) { background-color: var(--k-surface); }

/* ── The paper ────────────────────────────────────────────────────────────
   Behind the whole page and scrolling with it, faint enough that the words
   stay on top: a study page, never a spreadsheet. Lines are ruled under the
   page's own lines of words by study-page-editor-boxes.js, in a layer at the
   back of the page (.spx-lines). */
#view-deeptutor .sp-scroll[data-paper] { background-attachment: local; }
#view-deeptutor .sp-scroll[data-paper="graph"], #spLayer .spx-swatch[data-paper="graph"] {
    background-image: linear-gradient(var(--spx-rule) 1px, transparent 1px), linear-gradient(90deg, var(--spx-rule) 1px, transparent 1px);
    background-size: 24px 24px;
}
#view-deeptutor .sp-scroll[data-paper="dots"], #spLayer .spx-swatch[data-paper="dots"] {
    background-image: radial-gradient(circle at 1.5px 1.5px, var(--spx-dot) 1.1px, transparent 1.6px);
    background-size: 22px 22px;
}
#spLayer .spx-swatch[data-paper="lines"] { background-image: linear-gradient(transparent calc(100% - 1px), var(--spx-rule) calc(100% - 1px)); }
#view-deeptutor .sp-doc > .spx-lines { position: absolute; top: 0; left: 0; right: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#view-deeptutor .sp-doc > .spx-lines svg { display: block; }
#view-deeptutor .sp-doc > .spx-lines path { fill: none; stroke: var(--spx-rule); stroke-width: 1; shape-rendering: crispEdges; }

/* The picker, from the page's menu: four small sheets of paper. */
#spLayer .spx-paper { width: 300px; padding: 10px 10px 12px; 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 .spx-paper-head { padding: 2px 4px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-ink-3); }
#spLayer .spx-paper-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#spLayer .spx-paper-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 4px 5px; border: 0; border-radius: 11px; background: none; color: var(--k-ink-2); font: 500 13px var(--k-sans); cursor: pointer; transition: background .15s ease, color .15s ease; }
#spLayer .spx-paper-opt:hover { background: var(--k-hover); color: var(--k-ink); }
#spLayer .spx-paper-opt.is-on { color: var(--k-ink); }
#spLayer .spx-paper-opt:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }
#spLayer .spx-swatch { width: 54px; height: 40px; border-radius: 8px; border: 1px solid var(--k-line); background-color: var(--k-paper); --spx-rule: color-mix(in srgb, var(--k-ink) 13%, transparent); --spx-dot: color-mix(in srgb, var(--k-ink) 30%, transparent); }
#spLayer .spx-swatch[data-paper="graph"] { background-size: 9px 9px; }
#spLayer .spx-swatch[data-paper="dots"] { background-size: 9px 9px; }
#spLayer .spx-swatch[data-paper="lines"] { background-size: 100% 9px; }
#spLayer .spx-paper-opt.is-on .spx-swatch { box-shadow: 0 0 0 2px var(--k-surface), 0 0 0 3.5px var(--k-ink); }

/* ── A phone: a little less padding, the same boxes ──────────────────────── */
@media (max-width: 768px), (max-height: 520px) and (pointer: coarse) {
    #view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout] { padding: 12px 14px 13px; border-radius: 12px; }
    #view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-callout]::after { top: 14px; left: 14px; }
    #view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) [data-example] { padding: 13px 14px 14px; border-radius: 12px; }
    #spLayer .spx-paper-opt { min-height: 72px; }
}

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