@scrawl-board/board 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/styles.css

@@ -6,7 +6,11 @@
   --scrawl-color-text: #1c1c1a;
   --scrawl-color-text-muted: #62625c;
   --scrawl-color-edge: #d4d4cc;
-  --scrawl-color-focus: #1856a3;
+  /* Light outline for floating chrome — the edge colour, softened toward the
+     surface so panels read as separate without heavy lines. */
+  --scrawl-color-chrome-border: color-mix(in srgb, var(--scrawl-color-edge) 60%, var(--scrawl-color-surface));
+  --scrawl-color-focus: #2563eb;
+  --scrawl-color-primary: #1856a3;
   --scrawl-color-selection: #d9e8f7;
   --scrawl-color-danger: #a3302b;
   --scrawl-color-warning: #805400;
@@ -18,9 +22,9 @@
   --scrawl-font-weight-strong: 650;
   --scrawl-radius-control: 6px;
   --scrawl-radius-panel: 10px;
-  --scrawl-elevation-low: 0 2px 3px rgba(28, 28, 26, 0.12);
-  --scrawl-elevation-high: 0 8px 20px rgba(28, 28, 26, 0.18);
-  --scrawl-motion-duration: 140ms;
+  --scrawl-elevation-low: none;
+  --scrawl-elevation-high: none;
+  --scrawl-motion-duration: 0ms;
   --scrawl-motion-easing: cubic-bezier(0.2, 0, 0, 1);
   --scrawl-density: comfortable;
   box-sizing: border-box;
