/* ── board ──
 * The Excalidraw embed and its states.
 * Linked from index.html in cascade order — the order is load-bearing. */

.board-block { position: relative; padding: 0; }

/* The mount point Excalidraw renders into. Height is driven from the block's
   content string, so it survives a reload and a sync. */
.board-block .board-frame {
  position: relative;
  width: 100%;
  border: 1px dashed var(--border);   /* at rest; Task 8b's .drawing makes it solid accent */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-code);   /* not var(--bg): themes.css defines no such token */
}

/* Excalidraw paints its own surface; give it the whole frame. */
.board-block .board-mount { position: absolute; inset: 0; }

/* Loading, failed and "needs /sync" all share one centred, quiet treatment —
   a board that cannot load is not an error the user caused. */
.board-block .board-note {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 16px;
  color: var(--fg-faint); font-size: 0.92em; text-align: center;
}
.board-block .board-note button {
  border: 0; background: none; color: var(--accent);
  font: inherit; cursor: pointer; text-decoration: underline;
}

/* Same geometry as the image handle: deliberately larger than it looks. */
.board-block .board-handle {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 7; opacity: 0;   /* above the resting veil (5) */
  transition: opacity .12s var(--ease);
}
.board-block .board-handle::after {
  content: ''; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
}
.board-block:hover .board-handle { opacity: 1; }
@media (hover: none) { .board-block .board-handle { opacity: 1; } }

/* While dragging, stop Excalidraw swallowing the pointer. */
body.board-resizing { cursor: nwse-resize; user-select: none; }
body.board-resizing .board-mount { pointer-events: none; }

/* ── The embed's three states (spec: "The embed") ───────────────────────────── */
.board-block { margin: 10px 0; }

/* Tag and "open ↗" sit on the frame's borders: a notch of page colour behind them. */
.board-block .board-tag,
.board-block .board-open {
  position: absolute; z-index: 6; padding: 0 6px;
  font: inherit; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint); background: var(--bg-page); border: 0;
  transition: color .15s var(--ease);
}
.board-block .board-tag  { left: 10px;  top: -9px; pointer-events: none; }
.board-block .board-open { right: 28px; bottom: -9px; cursor: pointer; }
.board-block:hover .board-open,
.board-block.drawing .board-open,
.board-block.drawing .board-tag { color: var(--accent); }
.board-block.resizing .board-open { opacity: 0; }

/* At rest: a transparent veil takes the click, and the wheel falls through to the note. */
.board-block .board-veil {
  position: absolute; inset: 0; z-index: 5; cursor: pointer;
  display: flex; align-items: flex-end; padding: 10px;
}
.board-block .board-veil span {
  font-size: 10.5px; color: var(--fg-dim); background: var(--bg-raised);
  border: 1px solid var(--border-soft); border-radius: 3px; padding: 2px 8px;
  opacity: 0; transition: opacity .15s var(--ease);
}
.board-block:hover .board-veil span { opacity: 1; }
.board-block.drawing .board-veil,
.board-block.expanded .board-veil { display: none; }
.board-block:hover .board-frame { border-color: var(--fg-faint); }
.board-block.drawing .board-frame { border: 1px solid var(--accent); }

/* zenModeEnabled hides the desktop UI but not the phone layout's bottom bar, which
   Excalidraw uses for any board under ~500px tall. */
.board-block:not(.drawing):not(.expanded) .App-bottom-bar { display: none; }

/* Expanded: the same block, fixed over the document area. */
.board-block .board-crumb { display: none; }
/* The id is for specificity: layout.css caps every `#document-container > *` at the
   note column's width, which an expanded board has to escape. */
#document-container > .board-block.expanded {
  position: fixed; z-index: 50; margin: 0;
  top: var(--bx-top); left: var(--bx-left); width: var(--bx-width); height: var(--bx-height);
  max-width: none; display: flex; flex-direction: column; background: var(--bg-page);
}
.board-block.expanded .board-crumb {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 11px;
  color: var(--fg-faint); background: var(--bg-raised); border-bottom: 1px solid var(--border-soft);
}
.board-block.expanded .board-back {
  font: inherit; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0;
}
.board-block.expanded .board-frame { flex: 1; height: auto !important; border: 0; border-radius: 0; }
.board-block.expanded .board-tag,
.board-block.expanded .board-open,
.board-block.expanded .board-handle,
.board-block.expanded .gutter { display: none; }

/* A board-only note: the board is the document. */
#document-container.board-only { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
#document-container.board-only > .board-block {
  flex: 1; max-width: none; margin: 0; display: flex; flex-direction: column;
}
#document-container.board-only .board-frame { flex: 1; height: auto !important; border: 0; border-radius: 0; }
#document-container.board-only .board-tag,
#document-container.board-only .board-open,
#document-container.board-only .board-veil,
#document-container.board-only .board-handle,
#document-container.board-only .gutter { display: none; }