/* board.html — the Gus field-station board: source pages, wet ink, and
   Excalidraw-style scene marks inside the shared paper-vault shell. */

.board-window { --cols: 260px minmax(0, 1fr) 270px; }  /* vault column = .home-body's 260 */
.board-body { position: relative; background: var(--tan); }
.board-sidebar { grid-column: 1; }
.board-stage { grid-column: 2; }
.board-inspector { grid-column: 3; }
.board-window.sidebar-hidden { --cols: 0 minmax(0, 1fr) 270px; }
.board-window.inspector-closed { --cols: 260px minmax(0, 1fr) 0; }
.board-window.sidebar-hidden.inspector-closed { --cols: 0 minmax(0, 1fr) 0; }
.board-window.sidebar-hidden .board-sidebar,
.board-window.inspector-closed .board-inspector { display: none; }

.file-kind.pdf { color: var(--board-pdf-ink); }

/* The detail runs to the top edge: the shared chrome row (components/ipad-chrome.css)
   hangs from it, as on the iPad with the status bar hidden. */
.board-stage { min-width: 0; min-height: 0; position: relative; overflow: hidden; margin: 0 0 var(--gap); background: var(--tan); }
/* Page geometry only; toolbar internals belong to components/document-toolbar.css. */
.board-window[data-toolbar="vertical"] { --rail-clear: 60px; }
.board-window[data-doc-side="right"] .reading-layout { flex-direction: row-reverse; }
.board-window[data-toolbar="vertical"][data-doc-side="right"] .document-reader { margin-right: var(--rail-clear); }

.board-canvas { height: 100%; min-height: 0; position: relative; overflow: hidden; background-color: var(--board-canvas-fill); background-image: radial-gradient(color-mix(in srgb, var(--muted) 28%, transparent) 1px, transparent 1px); background-size: 18px 18px; }
.canvas-label { position: absolute; top: 68px; left: 24px; color: var(--muted); font: 700 var(--fs-t8)/1 var(--mono); letter-spacing: 1.2px; z-index: 3; }
.canvas-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink-b); margin-right: 6px; }
.board-scene { position: absolute; width: 980px; height: 700px; transform-origin: top left; }
.scene-ink { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; color: var(--body); }
.rough-arrow { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rough-arrow.mustard { stroke: var(--board-mustard); }
.rough-arrow.purple { stroke: var(--board-purple); }

.paper-embed { position: absolute; z-index: 2; width: 270px; height: 400px; background: var(--board-paper-fill); border: 1px solid var(--board-paper-edge); border-radius: 8px; box-shadow: var(--shadow-board-paper); overflow: hidden; }
.paper-left { left: 25px; top: 225px; }
.paper-right { right: 25px; top: 225px; }
.paper-head { height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 11px; background: var(--board-paper-head); color: var(--muted); border-bottom: 1px solid var(--board-paper-head-edge); font-size: var(--fs-t8); }
.file-kind { font: 700 8px/1 var(--mono); border: 1px solid currentColor; border-radius: 3px; padding: 3px 4px; }
.paper-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--body); }
.paper-page { color: var(--faint); white-space: nowrap; font-size: 9px; }
.paper-content { position: relative; height: calc(100% - 35px); padding: 23px 25px; color: var(--board-paper-ink); font-family: Georgia, serif; background: linear-gradient(90deg, var(--board-paper-wash-left), transparent 10%, transparent 90%, var(--board-paper-wash-right)); }
.paper-kicker { font: 700 8px/1.2 var(--sans); color: var(--board-paper-kicker); letter-spacing: 1.4px; margin-bottom: 12px; }
.paper-content h2 { font: 600 21px/1.12 var(--display); color: var(--board-paper-heading); margin: 0 0 9px; }
.paper-byline { font: 10px/1.4 Georgia, serif; color: var(--board-paper-meta); margin: 0; }
.paper-rule { height: 1px; background: var(--board-paper-edge); margin: 15px 0 14px; }
.paper-content p { font: 12px/1.48 Georgia, serif; margin: 0 0 13px; }
.highlight-line span { display: block; background: var(--board-highlight-wash); border-radius: 3px; text-decoration: underline; text-decoration-color: var(--board-highlight-rule); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.paper-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 14px; }
.paper-columns span { display: block; height: 78px; background: repeating-linear-gradient(to bottom, var(--board-paper-lines) 0 1px, transparent 1px 7px); opacity: .54; }

