/* ════════════════════════════════════════════════════════════════════════
   study-page-blocks.css: block handles and highlight on a Space page
   (public/js/study/study-page-blocks.js). The look follows study-pages.css and
   its tokens (khio-ui.css), so light and dark come with them. The one thing that
   is its own is the highlight colours: a set per theme, because a pale yellow
   that reads well on paper is wrong on the dark page.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The margin ───────────────────────────────────────────────────────────
   The page's scrolling content is the frame for everything the handle draws,
   so the grip, the drop line and the glow sit in page coordinates and scroll
   with the text. The rail itself takes no clicks; only the grip does. */
.sp-doc { position: relative; }
.spb-rail { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.spb-rail [hidden] { display: none !important; }

.spb-handle { position: absolute; width: 22px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--k-ink-3); cursor: grab; pointer-events: auto; touch-action: none; transition: background .12s ease, color .12s ease; }
.spb-handle svg { width: 16px; height: 16px; }
.spb-handle:hover, .spb-handle.is-dragging { background: var(--k-hover); color: var(--k-ink); }
.spb-handle.is-dragging { cursor: grabbing; }
.spb-handle:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 1px; }

/* While a block is dragged (or its menu is open): the block tinted where it is,
   a thin line where it will land, and a small ghost of its first words beside
   the pointer. */
.spb-tint, .spb-glow { position: absolute; border-radius: 10px; pointer-events: none; }
.spb-tint { background: color-mix(in srgb, var(--k-blue) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-blue) 26%, transparent); }
.spb-drop { position: absolute; height: 2px; border-radius: 2px; background: var(--k-blue); pointer-events: none; }
.spb-drop::before { content: ''; position: absolute; left: -4px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--k-blue); }
.spb-glow { background: color-mix(in srgb, var(--k-blue) 16%, transparent); animation: spb-glow 1s ease-out forwards; }
@keyframes spb-glow { to { opacity: 0; } }
html.spb-grabbing, html.spb-grabbing * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }

.spb-ghost { position: fixed; z-index: 10070; display: flex; align-items: center; gap: 8px; box-sizing: border-box; max-width: 300px; padding: 7px 14px 7px 9px; border-radius: 11px; background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: var(--k-shadow); color: var(--k-ink); font: 500 13.5px var(--k-sans); white-space: nowrap; pointer-events: none; -webkit-font-smoothing: antialiased; }
.spb-ghost svg { flex: none; width: 15px; height: 15px; color: var(--k-ink-3); }
.spb-ghost span { overflow: hidden; text-overflow: ellipsis; }

/* ── The block menu: the page's own .sp-menu, plus a flyout, a hint and a
   row that can be off ───────────────────────────────────────────────────── */
#spLayer .spb-menu { min-width: 236px; }
#spLayer .spb-turn { position: relative; }
#spLayer .spb-turn > .sp-menu-item > svg:last-child { margin-left: auto; color: var(--k-ink-3); }
#spLayer .spb-sub { position: absolute; top: -6px; left: calc(100% + 10px); min-width: 210px; }
#spLayer .spb-keys { margin-left: auto; padding-left: 18px; font: 500 12px var(--k-sans); color: var(--k-ink-3); white-space: nowrap; }
#spLayer .spb-menu .sp-menu-item:disabled { opacity: .38; background: none; cursor: default; }
#spLayer .spb-menu .sp-menu-item[aria-expanded="true"] { background: var(--k-hover); }

/* ── Highlight ────────────────────────────────────────────────────────────
   Light: a soft marker colour under dark text. Dark: the same hues as a veil,
   so the light text on it keeps its contrast. */
:root {
    --spb-hl-yellow: #fbe994;
    --spb-hl-green: #c8ecd0;
    --spb-hl-blue: #cae2fa;
    --spb-hl-pink: #f9d1e1;
    --spb-hl-purple: #ded5f8;
    --spb-hl-orange: #fcdbbb;
}
html[data-theme="dark"] {
    --spb-hl-yellow: rgba(255, 208, 46, .30);
    --spb-hl-green: rgba(62, 201, 108, .30);
    --spb-hl-blue: rgba(64, 156, 255, .34);
    --spb-hl-pink: rgba(255, 102, 158, .32);
    --spb-hl-purple: rgba(172, 134, 255, .34);
    --spb-hl-orange: rgba(255, 150, 58, .32);
}
.sp-hl-yellow { --spb-hl: var(--spb-hl-yellow); }
.sp-hl-green { --spb-hl: var(--spb-hl-green); }
.sp-hl-blue { --spb-hl: var(--spb-hl-blue); }
.sp-hl-pink { --spb-hl: var(--spb-hl-pink); }
.sp-hl-purple { --spb-hl: var(--spb-hl-purple); }
.sp-hl-orange { --spb-hl: var(--spb-hl-orange); }
.sp-hl-yellow, .sp-hl-green, .sp-hl-blue, .sp-hl-pink, .sp-hl-purple, .sp-hl-orange {
    background-color: var(--spb-hl); border-radius: .2em; box-shadow: 0 0 0 .08em var(--spb-hl);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* The colours, in a card under the selection bar. */
#spLayer .spb-hl { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 14px; background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: var(--k-shadow); animation: k-rise .18s var(--k-ease) both; }
#spLayer .spb-hl-dot { width: 24px; height: 24px; padding: 0; border: 1px solid color-mix(in srgb, var(--k-ink) 16%, transparent); border-radius: 50%; background: var(--spb-hl); cursor: pointer; transition: transform .12s ease; }
#spLayer .spb-hl-dot:hover { transform: scale(1.12); }
#spLayer .spb-hl-dot.is-on { box-shadow: 0 0 0 2px var(--k-surface), 0 0 0 3.5px var(--k-ink); }
#spLayer .spb-hl-dot.is-yellow { --spb-hl: var(--spb-hl-yellow); }
#spLayer .spb-hl-dot.is-green { --spb-hl: var(--spb-hl-green); }
#spLayer .spb-hl-dot.is-blue { --spb-hl: var(--spb-hl-blue); }
#spLayer .spb-hl-dot.is-pink { --spb-hl: var(--spb-hl-pink); }
#spLayer .spb-hl-dot.is-purple { --spb-hl: var(--spb-hl-purple); }
#spLayer .spb-hl-dot.is-orange { --spb-hl: var(--spb-hl-orange); }
#spLayer .spb-hl-sep { width: 1px; height: 18px; margin: 0 2px; background: var(--k-line); }
#spLayer .spb-hl-none { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--k-ink-2); font: 500 13.5px var(--k-sans); cursor: pointer; }
#spLayer .spb-hl-none:hover { background: var(--k-hover); color: var(--k-ink); }
#spLayer .spb-hl-dot:focus-visible, #spLayer .spb-hl-none:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .spb-glow { animation-duration: .01s; }
    #spLayer .spb-hl, #spLayer .spb-menu, #spLayer .spb-sub { animation: none; }
}