/* ════════════════════════════════════════════════════════════════════════
   study-page-visuals.css: the visuals on a Keep (2026-10-17), drawn by
   public/js/study/study-page-editor-visuals.js: a chart, a row of big numbers
   and a timeline, each one block of the page (.spv). Only editor v2 draws
   them; anything else showing the saved page (Version history's preview)
   gets the plain lines inside div[data-block], in a light frame.
   Tokens come from /css/shared/khio-ui.css and study-page-boxes.css (the
   callouts' inks), which change for dark mode; a phone gets a little less.
   ════════════════════════════════════════════════════════════════════════ */

#view-deeptutor .sp-editor .sp-pm > .spv { margin: 1em 0 1.3em !important; }
#view-deeptutor .sp-editor .sp-pm > .spv:first-child { margin-top: 0 !important; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) div[data-block] { padding: 12px 16px; border: 1px solid var(--k-line); border-radius: 14px; }

/* ── A chart: a card, its title over it ──────────────────────────────────── */
#view-deeptutor .sp-editor .sp-pm > .spv-chart { padding: 16px 18px 12px; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-surface); }
#view-deeptutor .sp-editor .sp-pm > .spv-chart.is-plain { padding: 0; border: 0; background: none; }
#view-deeptutor .spv-title { margin: 0 0 10px; color: var(--k-ink); font: 600 15.5px/1.35 var(--k-sans); }
#view-deeptutor .spv-chart-body { position: relative; height: 270px; }
#view-deeptutor .spv-chart-body canvas { display: block; max-width: 100%; }

/* ── Big numbers: a row of cards ─────────────────────────────────────────── */
#view-deeptutor .sp-editor .sp-pm > .spv-stats { display: grid; grid-template-columns: repeat(var(--spv-n, 3), minmax(0, 1fr)); gap: 10px; container-type: inline-size; }
#view-deeptutor .spv-stat { padding: 14px 16px 13px; border: 1px solid var(--k-line); border-radius: 14px; background: var(--k-surface); }
#view-deeptutor .spv-stat-value { color: var(--k-ink); font: 650 clamp(17px, calc(100cqi / var(--spv-n, 3) / 7.4), 27px)/1.12 var(--k-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-deeptutor .spv-stat:first-child .spv-stat-value { color: var(--spx-key-ink); }
#view-deeptutor .spv-stat-label { margin-top: 6px; color: var(--k-ink-3); font: 500 13.5px/1.35 var(--k-sans); }

/* ── A timeline: "when" on the left, a rail with a dot per step ──────────── */
#view-deeptutor .spv-step { --spv-when: 118px; position: relative; display: grid; grid-template-columns: var(--spv-when) 26px minmax(0, 1fr); grid-template-areas: "when dot body"; padding-bottom: 20px; }
#view-deeptutor .spv-step:last-child { padding-bottom: 0; }
#view-deeptutor .spv-step::before { content: ''; position: absolute; top: .9em; bottom: -.9em; left: calc(var(--spv-when) + 12px); width: 2px; border-radius: 1px; background: var(--k-line); }
#view-deeptutor .spv-step:last-child::before { display: none; }
#view-deeptutor .spv-when { grid-area: when; padding: 2px 4px 0 0; color: var(--spx-key-ink); font: 600 13.5px/1.45 var(--k-sans); text-align: right; }
#view-deeptutor .spv-dot { grid-area: dot; position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; margin-top: .5em; box-sizing: border-box; border: 2.5px solid var(--spx-key-ink); border-radius: 50%; background: var(--k-surface); }
#view-deeptutor .spv-step-body { grid-area: body; min-width: 0; padding-left: 6px; }
#view-deeptutor .spv-step-title { color: var(--k-ink); font: 600 17px/1.45 var(--k-sans); }
#view-deeptutor .spv-point { position: relative; margin-top: 4px; padding-left: 16px; color: var(--k-ink-2); font-size: 15.5px; line-height: 1.55; }
#view-deeptutor .spv-point::before { content: ''; position: absolute; left: 3px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--k-ink) 32%, transparent); }

/* ── A phone: two cards a row, the "when" over its step ──────────────────── */
@media (max-width: 768px), (max-height: 520px) and (pointer: coarse) {
    #view-deeptutor .sp-editor .sp-pm > .spv-chart { padding: 13px 12px 8px; border-radius: 14px; }
    #view-deeptutor .spv-chart-body { height: 220px; }
    #view-deeptutor .sp-editor .sp-pm > .spv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #view-deeptutor .spv-stat { padding: 12px 13px 11px; border-radius: 12px; }
    #view-deeptutor .spv-stat-value { font-size: clamp(17px, calc(50cqi / 7.4), 24px); }
    #view-deeptutor .spv-step { --spv-when: 0px; grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "dot when" ". body"; padding-bottom: 16px; }
    #view-deeptutor .spv-step::before { left: 12px; }
    #view-deeptutor .spv-when { padding: 0 0 0 6px; text-align: left; }
    #view-deeptutor .spv-dot { margin-top: .35em; }
}