.mind-card { position: absolute; z-index: 5; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--card-brd); border-radius: 9px; box-shadow: var(--shadow-board-chrome); color: var(--body); }
.mind-card-head { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.md-kind { color: var(--board-note-ink); border: 1px solid currentColor; border-radius: 3px; padding: 3px 4px; font: 700 8px/1 var(--mono); letter-spacing: 0; }
.note-filename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px var(--sans); letter-spacing: 0; }
.highlight-card { width: 145px; min-height: 110px; padding: 9px 10px; }
.highlight-left { left: 330px; top: 340px; }
.highlight-right { left: 505px; top: 340px; }
.highlight-card p { margin: 8px 0 7px; font: 13px/1.45 var(--sans); color: var(--ink); }
.mind-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--link); font-size: 8px; }
.question-handwriting { position: absolute; z-index: 5; left: 320px; top: 100px; width: 340px; color: var(--board-hand-ink); }
.question-handwriting h2 { margin: 0; font: 500 32px/1.12 "Caveat", cursive; text-align: center; }
.thought-handwriting { position: absolute; z-index: 5; width: 145px; color: var(--board-hand-ink); font-family: "Caveat", cursive; }
.thought-handwriting h3 { margin: 0 0 7px; font: 600 27px/1.1 "Caveat", cursive; }
.thought-handwriting p { margin: 0; font: 400 21px/1.15 "Caveat", cursive; }
.acquisition-note { left: 330px; top: 535px; transform: rotate(-1.5deg); }
.memory-note { left: 505px; top: 535px; transform: rotate(1deg); }
.ink-note { position: absolute; z-index: 5; width: 140px; color: var(--board-hand-ink); font-family: var(--hand), "Comic Sans MS", cursive; line-height: 1.1; filter: drop-shadow(var(--shadow-board-ink)); }
.note-question { left: 35px; top: 100px; transform: rotate(-4deg); }
.note-bridge { right: 35px; bottom: 15px; transform: rotate(3deg); }
.note-pin { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--board-note-pin); margin: 0 0 7px 18px; box-shadow: var(--shadow-object); }
.ink-note p { font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.zoom-chip { position: absolute; bottom: 13px; right: 17px; z-index: 6; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--card-brd); border-radius: 7px; padding: 5px 8px; color: var(--muted); font: 10px var(--mono); }

.board-inspector { margin: var(--gap) 0 var(--gap) var(--gap); min-width: 0; background: var(--card); border: 1px solid var(--card-brd); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 6px 8px 12px; overflow: auto; }
@media (max-width: 1280px) {
  .board-window { --cols: 206px minmax(0, 1fr) 242px; }
  .board-window.sidebar-hidden { --cols: 0 minmax(0, 1fr) 242px; }
  .board-window.inspector-closed { --cols: 206px minmax(0, 1fr) 0; }
  .board-window.sidebar-hidden.inspector-closed { --cols: 0 minmax(0, 1fr) 0; }
}
@media (max-width: 1080px) {
  .board-window { --cols: 206px minmax(0, 1fr); }
  .board-inspector { display: none; }
  .board-window.sidebar-hidden { --cols: 0 minmax(0, 1fr); }
  .board-window.inspector-closed { --cols: 206px minmax(0, 1fr); }
  .board-window.sidebar-hidden.inspector-closed { --cols: 0 minmax(0, 1fr); }
  .inspector-toggle { display: inline-flex; }
}

/* Three camera studies of the same workspace. The switcher belongs to the
   mockup, above the app window, so the concept is clearly distinguished. */
