/* Annotation layer and whiteboard chrome (annotate.js, 2026-07-13).
   Color tokens --pen-ink and --board-bg live in theme.css beside the rest
   of the lighting engine, so the default purple pen resolves per theme:
   dark purple on the light whiteboard, light lavender on the dark
   blackboard.

   Stacking contract: header dropdown menus sit at 1100 and the quiz modal
   overlay at 1000 (main.css). The glass pane and its chrome sit above both
   so the student can draw over any surface, the quiz modal included:
     floating unit whiteboard   950  (under the quiz modal)
     glass pane canvas         1500
     sticky header, annotating 1550  (only while annotate mode is on)
     floating button group     1600
     pen toolbar               1650

   The sticky header idles at 900, below the quiz modal, and is lifted over
   the glass pane only while annotate mode is on. See the escape hatch block
   at the foot of this file: without it the pane would swallow the very
   clicks that switch it back off. */

/* ---------------------------------------------------------------------- */
/* The glass pane: idle it only displays ink and lets every click and      */
/* scroll through; annotate mode captures the pointer for the pen.         */
/* ---------------------------------------------------------------------- */

.ink-overlay-canvas {
    position: fixed;
    inset: 0;
    /* A canvas is a replaced element: without an explicit CSS size it
       renders at its intrinsic bitmap size (viewport times the device
       pixel ratio), overflowing the viewport on scaled displays and
       shifting every mark southeast of the cursor. Pinning the CSS box
       here and measuring the bitmap from getBoundingClientRect keeps ink
       exactly under the pen at any display scale. */
    width: 100%;
    height: 100%;
    z-index: 1500;
    pointer-events: none;
}

.ink-overlay-canvas.active {
    pointer-events: auto;
    touch-action: none;
    cursor: crosshair;
}

/* The floating button cluster, present on every view: the whiteboard summon
   and the pen toggle, side by side in the bottom right corner. The group owns
   the fixed position and the stacking, so the buttons themselves are ordinary
   flex children and a third could be added without touching either.

   It outranks the glass pane (1500) on purpose. These are the controls that
   turn the pane off, so they can never be behind it. */
.ink-fab-group {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* The quiz modal already docks a Scratch Whiteboard beside itself, and the
   floating board sits at 950, under the modal, so summoning it from inside a
   quiz would open a panel nobody can see. The button stands down for the
   duration. The pen stays: drawing over the question is the whole point of
   the glass pane. */
body.quiz-modal-open .ink-fab-board {
    display: none;
}

.ink-fab {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    background: var(--panel-bg);
    color: var(--accent-text);
    cursor: pointer;
    box-shadow: 0 6px 18px var(--shadow-color);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ink-fab:hover {
    border-color: var(--accent-color);
}

.ink-fab[aria-pressed="true"] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

.ink-fab:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* The shared pen toolbar. The overlay variant floats top center while     */
/* annotate mode is on; the board variant sits inline in the board bar.    */
/* ---------------------------------------------------------------------- */

.ink-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ink-toolbar-overlay {
    position: fixed;
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1650;
    max-width: calc(100vw - 1.5rem);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.ink-toolbar-overlay[hidden] {
    display: none;
}

/* Both this toolbar and the frozen header want the top of the viewport, and
   the toolbar paints above (1650 over 1550), so left alone it lies across the
   progress readout. Once the header pins, the toolbar drops below it. */
body.header-stuck .ink-toolbar-overlay {
    top: 2.9rem;
}

.ink-swatch {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 2px solid var(--panel-border);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.15s ease;
}

/* The default purple swatch tracks the theme resolved pen token, so the
   button itself previews dark purple in light mode and lavender in dark. */
.ink-swatch.ink-default {
    background: var(--pen-ink);
}

.ink-swatch.active {
    border-color: var(--accent-color);
    transform: scale(1.15);
}

.ink-swatch:focus-visible,
.ink-size:focus-visible,
.ink-tool-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.ink-size {
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ink-size-dot {
    display: block;
    border-radius: 50%;
    background: var(--pen-ink);
}

.ink-size.active {
    border-color: var(--accent-color);
    background: var(--accent-soft);
}

.ink-tool-btn {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-color);
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ink-tool-btn:hover {
    border-color: var(--accent-color);
}

.ink-tool-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

.ink-done-btn {
    color: var(--accent-text);
    border-color: var(--accent-color);
}

.ink-divider {
    width: 1px;
    height: 1.35rem;
    background: var(--panel-border);
}

/* ---------------------------------------------------------------------- */
/* Dedicated whiteboard: an opaque drawing panel. White board in light     */
/* mode, blackboard in dark mode, per the --board-bg token.                */
/* ---------------------------------------------------------------------- */

.ink-board {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
}

.ink-board-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--panel-border);
}

.ink-board-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-text);
    margin-right: auto;
    white-space: nowrap;
}

