/* vc/css/annotate.css
   ===========================================================================
   THE INK LAYER'S CHROME
   ---------------------------------------------------------------------------
   Loaded AFTER main.css, because it deliberately outranks the stacking order
   main.css establishes. Consumes --vc-* tokens only: there is not one colour
   literal in this file except inside the eraser cursor's data URI, which is a
   generated image rather than a style, and is drawn in neutral greys so it
   reads on the light board and the dark one alike.

   THE STACKING CONTRACT. main.css puts dropdown panels at 30 and the sticky
   progress bar at 25. This layer sits above both, so a student can draw over
   any surface the course puts on screen:

     floating whiteboard          950
     glass pane canvas           1500
     progress bar, annotating    1550   only while annotate mode is on
     floating button cluster     1600
     pen toolbar                 1650

   The progress bar idles at 25 and is lifted over the 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 press that switches it back off.
   =========================================================================== */


/* ======================== 1. THE GLASS PANE ============================== */
/* Idle it only displays ink and lets every press and scroll through. Annotate
   mode captures the pointer for the pen. */

.ink-overlay-canvas {
    position: fixed;
    inset: 0;
    /* A canvas is a replaced element: with no explicit CSS size it renders at
       its intrinsic bitmap size, which is the viewport times the device pixel
       ratio. That overflows the viewport on a scaled display and shifts every
       mark southeast of the tip. 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;
    /* The browser must not claim the gesture as a pan or a zoom. Every scroll
       the student needs while drawing is served by the edge auto scroll in
       annotate.js instead, which keeps the pen on the page. */
    touch-action: none;
    cursor: crosshair;
}


/* ==================== 2. THE FLOATING BUTTON CLUSTER ===================== */
/* Present on every view: the whiteboard summon and the pen toggle, side by
   side in the bottom corner. The group owns the fixed position and the
   stacking, so the buttons are ordinary flex children and a third could be
   added without touching either.

   It outranks the glass pane 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;
}

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

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

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

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


/* ========================== 3. THE PEN TOOLBAR =========================== */
/* One component, two placements. The overlay variant floats free while
   annotate mode is on; the board variant sits inline in the board's own 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);
    justify-content: center;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--vc-border);
    border-radius: 999px;
    background-color: var(--vc-panel);
    box-shadow: 0 10px 30px var(--vc-shadow);
}

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

/* Both this toolbar and the frozen progress bar want the top of the viewport,
   and the toolbar paints above it, so left alone it would lie across the
   readout. Once the bar pins, the toolbar drops clear of it. */
body.vc-header-stuck .ink-toolbar-overlay { top: 3.6rem; }

.ink-swatch {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 2px solid var(--vc-border);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--vc-fast);
}

/* The default 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-color: var(--vc-pen-ink); }

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

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

.ink-size {
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--vc-fast);
}

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

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

.ink-tool-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--vc-text);
    background-color: transparent;
    border: 1px solid var(--vc-border);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--vc-fast);
}

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

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

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

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


/* ========================== 4. THE WHITEBOARD ============================ */
/* An opaque drawing panel. A white board in light mode and a blackboard in
   dark, through the --vc-board 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(--vc-border);
}

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

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

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


/* ====================== 5. THE FLOATING WHITEBOARD ======================= */

.ink-float {
    position: fixed;
    right: 1rem;
    /* Clears the button cluster 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. The desk reshapes as freely as it moves, and the
       board canvas refits through its ResizeObserver. */
    resize: both;
    background-color: var(--vc-bg);
    border: 1px solid var(--vc-border);
    border-radius: 12px;
    box-shadow: 0 18px 50px var(--vc-shadow);
}

/* 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-color: var(--vc-header);
    border-bottom: 1px solid var(--vc-border);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

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

.ink-float-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--vc-heading);
}

.ink-float-close {
    min-height: 36px;
    padding: 0 0.8rem;
    background-color: transparent;
    color: var(--vc-text-soft);
    border: 1px solid var(--vc-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: var(--vc-fast);
}

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

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


/* ================= 6. THE TWO BUTTONS IN THE PROGRESS BAR ================ */
/* Annotate Page and Whiteboard, mounted by annotate.js into the slot beside the
   progress readout, after the navigation links that ship in index.html. The
   compact sizing they take in that row lives with the rest of the bar, in
   main.css, so one row is described in one place. */

.wb-summon-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--vc-hit);
    padding: 0 0.95rem;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--vc-accent);
    background-color: var(--vc-bg);
    border: 1px solid var(--vc-border);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--vc-fast);
}

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

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

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


/* ==================== 7. THE ANNOTATE MODE ESCAPE HATCH ==================
   While the glass pane is live it covers the whole viewport, the progress bar
   included, so the bar's own Annotate Page button sits under the very surface
   it just raised and cannot be pressed to lower it.

   Lifting the bar over the pane fixes the press, but a solid bar above the pane
   would then eat every stroke across the top of the page, which is worse: the
   point of the pane is to draw over the whole course.

   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 readout
   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;
}


/* ======================== 8. NARROW VIEWPORTS ============================
   The tools have to work on a phone, because a student reading on one is
   exactly who wants to mark a paragraph as they go. Three changes, in order of
   how much they matter.

   THE TOOLBAR MOVES TO THE BOTTOM. At the top of a phone screen it is a stretch
   for a thumb and it sits over the text being annotated. At the bottom it is
   under the hand already holding the device, and the sticky progress bar stops
   competing with it for the same strip of glass, which also makes the frozen
   bar offset above unnecessary here. */

@media (max-width: 720px) {
    .ink-toolbar-overlay {
        top: auto;
        bottom: 0.75rem;
        left: 0.5rem;
        right: 0.5rem;
        transform: none;
        max-width: none;
        border-radius: 14px;
        /* Wrapping is the point: thirteen controls do not fit one phone row,
           and a horizontally scrolling toolbar hides half of them behind a
           gesture nobody knows is available. */
        row-gap: 0.5rem;
    }

    body.vc-header-stuck .ink-toolbar-overlay { top: auto; }

    /* The cluster clears the toolbar rather than sitting on top of it. */
    .ink-fab-group {
        right: 0.75rem;
        bottom: 0.75rem;
    }
    body.ink-annotating .ink-fab-group { bottom: auto; top: 0.75rem; }

    /* Full width targets. A pen tablet is a desk device, so on a phone every
       one of these is being hit with a fingertip and the compact desktop
       sizing is the wrong size. */
    .ink-swatch { width: 1.9rem; height: 1.9rem; }
    .ink-size { width: 2.2rem; height: 2.2rem; }
    .ink-tool-btn { min-height: 38px; padding: 0 0.7rem; }

    /* The desk becomes a sheet. A movable, resizable panel is a mouse and
       stylus affordance; on a phone there is nowhere to move it to. */
    .ink-float {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        top: auto;
        width: auto;
        height: 62vh;
        resize: none;
    }
}

/* Ink is drawn, not animated, so there is nothing here to honour a reduced
   motion preference with except the transitions on the chrome. */
@media (prefers-reduced-motion: reduce) {
    .ink-fab,
    .ink-swatch,
    .ink-size,
    .ink-tool-btn,
    .wb-summon-btn,
    .ink-float-close {
        transition: none;
    }
}