.board-view-switcher { width: min(1300px, calc(100vw - 20px)); margin: 8px auto 0; background: var(--tan); border: 1px solid var(--tan-edge); border-radius: 9px; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 8px; flex: none; font: 11px var(--sans); }
.view-switcher-label { color: var(--muted); font: 9px var(--mono); letter-spacing: 1.5px; margin-right: 14px; }
.board-view-switcher a { display: flex; gap: 8px; align-items: center; padding: 7px 11px; border-radius: 7px; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.board-view-switcher a[aria-current="page"] { background: var(--card); border-color: var(--card-brd); color: var(--ink); }
.board-view-switcher a:hover { background: var(--hover-green); }
.board-view-switcher small { font: 8px var(--mono); border: 1px solid var(--card-brd); padding: 2px 4px; border-radius: 3px; }
.board-window { height: calc(100vh - 64px); margin-top: 8px; }
/* The paper fills the pane under the floating chrome; the reader header
   clears it by --document-chrome-bottom (measured in board.js). */
.reading-layout { height: 100%; display: flex; padding-top: 0; }
.board-canvas { flex: 1; min-width: 0; touch-action: none; cursor: grab; }
.board-canvas.is-panning { cursor: grabbing; }
.canvas-label { top: 60px; font-size: 9px; }  /* below the chrome row */
.board-scene { width: 1240px; height: 920px; }
.paper-left { left: 44px; top: 175px; }
.paper-right { left: 746px; right: auto; top: 120px; height: 412px; }
.paper-embed[role="button"] { cursor: pointer; }
.paper-embed:focus-visible { outline: 3px solid var(--link); outline-offset: 5px; }
.paper-embed:hover .paper-name { color: var(--link); }
.highlight-left { left: 354px; top: 350px; transform: rotate(-2deg); }
.highlight-right { left: 557px; top: 302px; transform: rotate(2.5deg); }
.question-handwriting { left: 346px; top: 62px; transform: rotate(-3deg); }
.question-handwriting h2 { text-align: left; }
.acquisition-note { left: 344px; top: 534px; transform: rotate(-4deg); }
.memory-note { left: 580px; top: 498px; transform: rotate(2deg); }
.note-question { left: 600px; top: 470px; transform: rotate(3deg); }
.note-bridge { right: auto; left: 790px; bottom: auto; top: 620px; transform: rotate(-3deg); }
.ink-note { font-family: "Caveat", cursive; }
.ink-note p { font-size: 23px; }
.slide-embed { left: 817px; top: 600px; width: 400px; height: 255px; }
.slide-content { height: calc(100% - 35px); padding: 20px 24px; background: color-mix(in srgb, var(--board-highlight-fill) 24%, var(--board-paper-fill)); color: var(--board-paper-ink); }
.slide-content h2 { font: 600 27px/1.08 var(--display); margin: 0 0 15px; color: var(--board-paper-heading); }
.slide-content .paper-kicker { margin-bottom: 8px; font-size: 7px; }
.slide-diagram { display: flex; align-items: center; gap: 15px; font: 600 12px var(--sans); }
.slide-diagram > span { padding: 8px 12px; border: 1px solid var(--board-stamp-edge); border-radius: 20px; }
.slide-diagram small { display: block; font: 9px var(--sans); color: var(--board-paper-meta); margin-top: 3px; }
.slide-content > p { font: 11px Georgia, serif; margin: 12px 0; }
.slide-footer { display: flex; justify-content: space-between; font: 7px var(--mono); color: var(--board-paper-kicker); border-top: 1px solid var(--board-paper-edge); padding-top: 8px; }
.epub-embed { left: 56px; top: 610px; width: 246px; height: 376px; }
.epub-content { padding: 25px 29px; }
.epub-content .paper-kicker { text-align: center; letter-spacing: 2px; }
.epub-content h2 { text-align: center; font: 500 29px/1.15 var(--display); }
.epub-content p { font: 12px/1.7 Georgia, serif; }
.book-ornament { text-align: center; color: var(--board-mustard); font-size: 28px; margin: 10px 0; }
.slide-note { left: 533px; top: 745px; width: 235px; transform: rotate(-5deg); }
.file-kind.word, .ref-icon.word { color: var(--board-note-ink); }
.file-kind.powerpoint, .ref-icon.powerpoint { color: var(--board-pdf-ink); }
.file-kind.epub, .ref-icon.epub { color: var(--board-html-ink); }
.canvas-bottom { position: absolute; bottom: 13px; left: 14px; right: 78px; display: flex; align-items: center; gap: 12px; z-index: 7; pointer-events: none; font: 9px var(--sans); color: var(--muted); }
.canvas-bottom > span { background: var(--board-canvas-fill); padding: 5px; border-radius: 5px; }
.reset-canvas { pointer-events: auto; border: 1px solid var(--card-brd); border-radius: 6px; background: var(--card); color: var(--body); padding: 5px 8px; font: 9px var(--sans); cursor: pointer; }
.board-stage { container-type: inline-size; }
.document-reader[hidden], .ink-workspace[hidden] { display: none; }
.document-reader { flex: 0 0 55%; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--card-brd); overflow: hidden; background: var(--board-page); z-index: 2; }
.reader-divider { flex: 0 0 18px; position: relative; z-index: 3; cursor: col-resize; background: var(--tan); border-left: 1px solid var(--card-brd); border-right: 1px solid var(--card-brd); touch-action: none; }
.reader-divider span { position: absolute; top: 50%; left: 50%; width: 8px; height: 44px; transform: translate(-50%, -50%); border-radius: 8px; background: var(--card); border: 1px solid var(--card-brd); }
.reader-divider:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.board-window[data-view="overview"] .reader-divider,
.board-window[data-view="standalone"] .reader-divider,
.board-window[data-view="ink"] .reader-divider { display: none; }
.reader-header, .ink-header { height: 47px; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid var(--card-brd); background: var(--card); }
.reader-title { font: 11px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-menu { margin-left: auto; color: var(--muted); }
.reader-scroll { overflow: auto; flex: 1; min-height: 0; padding: 18px 16px 40px; }
.reader-sheet { min-height: 850px; margin: 0; background: var(--board-paper-fill); box-shadow: var(--shadow-board-paper); position: relative; }
.reader-sheet .paper-content { height: auto; min-height: 850px; padding: 40px 36px; background: none; }
.reader-sheet .paper-kicker { font-size: 9px; line-height: 1.5; margin-bottom: 22px; }
.reader-sheet .paper-content h2 { font-size: clamp(25px, 2.3vw, 37px); line-height: 1.12; margin-bottom: 16px; }
.reader-sheet .paper-content p { font: 15px/1.75 Georgia, serif; margin-bottom: 20px; }
.reader-sheet .paper-content .paper-byline { font-size: 11px; color: var(--board-paper-meta); }
.reader-sheet .paper-rule { margin: 25px 0; }
.reader-sheet .paper-columns { display: none; }
.reader-sheet h3 { font: 600 20px var(--display); color: var(--board-paper-heading); margin: 30px 0 15px; }
.reader-sheet .page-running-footer { margin-top: 45px; padding-top: 14px; border-top: 1px solid var(--board-paper-edge); font: 10px var(--sans); color: var(--board-paper-meta); display: flex; justify-content: space-between; }
.board-window[data-view="document"] .canvas-bottom > span { display: none; }
.board-window[data-view="document"] .canvas-label { font-size: 8px; left: 14px; }
.board-window[data-view="ink"] .board-canvas { display: none; }
.board-window[data-view="ink"] .document-reader { flex-basis: 50%; }
.board-window[data-view="standalone"] .board-canvas { display: none; }
.board-window[data-view="standalone"] .document-reader { flex: 1 1 auto; border-right: 0; }
.board-window[data-view="standalone"] .reader-close { display: none; }
.ink-workspace { min-width: 0; flex: 1; display: flex; flex-direction: column; border: 1px solid var(--card-brd); border-left: 4px double var(--card-brd); border-radius: 0 10px 10px 0; background: var(--board-paper-fill); }
.ink-header > span:nth-child(2) { font: 11px var(--sans); color: var(--ink); }
.ink-header small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.ink-page-count { margin-left: auto; font: 9px var(--mono); color: var(--muted); }
.ink-scroll { flex: 1; min-height: 0; overflow: auto; background-image: radial-gradient(var(--board-paper-edge) .7px, transparent .7px); background-size: 20px 20px; }
.ink-sheet { position: relative; padding: 32px 30px 60px; min-height: 900px; max-width: 630px; margin: auto; color: var(--board-hand-ink); font-family: "Caveat", cursive; }
.ink-date { font: 8px var(--mono); letter-spacing: 1.2px; color: var(--board-paper-meta); }
.ink-sheet h2 { font: 600 34px/1.1 "Caveat", cursive; transform: rotate(-2deg); margin: 25px 0 17px; }
.ink-intro { font-size: 25px; line-height: 1.25; transform: rotate(-1.5deg); margin: 0 0 27px 10px; }
.ink-source { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--board-paper-edge); padding-top: 15px; font: 9px var(--sans); color: var(--board-paper-meta); }
.ink-source > span:last-child { margin-left: auto; }
.ink-sheet blockquote { margin: 14px 4px 28px; padding: 5px 11px; border-left: 3px solid var(--board-mustard); font: 13px/1.65 Georgia, serif; background: color-mix(in srgb, var(--board-highlight-wash) 35%, transparent); color: var(--board-paper-ink); }
.ink-observation { font-size: 24px; margin: 20px 0; transform: rotate(-2deg); }
.ink-comparison { display: flex; justify-content: space-between; align-items: center; gap: 8px; transform: rotate(1deg); }
.ink-comparison h3 { font: 600 25px "Caveat", cursive; margin: 0 0 7px; text-decoration: underline; text-decoration-color: var(--board-mustard); text-underline-offset: 6px; }
.ink-comparison p { font-size: 21px; line-height: 1.2; margin: 0; }
.ink-comparison > span { font-size: 35px; }
.ink-swoop { width: 100%; height: 50px; fill: none; stroke: var(--board-purple); stroke-width: 1.8; stroke-linecap: round; }
.ink-conclusion { font-size: 24px; line-height: 1.25; margin: 2px 0 25px 8px; transform: rotate(-2deg); }
.ink-conclusion span { background: linear-gradient(transparent 65%, var(--board-highlight-wash) 65% 90%, transparent 90%); }
.ink-checklist { padding-left: 7px; transform: rotate(1deg); }
.ink-checklist p { font-size: 23px; margin: 9px 0; }
.ink-afterthought { font-size: 23px; margin: 33px 0 20px 26px; transform: rotate(-4deg); }
.ink-page-number { display: block; text-align: center; color: var(--board-paper-meta); font-size: 18px; margin-top: 40px; }
.reader-sheet .slide-content { min-height: 340px; height: auto; padding: 35px 26px; }
.reader-sheet:has(.slide-content) { min-height: 340px; }
.reader-sheet .slide-content h2 { font-size: 34px; margin-bottom: 30px; }
.reader-sheet .slide-content > p { margin: 25px 0; line-height: 1.6; }
@container (max-width: 780px) {
  .reading-layout { padding-top: 0; }
  .reader-sheet .paper-content { padding: 30px 22px; }
  .ink-sheet { padding: 28px 21px 50px; }
}
@media (max-width: 1080px) {
  .board-window:not(.inspector-closed) .board-inspector { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 242px; z-index: 20; box-shadow: var(--shadow-board-chrome); }
  .board-window, .board-window.inspector-closed { --cols: 0 minmax(0, 1fr); }
  .board-window:not(.sidebar-hidden) .board-sidebar { display: flex; position: absolute; left: 0; top: 0; bottom: 0; width: 226px; z-index: 20; box-shadow: var(--shadow-board-chrome); }
}
@media (max-width: 700px) {
  .view-switcher-label { display: none; }
  .board-view-switcher { gap: 2px; }
  .board-view-switcher a { font-size: 9px; padding: 6px; gap: 4px; }
  .board-view-switcher small { font-size: 6px; }
  .board-window { --cols: 0 minmax(0, 1fr); }
  .board-sidebar { display: none; }
  .reading-layout { overflow-x: auto; }
  .board-window:not([data-view="overview"]) .reading-layout > section { min-width: 330px; }
  .board-window[data-view="document"] .board-canvas { min-width: 300px; }
  .canvas-bottom > span { display: none; }
}