@@ -56,8 +60,9 @@
 [data-scrawl-portal] button, [data-scrawl-portal] [role="button"] { min-block-size: 44px; min-inline-size: 44px; }
 
 [data-scrawl-root] :focus-visible, [data-scrawl-portal] :focus-visible {
-  outline: 3px solid var(--scrawl-color-focus);
-  outline-offset: 2px;
+  outline: none;
+  background-color: var(--scrawl-color-selection);
+  outline-offset: 0;
 }
 
 [data-scrawl-root] [data-scrawl-canvas], [data-scrawl-root] .scrawl-board__content {
@@ -102,10 +107,12 @@
 [data-scrawl-root] .scrawl-board__actions,
 [data-scrawl-root] .scrawl-board__tools,
 [data-scrawl-root] .scrawl-board__view,
+[data-scrawl-root] .scrawl-board__ink-bar,
+[data-scrawl-root] .scrawl-board__more-tools,
 [data-scrawl-root] .scrawl-board__style-shelf {
   align-items: center;
-  background: var(--scrawl-color-surface-raised);
-  border: 1px solid color-mix(in srgb, var(--scrawl-color-surface-raised), var(--scrawl-color-text) 12%);
+  background: var(--scrawl-color-surface);
+  border: 0;
   border-radius: var(--scrawl-radius-panel);
   display: flex;
   gap: 2px;
@@ -115,20 +122,112 @@
 }
 
 [data-scrawl-root] .scrawl-board__actions { inset-block-start: 12px; inset-inline-end: 12px; }
-[data-scrawl-root] .scrawl-board__tools { inset-block-end: 12px; inset-inline-start: 50%; max-inline-size: calc(100% - 24px); transform: translateX(-50%); }
+[data-scrawl-root] .scrawl-board__tools {
+  inset-block-start: 50%;
+  inset-inline-start: 12px;
+  inline-size: 54px;
+  max-block-size: calc(100% - 144px);
+  overflow-y: auto;
+  flex-direction: column;
+  transform: translateY(-50%);
+  box-shadow: var(--scrawl-elevation-low);
+}
+[data-scrawl-root] .scrawl-board__tools > button { flex: 0 0 44px; inline-size: 44px; }
+[data-scrawl-root] .scrawl-board__tools button,
+[data-scrawl-root] .scrawl-board__more-tools button { display: flex; align-items: center; justify-content: center; }
+[data-scrawl-root] .scrawl-board__tools svg,
+[data-scrawl-root] .scrawl-board__more-tools svg { display: block; inline-size: 22px; block-size: 22px; }
+[data-scrawl-root] .scrawl-board__tools .scrawl-board__ink-sample { margin: 0; }
+[data-scrawl-root] .scrawl-board__tools :focus-visible,
+[data-scrawl-root] .scrawl-board__more-tools :focus-visible,
+[data-scrawl-root] .scrawl-board__style-shelf :focus-visible { outline-offset: -3px; }
 [data-scrawl-root] .scrawl-board__view { inset-block-end: 12px; inset-inline-end: 12px; }
-[data-scrawl-root] .scrawl-board__style-shelf {
-  gap: 12px;
-  inset-block-end: 68px;
+[data-scrawl-root] .scrawl-board__ink-bar {
+  inset-block-end: 12px;
   inset-inline-start: 50%;
-  max-inline-size: calc(100% - 24px);
-  overflow-x: auto;
   transform: translateX(-50%);
+  box-shadow: var(--scrawl-elevation-low);
+}
+[data-scrawl-root] .scrawl-board__more-tools,
+[data-scrawl-root] .scrawl-board__style-shelf {
+  inset-inline-start: 78px;
+  inset-block-start: 72px;
+  inline-size: 106px;
+  max-block-size: calc(100% - 84px);
+  overflow-y: auto;
+  box-shadow: var(--scrawl-elevation-low);
+}
+[data-scrawl-root] .scrawl-board__more-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px;
+  inline-size: 100%;
+  white-space: normal;
 }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group > span { grid-column: 1 / -1; text-align: center; }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group button { padding: 4px; font-size: 12px; }
 [data-scrawl-root] .scrawl-board__style-group { align-items: center; display: flex; gap: 6px; white-space: nowrap; }
 [data-scrawl-root] .scrawl-board__style-group > span:first-child { color: var(--scrawl-color-text-muted); font-size: 0.75rem; font-weight: var(--scrawl-font-weight-strong); text-transform: uppercase; }
 [data-scrawl-root] .scrawl-board__style-group button { align-items: center; display: flex; justify-content: center; padding: 6px 10px; }
-[data-scrawl-root] .scrawl-board__style-group button span[aria-hidden] { block-size: 18px; border-radius: 50%; inline-size: 18px; }
+[data-scrawl-root] .scrawl-board__style-group button span[aria-hidden] { block-size: 22px; border-radius: 2px; inline-size: 26px; }
+/* Eraser sizes preview the (round) brush itself, not a colour. */
+[data-scrawl-root] .scrawl-board__style-group[aria-label="Eraser size"] button span[aria-hidden] { border-radius: 50%; }
+
+/*
+ * Fixed, not absolute: `screenPosition` (BoardSnapshot.focusedItem) is
+ * computed from the canvas's own getBoundingClientRect, i.e. viewport
+ * coordinates — matching `position: fixed` is what keeps this toolbar
+ * glued to the focused object regardless of where [data-scrawl-root] sits
+ * on the page, the same contract every other consumer of `boardToScreen`
+ * already relies on.
+ */
+[data-scrawl-root] .scrawl-board__focus-toolbar {
+  align-items: center;
+  background: var(--scrawl-color-surface-raised);
+  border: 0;
+  border-radius: var(--scrawl-radius-panel);
+  box-shadow: var(--scrawl-elevation-low);
+  display: flex;
+  gap: 4px;
+  max-inline-size: calc(100vw - 24px);
+  overflow: visible;
+  padding: 4px;
+  pointer-events: auto;
+  position: fixed;
+  transform: none;
+  z-index: 15;
+}
+
+/* Notes have no gizmo of their own (it's ink-stroke/shape-only) — this is
+   that capability's default-ui-owned equivalent, visually matching the
+   gizmo's own restyle (spaced sharp-cornered outline, circular handles,
+   GAP_PX outset) — see renderer/selection/gizmo.ts's LineLoop outline. */
+[data-scrawl-root] .scrawl-board__focus-outline {
+  display: none;
+  border: 0;
+  border-radius: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: 12;
+}
+[data-scrawl-root] .scrawl-board__focus-outline[data-locked="true"] { border-color: var(--scrawl-color-warning); }
+
+[data-scrawl-root] .scrawl-board__focus-handle {
+  background: var(--scrawl-color-focus);
+  block-size: 8px;
+  border: 0;
+  border-radius: 50%;
+  box-shadow: var(--scrawl-elevation-low);
+  inline-size: 8px;
+  pointer-events: auto;
+  position: fixed;
+  touch-action: none;
+  transform: translate(-50%, -50%);
+  z-index: 16;
+}
+[data-scrawl-root] .scrawl-board__focus-handle[data-orientation="nwse"] { cursor: nwse-resize; }
+[data-scrawl-root] .scrawl-board__focus-handle[data-orientation="nesw"] { cursor: nesw-resize; }
 
 [data-scrawl-root] [data-scrawl-default-ui] button,
 [data-scrawl-root] [data-scrawl-default-ui] select,
@@ -151,44 +250,22 @@
 
 [data-scrawl-root] [data-scrawl-default-ui] button[aria-pressed="true"],
 [data-scrawl-portal] .scrawl-board__panel button[aria-pressed="true"] {
-  background: var(--scrawl-color-selection);
+  background: color-mix(in srgb, var(--scrawl-color-primary), var(--scrawl-color-surface) 82%);
+  color: var(--scrawl-color-primary);
   font-weight: var(--scrawl-font-weight-strong);
 }
 
 [data-scrawl-root] [data-scrawl-default-ui] button:disabled,
 [data-scrawl-root] [data-scrawl-default-ui] select:disabled { color: var(--scrawl-color-text-muted); cursor: not-allowed; }
 
-[data-scrawl-root] .scrawl-board__tool-select {
-  align-items: center;
-  display: flex;
-  min-block-size: 44px;
-}
-
-[data-scrawl-root] .scrawl-board__tool-select > span { block-size: 1px; clip: rect(0, 0, 0, 0); inline-size: 1px; overflow: hidden; position: absolute; }
-[data-scrawl-root] .scrawl-board__tool-select select {
-  -webkit-appearance: none;
-  appearance: none;
-  /* Chevron drawn from two gradient triangles rather than an embedded asset
-     reference (disallowed by this stylesheet's policy, see styles.test.ts),
-     and currentColor keeps it Theme-aware where a bitmap/SVG asset would
-     need its own colour. */
-  background-image:
-    linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: right 14px center, right 9px center;
-  background-repeat: no-repeat;
-  background-size: 5px 5px, 5px 5px;
-  min-block-size: 44px;
-  padding-inline: 8px 24px;
-}
-
+/* Colour swatches are small rectangles, matching the sticky-note swatches. */
 [data-scrawl-root] .scrawl-board__ink-sample,
 [data-scrawl-portal] .scrawl-board__ink-options span {
-  border: 1px solid color-mix(in srgb, currentColor, transparent 72%);
-  border-radius: 50%;
-  block-size: 18px;
+  border: 0;
+  border-radius: 2px;
+  block-size: 22px;
   display: inline-block;
-  inline-size: 18px;
+  inline-size: 26px;
   margin-inline-end: 6px;
   vertical-align: middle;
 }
@@ -204,7 +281,7 @@
 
 [data-scrawl-portal] .scrawl-board__panel {
   background: var(--scrawl-color-surface-raised);
-  border: 1px solid color-mix(in srgb, var(--scrawl-color-surface-raised), var(--scrawl-color-text) 14%);
+  border: 0;
   border-radius: var(--scrawl-radius-panel);
   box-shadow: var(--scrawl-elevation-high);
   color: var(--scrawl-color-text);
@@ -220,6 +297,15 @@
   z-index: 1;
 }
 
+/* Search and Export open under their buttons in the top-right. */
+[data-scrawl-portal] .scrawl-board__panel[data-anchor="actions"] {
+  inset-block: 72px auto;
+  inset-inline: auto 12px;
+  inline-size: min(24rem, calc(100% - 24px));
+  transform: none;
+  border: 1px solid var(--scrawl-color-chrome-border);
+}
+
 [data-scrawl-portal] .scrawl-board__panel-heading { align-items: center; display: flex; justify-content: space-between; margin-block-end: 10px; }
 [data-scrawl-portal] .scrawl-board__panel-heading h2 { font-size: 1rem; line-height: 1.4; margin: 0; }
 [data-scrawl-portal] .scrawl-board__ink-options,
@@ -228,17 +314,27 @@
 [data-scrawl-portal] .scrawl-board__export-options button { text-align: start; }
 
 [data-scrawl-portal] [data-scrawl-search] label { display: grid; font-weight: var(--scrawl-font-weight-strong); gap: 6px; }
-[data-scrawl-portal] [data-scrawl-search] input { background: var(--scrawl-color-surface); border: 1px solid var(--scrawl-color-edge); min-block-size: 44px; padding: 8px 10px; }
+[data-scrawl-portal] [data-scrawl-search] input { background: var(--scrawl-color-surface); border: 0; min-block-size: 44px; padding: 8px 10px; }
 [data-scrawl-portal] [data-scrawl-search-results] { display: grid; gap: 4px; margin-block-start: 8px; }
 [data-scrawl-portal] [data-scrawl-search-results] button { display: grid; gap: 2px; text-align: start; }
 [data-scrawl-portal] [data-scrawl-search-results] span { color: var(--scrawl-color-text-muted); }
 
+/* Its own 1px border already signals "editable and focused" — the generic
+   :focus-visible ring above is meant for buttons/inputs in the surrounding
+   chrome, not this, and would otherwise double up into a border-within-a-
+   ring right on top of it. `outline: none` here (not just on :focus) is a
+   deliberate, always-on reset — including against a Host page's own global
+   `textarea`/`input` focus-ring CSS (e.g. Tailwind/shadcn's), which a plain
+   element selector can bleed onto this real DOM textarea; this class
+   selector already outranks that on specificity alone, but stating it
+   outright means the DOM inspector shows one clear winner, not a fight. */
 [data-scrawl-portal] .scrawl-board__inline-editor {
   background: var(--scrawl-color-surface);
-  border: 1px solid var(--scrawl-color-focus);
+  border: 0;
   border-radius: var(--scrawl-radius-control);
   box-shadow: var(--scrawl-elevation-high);
   min-block-size: 32px;
+  outline: none;
   padding: 6px 8px;
   pointer-events: auto;
   position: absolute;
@@ -248,12 +344,42 @@
   z-index: 25;
 }
 
+/* Text blocks live directly on the canvas with no chrome of their own — the
+   editor should read as "the same text, now with a caret," not as a form
+   field dropped on top of it: no opaque surface or shadow, just a 1px frame
+   (the canvas selection gizmo is hidden while this is open, so this is the
+   only frame). Its width/height follow the text (inline-editing.tsx measures it),
+   and the canvas hides the block's own copy underneath while it's open. */
+[data-scrawl-portal] .scrawl-board__inline-editor--text {
+  background: transparent;
+  border: 1px solid var(--scrawl-color-focus);
+  border-radius: 0;
+  box-shadow: none;
+  max-inline-size: min(60vw, 640px);
+  overflow: hidden;
+  min-block-size: 0;
+  padding: 2px 4px;
+}
+
 [data-scrawl-portal] .scrawl-board__inline-editor--table-cell {
   pointer-events: auto;
   position: absolute;
   z-index: 25;
 }
-[data-scrawl-portal] .scrawl-board__inline-editor--table-cell .scrawl-board__inline-editor { inset: 0; block-size: 100%; inline-size: 100%; position: absolute; }
+/* Transparent, chromeless — the table's own canvas-drawn cell highlight
+   (tables.ts's cellHighlight, the same FOCUS_COLOR as everything else) is
+   already the one border marking the active cell; an opaque bg + its own
+   border here would just double it up right on top. */
+[data-scrawl-portal] .scrawl-board__inline-editor--table-cell .scrawl-board__inline-editor {
+  background: transparent;
+  block-size: 100%;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  inline-size: 100%;
+  inset: 0;
+  position: absolute;
+}
 
 [data-scrawl-portal] .scrawl-board__inline-editor-actions {
   align-items: center;
@@ -262,23 +388,39 @@
   box-shadow: var(--scrawl-elevation-low);
   display: flex;
   font-size: 0.75rem;
-  gap: 6px;
+  gap: 2px;
   inset-block-end: calc(100% + 4px);
   inset-inline-start: 0;
-  padding: 2px 6px;
+  padding: 3px;
   position: absolute;
   white-space: nowrap;
 }
-[data-scrawl-portal] .scrawl-board__inline-editor-actions button { min-block-size: auto; min-inline-size: auto; padding: 2px 6px; }
+[data-scrawl-portal] .scrawl-board__inline-editor-actions span { padding: 0 6px; color: var(--scrawl-color-text-muted); }
+[data-scrawl-portal] .scrawl-board__inline-editor-actions button {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-block-size: 26px;
+  min-inline-size: 26px;
+  padding: 4px;
+}
+[data-scrawl-portal] .scrawl-board__inline-editor-actions svg { width: 16px; height: 16px; }
 
-@media (max-width: 60rem) {
-  [data-scrawl-root] .scrawl-board__actions,
-  [data-scrawl-root] .scrawl-board__tools { inline-size: calc(100% - 24px); overflow-x: auto; }
-  [data-scrawl-root] .scrawl-board__actions { justify-content: flex-end; }
-  [data-scrawl-root] .scrawl-board__tools { flex-wrap: nowrap; inset-inline-start: 12px; transform: none; }
-  [data-scrawl-root] .scrawl-board__tools :focus-visible { outline-offset: -3px; }
-  [data-scrawl-root] .scrawl-board__view { inset-block-end: 84px; }
+/* Opens straight up out of the ink bar it belongs to (bottom centre, only
+   while the Marker is selected) — the bar sits 12px up and is 52px tall. */
+[data-scrawl-portal] .scrawl-board__panel[aria-label="Ink style"] {
+  inset-block-start: auto;
+  inset-block-end: 72px;
+  inset-inline-start: 50%;
+  inline-size: 156px;
+  max-block-size: calc(100% - 84px);
+  transform: translateX(-50%);
 }
+[data-scrawl-portal] .scrawl-board__panel[aria-label="Ink style"] .scrawl-board__panel-heading { flex-direction: column; align-items: stretch; }
+[data-scrawl-portal] .scrawl-board__panel[data-headless] { inline-size: auto; padding: 6px; }
+[data-scrawl-portal] .scrawl-board__ink-options { grid-template-columns: repeat(2, 1fr); }
+[data-scrawl-portal] .scrawl-board__ink-options button { display: flex; justify-content: center; align-items: center; }
+[data-scrawl-portal] .scrawl-board__ink-options span { margin: 0; }
 
 [data-scrawl-root] .scrawl-board__status, [data-scrawl-portal] .scrawl-board__status {
   block-size: 1px;
@@ -294,4 +436,423 @@
 
 @media (prefers-reduced-motion: reduce) {
   [data-scrawl-root], [data-scrawl-portal] { --scrawl-motion-duration: 0ms !important; }
+  [data-scrawl-root] [data-scrawl-default-ui] { --scrawl-sidebar-motion: 0ms !important; }
+}
+
+[data-scrawl-root] .scrawl-board__picker { position: relative; }
+[data-scrawl-root] .scrawl-board__picker-options {
+  position: fixed;
+  display: grid;
+  grid-template-columns: repeat(2, 44px);
+  gap: 4px;
+  padding: 4px;
+  max-block-size: min(420px, 60vh);
+  overflow-y: auto;
+  background: var(--scrawl-color-surface);
+  border: 0;
+  border-radius: var(--scrawl-radius-panel);
+  box-shadow: var(--scrawl-elevation-low);
+  z-index: 1;
+}
+[data-scrawl-root] .scrawl-board__focus-toolbar button { display: flex; align-items: center; justify-content: center; padding: 8px; }
+[data-scrawl-root] .scrawl-board__color-chip { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; }
+[data-scrawl-root] .scrawl-board__color-chip svg { width: 16px; height: 16px; color: var(--scrawl-color-text); background: var(--scrawl-color-surface); border-radius: 50%; }
+[data-scrawl-root] .scrawl-board__color-chip[data-rectangular="true"],
+[data-scrawl-root] .scrawl-board__style-group .scrawl-board__note-swatch span[aria-hidden] { border-radius: 2px; width: 26px; height: 22px; }
+[data-scrawl-root] .scrawl-board__picker-options :focus-visible { outline-offset: -3px; }
+
+[data-scrawl-root] .scrawl-board__welcome {
+  position: absolute;
+  inset: 80px 24px 80px 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--scrawl-color-text-muted);
+  pointer-events: none;
+}
+[data-scrawl-root] .scrawl-board__welcome-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 16px; background: var(--scrawl-color-text); color: var(--scrawl-color-surface); }
+[data-scrawl-root] .scrawl-board__welcome-mark svg { width: 28px; height: 28px; }
+[data-scrawl-root] .scrawl-board__welcome h2 { font-size: clamp(18px, 2vw, 24px); font-weight: 500; line-height: 1.3; margin: 0 0 8px; }
+[data-scrawl-root] .scrawl-board__welcome p { margin: 0; }
+[data-scrawl-root] .scrawl-board__welcome-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; pointer-events: auto; }
+[data-scrawl-root] .scrawl-board__welcome-shortcuts button { display: flex; align-items: center; gap: 8px; background: var(--scrawl-color-surface); border: 0; }
+[data-scrawl-root] .scrawl-board__welcome kbd { font-size: 11px; padding: 2px 5px; border-radius: 4px; background: var(--scrawl-color-surface-muted); }
+@media (max-height: 420px), (max-width: 440px) {
+  [data-scrawl-root] .scrawl-board__welcome-mark, [data-scrawl-root] .scrawl-board__welcome-shortcuts { display: none; }
+  [data-scrawl-root] .scrawl-board__welcome p { font-size: 12px; }
+}
+
+/* Empty-Board callouts pointing at chrome the welcome panel itself doesn't
+   sit near enough to explain — the tool rail and the zoom/fit controls.
+   Purely decorative (aria-hidden), so a Host hiding "tools"/"view" or
+   supplying its own toolbar slot just loses the matching callout, never a
+   dangling arrow pointing at nothing. */
+[data-scrawl-root] .scrawl-board__welcome-hint {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--scrawl-color-text-muted);
+  font-size: 13px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 11;
+}
+[data-scrawl-root] .scrawl-board__welcome-hint svg { flex: none; }
+[data-scrawl-root] .scrawl-board__welcome-hint--tools { inset-block-start: 76px; inset-inline-start: 84px; }
+[data-scrawl-root] .scrawl-board__welcome-hint--view { inset-block-end: 84px; inset-inline-end: 96px; }
+@media (max-height: 480px), (max-width: 640px) {
+  [data-scrawl-root] .scrawl-board__welcome-hint { display: none; }
+}
+
+[data-scrawl-root] .scrawl-board__focus-handle { border-radius: 1px; }
+/* Top-left origin, matching the committed note texture (stickyNotes.ts's
+   renderNoteFace). Padding comes from the inline style, which scales the
+   texture's own 40/512 pad to the note's current on-screen size. */
+[data-scrawl-portal] .scrawl-board__inline-editor--note { text-align: start; align-content: start; }
+[data-scrawl-portal] .scrawl-board__inline-editor:focus-visible { outline: none; background-color: inherit; }
+
+[data-scrawl-root] [data-scrawl-default-ui] button:focus-visible,
+[data-scrawl-portal] button:focus-visible {
+  outline: none;
+  background: var(--scrawl-color-focus);
+  color: var(--scrawl-color-surface);
+}
+
+[data-scrawl-portal] .scrawl-board__inline-editor-actions button {
+  background: transparent;
+  border: 0;
+  border-radius: var(--scrawl-radius-control);
+  color: var(--scrawl-color-text);
+  cursor: pointer;
+  min-block-size: 44px;
+  min-inline-size: 44px;
+}
+[data-scrawl-portal] .scrawl-board__inline-editor-actions button:hover { background: var(--scrawl-color-surface-muted); }
+[data-scrawl-root] .scrawl-board__style-shelf[data-tool="table"] { inline-size: min(180px, calc(100% - 90px)); }
+[data-scrawl-root] .scrawl-board__table-picker { display: grid; gap: 12px; padding: 8px; inline-size: 100%; }
+[data-scrawl-root] .scrawl-board__table-preview { display: grid; gap: 3px; block-size: 72px; }
+[data-scrawl-root] .scrawl-board__table-preview span { background: var(--scrawl-color-selection); border-radius: 2px; }
+[data-scrawl-root] .scrawl-board__table-picker output { text-align: center; font-weight: 600; }
+[data-scrawl-root] .scrawl-board__table-dimensions, [data-scrawl-root] .scrawl-board__table-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
+[data-scrawl-root] .scrawl-board__table-dimensions label { display: grid; gap: 4px; font-size: 12px; color: var(--scrawl-color-text-muted); }
+[data-scrawl-root] .scrawl-board__table-dimensions input { width: 100%; min-height: 44px; padding: 4px 6px; background: var(--scrawl-color-surface-raised); border: 0; border-radius: 4px; color: var(--scrawl-color-text); }
+[data-scrawl-root] .scrawl-board__style-shelf[data-tool="note"],
+[data-scrawl-root] .scrawl-board__style-shelf[data-tool="highlighter"] { inline-size: 138px; }
+[data-scrawl-root] .scrawl-board__style-shelf[data-tool="note"] button,
+[data-scrawl-root] .scrawl-board__style-shelf[data-tool="highlighter"] button { min-height: 60px; padding: 4px; }
+[data-scrawl-root] .scrawl-board__style-shelf[data-tool="note"] button span[aria-hidden],
+[data-scrawl-root] .scrawl-board__style-shelf[data-tool="highlighter"] button span[aria-hidden] { width: 48px; height: 48px; border-radius: 2px; }
+[data-scrawl-root] .scrawl-board__picker-options:has(.scrawl-board__color-chip) { grid-template-columns: repeat(2, 56px); }
+[data-scrawl-root] .scrawl-board__picker-options .scrawl-board__color-chip { width: 44px; height: 44px; border-radius: 2px; }
+[data-scrawl-root] .scrawl-board__color-chip { border-radius: 2px; }
+[data-scrawl-portal] .scrawl-board__tooltip {
+  position: fixed;
+  z-index: 100;
+  max-width: 220px;
+  padding: 7px 10px;
+  border-radius: 5px;
+  background: var(--scrawl-color-text);
+  color: var(--scrawl-color-surface);
+  font-size: 12px;
+  line-height: 1.4;
+  pointer-events: auto;
+}
+
+/* Emoji & icons tool: one tab per set, each sized to fit without scrolling
+   (the largest, 56 icons, is 7 rows of 8). */
+[data-scrawl-root] .scrawl-board__style-shelf[data-tool="stamp"] { inline-size: min(320px, calc(100% - 90px)); align-items: stretch; }
+[data-scrawl-root] .scrawl-board__sticker-picker { display: flex; flex-direction: column; gap: 6px; inline-size: 100%; min-block-size: 0; }
+[data-scrawl-root] .scrawl-board__sticker-search {
+  background: var(--scrawl-color-surface-raised);
+  border: 1px solid var(--scrawl-color-edge);
+  border-radius: var(--scrawl-radius-control);
+  font-size: 13px;
+  inline-size: 100%;
+  padding: 6px 8px;
+}
+[data-scrawl-root] .scrawl-board__sticker-tabs { display: flex; gap: 2px; border-block-end: 1px solid var(--scrawl-color-edge); }
+[data-scrawl-root] .scrawl-board__sticker-tabs [role="tab"] {
+  background: transparent;
+  border: 0;
+  border-block-end: 2px solid transparent;
+  border-radius: 0;
+  color: var(--scrawl-color-text-muted);
+  flex: 1;
+  font-size: 13px;
+  margin-block-end: -1px;
+  min-block-size: 32px;
+  min-inline-size: 0;
+  padding: 4px 6px;
+}
+[data-scrawl-root] .scrawl-board__sticker-tabs [role="tab"][aria-selected="true"] { border-block-end-color: var(--scrawl-color-focus); color: var(--scrawl-color-text); font-weight: var(--scrawl-font-weight-strong); }
+[data-scrawl-root] .scrawl-board__sticker-count { color: var(--scrawl-color-text-muted); font-weight: var(--scrawl-font-weight); }
+/* All three tab panels share one grid cell, so the shelf is always as tall as
+   the tallest set and switching tabs never resizes (or moves) it. */
+[data-scrawl-root] .scrawl-board__sticker-panels { display: grid; }
+[data-scrawl-root] .scrawl-board__sticker-panel { grid-area: 1 / 1; }
+[data-scrawl-root] .scrawl-board__sticker-panel[data-active="false"] { visibility: hidden; }
+[data-scrawl-root] .scrawl-board__sticker-grid { display: grid; gap: 2px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
+[data-scrawl-root] .scrawl-board__sticker-grid button {
+  align-items: center;
+  aspect-ratio: 1;
+  background: transparent;
+  border: 0;
+  border-radius: var(--scrawl-radius-control);
+  display: flex;
+  justify-content: center;
+  min-block-size: 0;
+  min-inline-size: 0;
+  padding: 5px;
+}
+[data-scrawl-root] .scrawl-board__sticker-grid button:hover { background: var(--scrawl-color-surface-muted); }
+[data-scrawl-root] .scrawl-board__sticker-grid button[aria-pressed="true"] { background: var(--scrawl-color-selection); }
+[data-scrawl-root] .scrawl-board__sticker-grid img { block-size: 100%; display: block; inline-size: 100%; }
+[data-scrawl-root] .scrawl-board__sticker-empty { color: var(--scrawl-color-text-muted); font-size: 12px; margin: 8px 2px; }
+
+/* Every floating toolbar and the panels that open from them get the same
+   light 1px outline, so each reads as its own surface against the board.
+   Kept last so it wins over the per-component `border: 0` resets above. */
+[data-scrawl-root] .scrawl-board__actions,
+[data-scrawl-root] .scrawl-board__tools,
+[data-scrawl-root] .scrawl-board__view,
+[data-scrawl-root] .scrawl-board__ink-bar,
+[data-scrawl-root] .scrawl-board__more-tools,
+[data-scrawl-root] .scrawl-board__style-shelf,
+[data-scrawl-root] .scrawl-board__focus-toolbar,
+[data-scrawl-root] .scrawl-board__picker-options,
+[data-scrawl-portal] .scrawl-board__panel,
+[data-scrawl-portal] .scrawl-board__inline-editor-actions {
+  border: 1px solid var(--scrawl-color-chrome-border);
+}
+
+/* Notebook layout: a full-width header (notebook switcher left, board
+   actions right), a sidebar docked under it on the left, and the tool rail
+   and breadcrumb just past the sidebar. Container queries respect embedded
+   boards. */
+[data-scrawl-root] [data-scrawl-default-ui] {
+  container-type: inline-size;
+  --scrawl-header-height: 64px;
+  --scrawl-sidebar-size: min(440px, 100%);
+  /* Space the open sidebar takes from the board. */
+  --scrawl-sidebar-width: 0px;
+  --scrawl-sidebar-motion: 240ms;
+  --scrawl-sidebar-easing: cubic-bezier(0.2, 0, 0, 1);
+}
+[data-scrawl-root] [data-scrawl-default-ui][data-pages-open] { --scrawl-sidebar-width: var(--scrawl-sidebar-size); }
+/* The rail, breadcrumb and welcome slide with the sidebar. */
+[data-scrawl-root] [data-notebook-header] .scrawl-board__tools,
+[data-scrawl-root] [data-notebook-header] .scrawl-board__breadcrumb,
+[data-scrawl-root] [data-notebook-header] .scrawl-board__welcome { transition: inset-inline-start var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing); }
+
+[data-scrawl-root] .scrawl-board__header {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  block-size: var(--scrawl-header-height);
+  z-index: 38;
+  display: flex;
+  align-items: center;
+  padding-inline: 12px;
+  background: var(--scrawl-color-surface);
+  border-block-end: 1px solid var(--scrawl-color-chrome-border);
+  pointer-events: auto;
+}
+[data-scrawl-root] [data-notebook-header] .scrawl-board__actions { inset-block-start: 5px; z-index: 39; }
+
+/* The rail and anything that follows it start below the header and after the sidebar. */
+[data-scrawl-root] [data-notebook-header] .scrawl-board__tools {
+  inset-block-start: calc(50% + var(--scrawl-header-height) / 2);
+  inset-inline-start: calc(var(--scrawl-sidebar-width) + 12px);
+  max-block-size: calc(100% - var(--scrawl-header-height) - 96px);
+}
+[data-scrawl-root] [data-notebook-header] .scrawl-board__welcome { inset-block-start: calc(var(--scrawl-header-height) + 60px); inset-inline-start: calc(var(--scrawl-sidebar-width) + 90px); }
+[data-scrawl-root] [data-notebook-header] .scrawl-board__welcome-hint--tools { inset-block-start: calc(var(--scrawl-header-height) + 60px); }
+
+[data-scrawl-root] .scrawl-board__notebook-switcher { position: relative; min-inline-size: 0; max-inline-size: calc(100% - 170px); }
+[data-scrawl-root] .scrawl-board__notebook-trigger {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-inline-size: 100%;
+  min-block-size: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--scrawl-color-chrome-border);
+  border-radius: var(--scrawl-radius-panel);
+  background: var(--scrawl-color-surface);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__notebook-trigger { border: 1px solid var(--scrawl-color-chrome-border); padding: 0 12px; }
+[data-scrawl-root] .scrawl-board__notebook-trigger > span:nth-child(2) { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; font-weight: 600; font-size: 15px; }
+[data-scrawl-root] .scrawl-board__notebook-trigger svg { inline-size: 18px; block-size: 18px; flex-shrink: 0; }
+[data-scrawl-root] .scrawl-board__notebook-color { display: inline-block; inline-size: 14px; block-size: 14px; flex-shrink: 0; border-radius: 4px; }
+[data-scrawl-root] .scrawl-board__notebook-dropdown { display: flex; flex-direction: column; position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; inline-size: 280px; max-inline-size: calc(100cqw - 24px); padding: 8px; background: var(--scrawl-color-surface); border: 1px solid var(--scrawl-color-chrome-border); border-radius: var(--scrawl-radius-panel); }
+[data-scrawl-root] .scrawl-board__notebook-options { overflow-y: auto; max-block-size: 320px; }
+[data-scrawl-root] .scrawl-board__notebook-dropdown button { min-block-size: 44px; min-inline-size: 44px; }
+[data-scrawl-root] .scrawl-board__notebook-dropdown input { inline-size: 100%; min-inline-size: 0; block-size: 44px; background: var(--scrawl-color-surface-raised); border: 0; border-radius: 8px; color: inherit; padding: 8px; font: inherit; }
+[data-scrawl-root] .scrawl-board__notebook-dropdown .scrawl-board__page-select { display: flex; align-items: center; gap: 10px; }
+[data-scrawl-root] .scrawl-board__add-notebook { display: flex; gap: 8px; align-items: center; margin-block-start: 8px; color: var(--scrawl-color-primary); font-weight: 600; }
+
+/* Plain-text breadcrumb on the canvas, after the rail. */
+[data-scrawl-root] .scrawl-board__breadcrumb {
+  position: absolute;
+  inset-block-start: calc(var(--scrawl-header-height) + 8px);
+  inset-inline-start: calc(var(--scrawl-sidebar-width) + 76px);
+  inset-inline-end: 12px;
+  z-index: 20;
+  pointer-events: none;
+}
+[data-scrawl-root] .scrawl-board__breadcrumb ol { font-size: 15px; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; min-block-size: 44px; }
+[data-scrawl-root] .scrawl-board__breadcrumb li { display: flex; align-items: center; gap: 2px; min-inline-size: 0; }
+[data-scrawl-root] .scrawl-board__breadcrumb li > span[aria-hidden] { color: var(--scrawl-color-text-muted); padding-inline: 2px; }
+[data-scrawl-root] .scrawl-board__breadcrumb button, [data-scrawl-root] .scrawl-board__breadcrumb [aria-current] { display: block; max-inline-size: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto; }
+[data-scrawl-root] .scrawl-board__breadcrumb button { min-block-size: 44px; min-inline-size: 44px; padding: 0 6px; color: var(--scrawl-color-text-muted); }
+[data-scrawl-root] .scrawl-board__breadcrumb [aria-current] { font-weight: 600; padding-inline: 6px; }
+
+/* Docked sidebar: two plain columns split by rules, no boxed cards. */
+[data-scrawl-root] .scrawl-board__pages {
+  position: absolute;
+  inset-block: var(--scrawl-header-height) 0;
+  inset-inline-start: 0;
+  inline-size: var(--scrawl-sidebar-size);
+  z-index: 37;
+  /* Closed: slid off to the start edge, then hidden once the slide ends. */
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition: transform var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing), visibility 0s linear var(--scrawl-sidebar-motion);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
+  background: color-mix(in srgb, var(--scrawl-color-surface-raised) 55%, var(--scrawl-color-surface));
+  border-inline-end: 1px solid var(--scrawl-color-chrome-border);
+  color: var(--scrawl-color-text);
+  pointer-events: auto;
+}
+[data-scrawl-root] .scrawl-board__pages[data-open] {
+  transform: none;
+  visibility: visible;
+  transition: transform var(--scrawl-sidebar-motion) var(--scrawl-sidebar-easing), visibility 0s;
+}
+[data-scrawl-root] .scrawl-board__pages:dir(rtl):not([data-open]) { transform: translateX(100%); }
+[data-scrawl-root] .scrawl-board__sections-column,
+[data-scrawl-root] .scrawl-board__pages-column { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; }
+[data-scrawl-root] .scrawl-board__sections-column { background: var(--scrawl-color-surface); }
+[data-scrawl-root] .scrawl-board__pages-column { border-inline-start: 1px solid var(--scrawl-color-chrome-border); }
+[data-scrawl-root] .scrawl-board__pages header { display: flex; align-items: center; gap: 2px; min-block-size: 52px; padding-inline: 16px 6px; border-block-end: 1px solid var(--scrawl-color-chrome-border); }
+[data-scrawl-root] .scrawl-board__pages h2 { flex: 1; margin: 0; color: var(--scrawl-color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
+[data-scrawl-root] .scrawl-board__pages h2 span { margin-inline-start: 6px; letter-spacing: 0; font-weight: 400; }
+[data-scrawl-root] .scrawl-board__page-list { flex: 1; min-block-size: 0; overflow-y: auto; padding: 8px; }
+[data-scrawl-root] .scrawl-board__page-row { display: flex; align-items: center; border: 1px solid transparent; border-radius: 10px; margin-block-end: 4px; }
+[data-scrawl-root] .scrawl-board__page-row:hover { background: var(--scrawl-color-surface-muted); }
+[data-scrawl-root] .scrawl-board__sections-column .scrawl-board__page-row[data-active="true"] { background: color-mix(in srgb, var(--scrawl-color-primary) 12%, var(--scrawl-color-surface)); }
+[data-scrawl-root] .scrawl-board__pages-column .scrawl-board__page-row[data-active="true"] { background: var(--scrawl-color-surface); border-color: var(--scrawl-color-chrome-border); }
+[data-scrawl-root] .scrawl-board__notebook-dropdown .scrawl-board__page-row[data-active="true"] { background: var(--scrawl-color-selection); }
+[data-scrawl-root] .scrawl-board__page-row[data-active="true"] .scrawl-board__page-select { font-weight: 600; }
+[data-scrawl-root] .scrawl-board__page-select { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: start; font-size: 15px; }
+[data-scrawl-root] .scrawl-board__page-select > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-scrawl-root] .scrawl-board__section-spine { inline-size: 4px; block-size: 22px; flex-shrink: 0; border-radius: 2px; }
+[data-scrawl-root] .scrawl-board__page-dot { inline-size: 7px; block-size: 7px; flex-shrink: 0; border-radius: 50%; background: var(--scrawl-color-text-muted); opacity: .6; }
+[data-scrawl-root] .scrawl-board__page-row[data-active="true"] .scrawl-board__page-dot { background: var(--scrawl-color-primary); opacity: 1; }
+[data-scrawl-root] .scrawl-board__pages button { min-block-size: 44px; min-inline-size: 44px; border: 0; background: transparent; color: inherit; border-radius: 8px; padding: 10px; cursor: pointer; }
+[data-scrawl-root] .scrawl-board__pages button:hover, [data-scrawl-root] .scrawl-board__pages button:focus-visible { background: var(--scrawl-color-surface-muted); }
+[data-scrawl-root] .scrawl-board__pages .scrawl-board__page-row button:hover,
+[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__pages .scrawl-board__page-select[aria-pressed="true"] { background: transparent; color: var(--scrawl-color-text); }
+/* Rename appears on hover or keyboard focus; touch screens always show it. */
+@media (hover: hover) {
+  [data-scrawl-root] .scrawl-board__pages .scrawl-board__page-row > button:last-child:not(.scrawl-board__page-select) { opacity: .35; }
+  [data-scrawl-root] .scrawl-board__pages .scrawl-board__page-row:hover > button:last-child,
+  [data-scrawl-root] .scrawl-board__pages .scrawl-board__page-row:focus-within > button:last-child { opacity: 1; }
+}
+[data-scrawl-root] .scrawl-board__pages header button svg { inline-size: 18px; block-size: 18px; }
+[data-scrawl-root] .scrawl-board__pages input { inline-size: 100%; min-inline-size: 0; block-size: 44px; border: 0; border-radius: 8px; background: var(--scrawl-color-surface-raised); color: inherit; padding: 10px; font: inherit; }
+[data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page { display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; margin: 8px; border: 1px dashed var(--scrawl-color-chrome-border); border-radius: 10px; color: var(--scrawl-color-primary); font-weight: 600; }
+[data-scrawl-root] [data-scrawl-default-ui] .scrawl-board__pages .scrawl-board__add-page { border: 1px dashed var(--scrawl-color-chrome-border); }
+[data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page svg { inline-size: 18px; block-size: 18px; }
+
+@container (max-width: 600px) {
+  /* The sidebar covers the board; its Close button brings the rail back. */
+  [data-scrawl-root] [data-scrawl-default-ui][data-pages-open] .scrawl-board__tools,
+  [data-scrawl-root] [data-scrawl-default-ui][data-pages-open] .scrawl-board__breadcrumb { visibility: hidden; }
+  [data-scrawl-root] [data-scrawl-default-ui][data-pages-open] .scrawl-board__tools { inset-inline-start: 12px; }
+  [data-scrawl-root] .scrawl-board__pages { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .8fr) minmax(0, 1.2fr); }
+  [data-scrawl-root] .scrawl-board__pages-column { border-inline-start: 0; border-block-start: 1px solid var(--scrawl-color-chrome-border); }
+  /* The header already names the notebook. */
+  [data-scrawl-root] .scrawl-board__breadcrumb li:first-child { display: none; }
+  [data-scrawl-root] .scrawl-board__breadcrumb li:nth-child(2) > span[aria-hidden] { display: none; }
+  [data-scrawl-root] .scrawl-board__notebook-options { max-block-size: 220px; }
+}
+
+[data-scrawl-root] .scrawl-board__page-row:has(input) .scrawl-board__page-select { display: none; }
+
+/* Default comment composer and thread: a comic speech bubble — thick ink
+   outline, solid offset shadow, tail aimed at the pin. */
+[data-scrawl-portal] .scrawl-board__comment-card {
+  --scrawl-bubble-ink: var(--scrawl-color-text);
+  --scrawl-bubble-line: 3px;
+  --scrawl-bubble-shadow: 5px;
+  position: absolute;
+  z-index: 45;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-inline-size: calc(100% - 24px);
+  padding: 14px 16px;
+  background: var(--scrawl-color-surface);
+  border: var(--scrawl-bubble-line) solid var(--scrawl-bubble-ink);
+  border-radius: 26px;
+  box-shadow: var(--scrawl-bubble-shadow) var(--scrawl-bubble-shadow) 0 var(--scrawl-bubble-ink);
+  pointer-events: auto;
+}
+[data-scrawl-portal] .scrawl-board__comment-card[data-placement="above"] { transform: translateY(-100%); }
+[data-scrawl-portal] .scrawl-board__comment-tail { position: absolute; overflow: visible; pointer-events: none; }
+[data-scrawl-portal] [data-placement="above"] > .scrawl-board__comment-tail { inset-block-start: calc(100% + 0px); }
+/* Below the pin the tail points up: mirror it onto the top edge. */
+[data-scrawl-portal] [data-placement="below"] > .scrawl-board__comment-tail { inset-block-end: 100%; transform: scaleY(-1); }
+[data-scrawl-portal] .scrawl-board__comment-tail-shadow { fill: var(--scrawl-bubble-ink); }
+[data-scrawl-portal] [data-placement="below"] > .scrawl-board__comment-tail .scrawl-board__comment-tail-shadow { display: none; }
+[data-scrawl-portal] .scrawl-board__comment-tail-fill { fill: var(--scrawl-color-surface); }
+[data-scrawl-portal] .scrawl-board__comment-tail-line { fill: none; stroke: var(--scrawl-bubble-ink); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
+
+[data-scrawl-portal] .scrawl-board__comment-card button { border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; padding: 0 14px; font-weight: 600; }
+[data-scrawl-portal] .scrawl-board__comment-card button:hover:not(:disabled) { background: var(--scrawl-color-surface-muted); }
+[data-scrawl-portal] .scrawl-board__comment-card button svg { inline-size: 18px; block-size: 18px; }
+[data-scrawl-portal] .scrawl-board__comment-header { display: flex; align-items: center; gap: 8px; margin-block: -6px -2px; }
+[data-scrawl-portal] .scrawl-board__comment-header strong { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-scrawl-portal] .scrawl-board__comment-header button { padding: 0; }
+[data-scrawl-portal] .scrawl-board__comment-avatar { display: grid; place-items: center; inline-size: 26px; block-size: 26px; flex-shrink: 0; border: 2px solid var(--scrawl-bubble-ink); border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; }
+[data-scrawl-portal] .scrawl-board__comment-badge { padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 999px; color: var(--scrawl-color-success); font-size: 11px; font-weight: 700; }
+[data-scrawl-portal] .scrawl-board__comment-text { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
+[data-scrawl-portal] .scrawl-board__comment-replies { display: flex; flex-direction: column; gap: 8px; max-block-size: 200px; margin: 0; padding: 10px 0 0; overflow-y: auto; list-style: none; border-block-start: 2px dashed color-mix(in srgb, var(--scrawl-bubble-ink) 25%, transparent); }
+[data-scrawl-portal] .scrawl-board__comment-replies strong { font-size: 12px; }
+[data-scrawl-portal] .scrawl-board__comment-replies p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+[data-scrawl-portal] .scrawl-board__comment-composer { display: flex; flex-direction: column; gap: 8px; margin: 0; }
+[data-scrawl-portal] .scrawl-board__comment-composer textarea { inline-size: 100%; min-block-size: 56px; padding: 2px 0; resize: none; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: 1.45; }
+[data-scrawl-portal] .scrawl-board__comment-composer textarea::placeholder { color: var(--scrawl-color-text-muted); }
+[data-scrawl-portal] .scrawl-board__comment-actions { display: flex; justify-content: flex-end; gap: 6px; }
+[data-scrawl-portal] .scrawl-board__comment-card .scrawl-board__comment-submit { border: 2px solid var(--scrawl-bubble-ink); background: var(--scrawl-bubble-ink); color: var(--scrawl-color-surface); box-shadow: 2px 2px 0 color-mix(in srgb, var(--scrawl-bubble-ink) 35%, transparent); }
+[data-scrawl-portal] .scrawl-board__comment-card .scrawl-board__comment-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--scrawl-bubble-ink) 85%, var(--scrawl-color-surface)); }
+[data-scrawl-portal] .scrawl-board__comment-card .scrawl-board__comment-submit:disabled { opacity: .35; cursor: default; box-shadow: none; }
+
+/* A section selector leaves room for pages in narrow, short embeds. */
+[data-scrawl-root] .scrawl-board__pages .scrawl-board__compact-section { display: none; }
+@container (max-width: 600px) {
+  [data-scrawl-root] .scrawl-board__pages { grid-template-rows: minmax(0, 1fr); }
+  [data-scrawl-root] .scrawl-board__sections-column { display: none; }
+  [data-scrawl-root] .scrawl-board__pages-column { border-block-start: 0; }
+  [data-scrawl-root] .scrawl-board__pages header { min-block-size: 44px; padding: 0 4px; flex-shrink: 0; }
+  [data-scrawl-root] .scrawl-board__pages header h2,
+  [data-scrawl-root] .scrawl-board__pages header [aria-label="New page"] { display: none; }
+  [data-scrawl-root] .scrawl-board__pages .scrawl-board__compact-section { display: block; }
+  [data-scrawl-root] .scrawl-board__pages select.scrawl-board__compact-section { flex: 1; min-inline-size: 44px; inline-size: 0; min-block-size: 44px; padding: 0 8px; font: inherit; color: inherit; }
+  [data-scrawl-root] .scrawl-board__pages .scrawl-board__page-list { padding: 0 4px; }
+  [data-scrawl-root] .scrawl-board__pages .scrawl-board__add-page { margin: 0 4px; min-block-size: 44px; padding: 8px; }
+}
+
+[data-scrawl-root] .scrawl-board__connector-hint {
+  position: absolute; inset-block-end: 68px; inset-inline: 84px 12px;
+  text-align: center; color: var(--scrawl-color-text-muted); font-size: 12px;
+  pointer-events: none;
 }