/* ════════════════════════════════════════════════════════════════════════
   study-page-history.css: Version history over a Space page
   (public/js/study/study-page-history.js). Two panes over the whole page: the
   version picked, read-only, on the left; the versions by day on the right.
   Tokens and .k-btn come from /css/shared/khio-ui.css, so light and dark
   follow html[data-theme]. The page itself inside the preview is drawn by the
   page's own rules (.sp-editor .ql-editor in study-pages.css).
   ════════════════════════════════════════════════════════════════════════ */

.ph, .ph * { box-sizing: border-box; }
.ph button { font-family: inherit; }
.ph svg { flex: none; }
.ph [hidden] { display: none !important; }

.ph { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--k-paper); color: var(--k-ink); font-family: var(--k-sans); -webkit-font-smoothing: antialiased; animation: k-rise .25s var(--k-ease) both; }

.ph-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 54px; padding: 0 16px; border-bottom: 1px solid var(--k-line); }
.ph-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 8px; border: 0; border-radius: 10px; background: none; color: var(--k-ink-2); font: 500 14.5px var(--k-sans); cursor: pointer; }
.ph-back:hover { background: var(--k-hover); color: var(--k-ink); }
.ph-back svg { width: 17px; height: 17px; }
.ph-h { margin: 0; font: 600 15px var(--k-sans); }
.ph-save { justify-self: end; }

/* One row exactly as tall as the panel, so each pane scrolls on its own. */
.ph-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); }

/* The version picked. */
.ph-view { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ph-bar { flex: none; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 24px; border-bottom: 1px solid var(--k-line); }
.ph-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-what b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-what span { font-size: 13px; color: var(--k-ink-3); }
.ph-switch { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 6px; border: 0; border-radius: 10px; background: none; color: var(--k-ink-2); font: 500 14px var(--k-sans); cursor: pointer; }
.ph-switch:hover { color: var(--k-ink); }
.ph-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--k-ink) 18%, transparent); transition: background .2s ease; }
.ph-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--k-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--k-ease); }
.ph-switch[aria-checked="true"] .ph-track { background: var(--k-blue); }
.ph-switch[aria-checked="true"] .ph-knob { transform: translateX(14px); }
.ph-restore { flex: none; }

.ph-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--k-ink) 22%, transparent) transparent; }
.ph-legend { max-width: 720px; margin: 20px auto 0; padding: 10px 14px; border-radius: 12px; background: var(--k-hover); font-size: 14px; color: var(--k-ink-2); }
.ph-paper { max-width: 720px; margin: 0 auto; padding: 44px 24px 120px; }
.ph-icon { margin-bottom: 10px; font-size: 52px; line-height: 1; }
.ph-title { margin: 0 0 18px; font: 500 clamp(34px, 3.2vw, 44px)/1.08 var(--k-display); letter-spacing: -.025em; }

/* The page inside the preview: read-only, and a link to another page is not a
   way out of it. */
#view-deeptutor .ph .sp-editor .ql-editor { min-height: 0; cursor: default; }
#view-deeptutor .ph .sp-editor .ql-editor ul[data-checked] > li::before, .ph-doc .sp-pagelink { cursor: default; pointer-events: none; }

/* Show changes. What only the version has is highlighted (restoring brings it
   back); what only the page now has is crossed out (restoring takes it out). */
.ph ins { background: color-mix(in srgb, var(--k-good) 22%, transparent); color: inherit; text-decoration: none; border-radius: 3px; }
.ph del { background: color-mix(in srgb, var(--k-bad) 12%, transparent); color: var(--k-ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--k-bad) 70%, transparent); border-radius: 3px; }
#view-deeptutor .ph .ql-editor .ph-in:not(tr, td, th) { background: color-mix(in srgb, var(--k-good) 14%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-good) 14%, transparent); border-radius: 4px; }
#view-deeptutor .ph .ql-editor .ph-out:not(tr, td, th) { background: color-mix(in srgb, var(--k-bad) 11%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-bad) 11%, transparent); border-radius: 4px; color: var(--k-ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--k-bad) 70%, transparent); }
/* In a table, a row or a cell is tinted inside the grid's own lines. */
#view-deeptutor .ph .ql-editor tr.ph-in > *, #view-deeptutor .ph .ql-editor :is(td, th).ph-in { background: color-mix(in srgb, var(--k-good) 14%, transparent); }
#view-deeptutor .ph .ql-editor tr.ph-out > *, #view-deeptutor .ph .ql-editor :is(td, th).ph-out { background: color-mix(in srgb, var(--k-bad) 11%, transparent); color: var(--k-ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--k-bad) 70%, transparent); }
#view-deeptutor .ph .ql-editor img.ph-out, #view-deeptutor .ph .ql-editor .ph-out img { opacity: .45; }
/* A ticked item is struck through on the page; with changes showing, only what goes is. */
#view-deeptutor .ph .sp-editor .ql-editor.is-diff ul[data-checked="true"] > li:not(.ph-out) { text-decoration: none; }

/* The versions, by day. */
.ph-list { min-height: 0; overflow-y: auto; padding: 10px 10px 32px; border-left: 1px solid var(--k-line); background: color-mix(in srgb, var(--k-surface) 55%, var(--k-paper)); scrollbar-width: thin; }
.ph-day { margin: 0; padding: 16px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--k-ink-3); }
.ph-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: var(--k-ink); text-align: left; cursor: pointer; transition: background .15s ease; }
.ph-item:hover { background: var(--k-hover); }
.ph-item.is-on { background: color-mix(in srgb, var(--k-blue) 12%, transparent); }
.ph-item svg { width: 16px; height: 16px; margin-top: 2px; color: var(--k-ink-3); }
.ph-item.is-on svg { color: var(--k-blue); }
.ph-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ph-item-text b { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ph-item-text small { font-size: 12.5px; color: var(--k-ink-3); }
.ph-note { display: flex; flex-direction: column; gap: 6px; padding: 18px 10px; font-size: 13.5px; line-height: 1.45; color: var(--k-ink-3); }
.ph-note b { color: var(--k-ink); font-size: 14px; font-weight: 600; }
.ph-paper .ph-note { align-items: center; padding: 64px 0; text-align: center; }
.ph-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--k-blue); font: 500 14px var(--k-sans); cursor: pointer; }
.ph-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.ph-back:focus-visible, .ph-switch:focus-visible, .ph-item:focus-visible, .ph-link:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }

@media (max-width: 1023px) {
    .ph-body { grid-template-columns: minmax(0, 1fr) 260px; }
    .ph-bar { flex-wrap: wrap; padding: 10px 16px; }
    .ph-save span, .ph-back span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ph { animation: none; }
}