.reader-binding { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: hidden; }
.reader-binding path { fill: none; stroke: var(--board-mustard); stroke-width: 1.7; stroke-linecap: round; }
.reader-binding circle { fill: var(--board-mustard); }
.docked-binding { visibility: hidden; }

/* Actual source pages: fixed page geometry, scaled as a whole like BoardHost. */
.paper-embed { height: auto; border-radius: 6px; }
.paper-right { height: auto; }
.paper-head { height: 35px; color: var(--board-secondary); }
.paper-name, .paper-page { color: var(--board-secondary); }
.paper-page { max-width: 65px; overflow: hidden; text-overflow: ellipsis; }
.paper-head .file-kind { color: var(--board-secondary); }
.document-page { width: 100%; position: relative; overflow: hidden; background: var(--board-page); isolation: isolate; }
.source-raster { width: 100%; height: 100%; display: block; filter: var(--board-page-filter); mix-blend-mode: var(--board-page-blend); }
.source-highlight { position: absolute; background: var(--mark-color, var(--board-highlight-wash)); mix-blend-mode: var(--board-highlight-blend); border-radius: 2px; }
.source-typeset { position: absolute; top: 0; left: 0; width: 612px; height: 792px; transform-origin: top left; padding: 54px; color: var(--board-foreground); font: 19px/1.45 Georgia, serif; }
.source-typeset h1 { font: 700 28px/1.22 Georgia, serif; margin: 0 0 24px; color: inherit; }
.source-typeset p { margin: 0 0 19px; }
.source-typeset .text-highlight { position: static; display: block; mix-blend-mode: normal; }
.source-feeding .source-typeset p:nth-last-child(-n+4) { margin-top: 28px; }
.reader-sheet, .reader-sheet:has(.slide-content) { min-height: 0; background: var(--board-page); }
/* Pages run edge to edge; a hairline marks each page break. */
.reader-scroll { background: var(--board-page); padding: 0; }
.reader-sheet { box-shadow: none; }
.reader-scroll .document-page + .document-page { border-top: 1px solid var(--card-brd); }
/* Height is the scarce axis on iPad: one slim row. */
.document-reader .reader-header { height: calc(var(--document-chrome-bottom, 66px) + 28px); gap: 6px; padding: var(--document-chrome-bottom, 66px) 8px 0 4px; box-sizing: border-box; background: var(--board-page); }
.markdown-surface { flex: 1; min-height: 0; overflow: auto; padding: 0 26px 50px; background: var(--board-page); color: var(--board-foreground); }
.markdown-surface[hidden] { display: none; }
.markdown-title { font: 600 24px/1.3 var(--display); margin: 15px 0 18px; }
.markdown-editor { min-height: 70%; outline: none; font: 17px/1.65 var(--sans); }
.markdown-editor p { margin: 0 0 18px; }
.markdown-editor h2 { font: 600 20px/1.3 var(--display); margin: 0 0 18px; }
.markdown-editor blockquote { margin: 0 0 18px; padding-left: 12px; border-left: 2px solid var(--card-brd); color: var(--muted); }
.board-window[data-document-kind="markdown"] .reader-scroll { display: none; }
.board-window[data-document-kind="markdown"] .reader-original { display: none; }
.reader-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; color: var(--muted); }
.reader-close:hover { background: var(--hover-green); color: var(--hover-green-ink); }
.reader-close svg { width: 14px; height: 14px; fill: currentColor; }
.reader-original { margin-left: auto; flex: none; font: 9px var(--sans); color: var(--link); text-decoration: none; }
.reader-title { flex: 1; }
.reader-binding { color: var(--board-reference-ink); }
.reader-binding path, .rough-arrow.reference-arrow { stroke: var(--board-reference-ink); }
.reader-binding circle { fill: var(--board-reference-ink); }
.board-canvas { background-image: radial-gradient(var(--board-dot) .8px, transparent .8px); }
.canvas-label, .canvas-bottom, .zoom-chip { color: var(--board-secondary); }
.canvas-dot { background: var(--board-reference-ink); }
.zoom-chip, .reset-canvas { background: var(--board-page); border-color: var(--board-rule); color: var(--board-secondary); }
.mind-card { background: var(--board-note-fill); border-color: var(--board-rule); color: var(--board-foreground); }
.highlight-card p { color: var(--board-foreground); }
.mind-card-head, .mind-link { color: var(--board-secondary); }
.md-kind { color: var(--board-reference-ink); }
.ink-workspace { background: var(--board-page); }
.ink-scroll { background-image: radial-gradient(var(--board-dot) .7px, transparent .7px); }
.ink-sheet .ink-blue, .ink-blue { color: var(--board-pen-blue); }
.ink-sheet .ink-red, .ink-red { color: var(--board-pen-red); }
.ink-sheet .ink-green, .ink-green { color: var(--board-pen-green); }
.ink-swoop { stroke: var(--board-hand-ink); }
.ink-sheet blockquote { background: var(--board-highlight-wash); }
@media (max-width: 850px) {
  .view-switcher-label { display: none; }
  .board-view-switcher a { font-size: 9px; padding: 6px; gap: 4px; }
}
@media (max-width: 600px) {
  .board-view-switcher { height: auto; min-height: 36px; flex-wrap: wrap; padding: 4px; }
}

/* The References list the embed's `focus: "references"` points at. */
.board-inspector .context-section.is-focused { background: color-mix(in srgb, var(--pink-a) 16%, transparent); border-radius: 8px; }

/* Embedded (?pdt=embed, devtools/embed.js): the live screen of an iPad demo.
   The device frame is the edge. The study switcher and desktop chrome are not
   part of the app, and the reader offers no way out to the vault's files. */
:root[data-pdt-embed] .board-view-switcher,
:root[data-pdt-embed] .board-window .traffic,
:root[data-pdt-embed] .reader-original { display: none; }
:root[data-pdt-embed] .board-window { width: 100vw; height: 100vh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }

/* Study labels stay accessible without stretching the app viewport. */
.board-view-switcher { overflow-x: auto; white-space: nowrap; }
.board-view-switcher > * { flex-shrink: 0; }

/* InkToolbarView gates scene-only tools and Pen hold by the focused surface. */