.ink-board-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--board-bg);
}

.ink-board-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

/* ---------------------------------------------------------------------- */
/* Quiz modal split view: the runner keeps its card on the left and the    */
/* dedicated whiteboard docks beside it on the right.                      */
/* ---------------------------------------------------------------------- */

.quiz-modal-overlay.quiz-split {
    gap: 1rem;
}

.quiz-split .quiz-modal {
    flex: 0 1 640px;
    height: 90vh;
}

.quiz-board-panel {
    flex: 1 1 380px;
    max-width: 760px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-color);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 18px 50px var(--shadow-color);
}

.quiz-board-panel[hidden] {
    display: none;
}

.quiz-board-toggle {
    background: transparent;
    color: var(--accent-text);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease;
}

.quiz-board-toggle:hover {
    border-color: var(--accent-color);
}

/* On narrow screens the quiz keeps the full width; the glass pane pen
   still covers scratch work over the quiz itself. */
@media (max-width: 900px) {
    .quiz-board-panel,
    .quiz-board-toggle {
        display: none;
    }
}

/* ---------------------------------------------------------------------- */
/* Floating unit whiteboard, summoned on demand from the unit nav row.     */
/* ---------------------------------------------------------------------- */

.ink-float {
    position: fixed;
    right: 1rem;
    /* Clears the floating button group below it. The panel's native resize
       grip is its bottom right corner, which is exactly where those buttons
       sit, so parking the panel flush to the corner would hand the grip to
       them. A drag can still take the panel anywhere. */
    bottom: 5.4rem;
    z-index: 950;
    width: min(44vw, 620px);
    height: min(68vh, 700px);
    min-width: 280px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Native resize corner (bottom right): the desk reshapes as freely as
       it moves; the board canvas refits through its ResizeObserver. */
    resize: both;
    background: var(--bg-color);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 18px 50px var(--shadow-color);
}

@media (max-width: 760px) {
    .ink-float {
        width: calc(100vw - 2rem);
        height: 60vh;
    }
}

/* The header doubles as the drag handle. */
.ink-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    background: var(--header-bg);
    border-bottom: 1px solid var(--panel-border);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.ink-float-header.dragging {
    cursor: grabbing;
}

.ink-float-title {
    font-size: 0.9rem;
    font-weight: 700;
}

.ink-float-close {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ink-float-close:hover {
    border-color: var(--error-color);
    color: var(--error-color);
}

.ink-float-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------- */
/* Unified sticky header buttons. Annotate Page and Whiteboard are mounted */
/* by annotate.js into the #utility-controls slot beside the progress bar, */
/* after the Back to Table of Contents control that ships in the markup    */
/* and that main.css reveals only while the header is frozen.              */
/* ---------------------------------------------------------------------- */

/* Same pill chrome as .back-to-toc-btn, compacted to the slim bar. */
.wb-summon-btn {
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--accent-text);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 0.55rem 1rem;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.wb-summon-btn:hover {
    border-color: var(--accent-color);
}

.wb-summon-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

.wb-summon-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.utility-controls .wb-summon-btn {
    font-size: 0.76rem;
    padding: 0.28rem 0.7rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* The annotate mode escape hatch.                                         */
/*                                                                         */
/* While the glass pane is live it covers the whole viewport, the sticky   */
/* header included, so the header's own Annotate Page button sat under the */
/* very surface it had just raised and could not be clicked to lower it.   */
/* Lifting the header over the pane fixes the click, but a solid bar above */
/* the pane would then eat every pen stroke across the top of the page,    */
/* which is worse: the point of the pane is to draw over the whole app.    */
/*                                                                         */
/* So the bar is lifted AND made transparent to the pointer, and only the  */
/* two toggles opt back in. Ink passes straight through the bar onto the   */
/* canvas underneath, while the controls that end annotate mode stay live. */
/* The progress readout, Back, and Browse go inert for the duration, which */
/* is the intended trade: annotate mode is a mode, and navigating away     */
/* mid-drawing is not what it is for.                                      */
/* ---------------------------------------------------------------------- */

body.ink-annotating .progress-banner {
    z-index: 1550;
    pointer-events: none;
}

body.ink-annotating .progress-banner .ink-annotate-toggle,
body.ink-annotating .progress-banner .ink-board-toggle {
    pointer-events: auto;
}