/* board.html?view=ink — Document + notebook (concept).
   The document board's two scrolls with a paged ink notebook in place of
   the canvas. Notebook content is laid out in the app's 612 × 792 pt paged
   geometry and the sheet is scaled as a whole to the pane (board-notebook.js
   sets --nb-scale), so the pages never reflow. */

/* The notebook's header clears the floating chrome as the reader's does. */
/* Flush against the document: the reader's own edge is the only line
   between them, and the notebook has no frame of its own. */
.board-window[data-view="ink"] .ink-workspace { border: 0; border-radius: 0; }
.board-window[data-view="ink"] .ink-header { height: calc(var(--document-chrome-bottom, 66px) + 28px); padding: var(--document-chrome-bottom, 66px) 14px 0; box-sizing: border-box; border-bottom: 1px solid var(--card-brd); }

/* Pages run edge to edge with a hairline between them, as the reader's
   do, on the board canvas's own paper: its fill and its dot lattice. */
.nb-scroll { padding: 0; display: flex; flex-direction: column; background: var(--board-canvas-fill); background-image: none; }
.nb-page { position: relative; flex: none; width: 100%; aspect-ratio: 612 / 792; overflow: hidden;
  background-color: var(--board-canvas-fill); background-image: radial-gradient(var(--board-dot) .8px, transparent .8px); background-size: calc(18px * var(--nb-scale, 1)) calc(18px * var(--nb-scale, 1)); }
.nb-page + .nb-page { border-top: 1px solid var(--card-brd); }
.nb-sheet { position: absolute; top: 0; left: 0; width: 612px; height: 792px; transform: scale(var(--nb-scale, 1)); transform-origin: top left; color: var(--board-hand-ink); }

.nb-date { position: absolute; top: 30px; left: 40px; font: 10px var(--mono); letter-spacing: 1.4px; color: var(--board-paper-meta); }
.nb-hand { position: absolute; margin: 0; font-family: "Caveat", cursive; color: var(--board-hand-ink); }
.nb-hand.ink-red { color: var(--board-pen-red); }
.nb-hand.ink-blue { color: var(--board-pen-blue); }
.nb-hand.ink-green { color: var(--board-pen-green); }
.nb-title { position: absolute; top: 58px; left: 36px; margin: 0; font: 600 40px/1.1 "Caveat", cursive; transform: rotate(-2deg); color: var(--board-hand-ink); }
.nb-intro { top: 118px; left: 50px; font-size: 27px; line-height: 1.2; transform: rotate(-1.5deg); }
.nb-card { position: absolute; top: 212px; left: 60px; width: 250px; transform: rotate(-1.5deg); cursor: pointer; }
.nb-untangle { top: 360px; left: 44px; font-size: 27px; transform: rotate(-2deg); }
.nb-comparison { top: 408px; left: 56px; width: 500px; display: flex; justify-content: space-between; align-items: center; transform: rotate(1deg); }
.nb-comparison h3 { margin: 0 0 6px; font: 600 28px "Caveat", cursive; text-decoration: underline; text-decoration-color: var(--board-mustard); text-underline-offset: 6px; }
.nb-comparison p { margin: 0; font-size: 23px; line-height: 1.15; }
.nb-comparison > span { font-size: 40px; }
.nb-warning { top: 540px; left: 70px; font-size: 27px; transform: rotate(-2deg); }
.nb-page-number { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font: 20px "Caveat", cursive; color: var(--board-paper-meta); }

.nb-tmaze { top: 70px; left: 50px; cursor: pointer; transform: rotate(-2deg); }
.nb-tmaze p { margin: 0; font-size: 32px; line-height: 1.1; }
.nb-stroke { display: block; width: 220px; height: 20px; fill: none; stroke: var(--board-pen-red); stroke-width: 2.2; stroke-linecap: round; }
.nb-tries { top: 190px; left: 90px; font-size: 26px; line-height: 1.2; transform: rotate(1.5deg); }
.nb-checklist { top: 300px; left: 60px; transform: rotate(1deg); }
.nb-checklist p { margin: 10px 0; font-size: 26px; }
.nb-afterthought { top: 470px; left: 110px; font-size: 26px; transform: rotate(-4deg); }

/* The pen mark Gus made on the source, which the crossing leaves from. */
.nb-source-mark { position: absolute; cursor: pointer; }
.nb-source-mark svg { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 5px; overflow: visible; fill: none; stroke: var(--board-pen-red); stroke-width: 2; stroke-linecap: round; }
.board-window[data-view="ink"] .reader-sheet .source-highlight { cursor: pointer; }

/* Crossing ink, drawn across both panes. An end whose anchor has scrolled
   out of its pane clamps to that pane's edge and is drawn open. */
.nb-crossings { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; display: none; }
.board-window[data-view="ink"] .nb-crossings { display: block; }
.nb-crossings path.nb-crossing { fill: none; stroke: var(--board-reference-ink); stroke-width: 1.8; stroke-linecap: round; }
.nb-crossings path.nb-crossing.is-clamped { stroke-dasharray: 4 5; }
.nb-crossings marker path { fill: none; stroke: var(--board-reference-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nb-crossings circle { fill: var(--board-reference-ink); }
.nb-crossings circle.is-clamped { fill: var(--board-paper-fill); stroke: var(--board-reference-ink); stroke-width: 1.8; }

/* Every ink mark knows the document page it was made on; tapping one
   brings that page back. */
.nb-sheet [data-doc-page] { cursor: pointer; }

/* The divider, drawn as a hairline so the panes stay flush; its hit area
   reaches 6 px either side and the grip sits on the line. */
.board-window[data-view="ink"] .reader-divider { display: block; flex: 0 0 1px; margin: 0 -6px; padding: 0 6px; border: 0; background: var(--card-brd); background-clip: content-box; z-index: 9; }
.board-window[data-view="ink"] .document-reader { border-right: 0; }

/* Brought into focus: a brief ring on the far end. */
.nb-flash { animation: nb-flash 1.3s ease-out; }
.nb-page-flash { animation: nb-page-flash 1.3s ease-out; }
@keyframes nb-page-flash { 0%, 35% { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--board-reference-ink) 55%, transparent); } 100% { box-shadow: inset 0 0 0 3px transparent; } }
@keyframes nb-flash { 0%, 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--board-reference-ink) 55%, transparent); } 100% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .nb-flash { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--board-reference-ink) 55%, transparent); }
  .nb-page-flash { animation: none; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--board-reference-ink) 55%, transparent); }
}