@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/board.css

@@ -0,0 +1,1065 @@
+/* THE STORYBOARD'S OWN SHEET: the board canvas, the Style wall, the shot
+   cards, the drop dialog's parts, the component sheet's parts and the
+   presence cursors (Paper SB1, S2, S3; values in plans/SHOT-BOARD-VALUES.md).
+
+   It ships in the board's chunk (board.ts, app/lazySurfaces.tsx), not in the
+   /scene entry, so it is wrapped in the `component-sheets` cascade layer: it
+   ranks below the house widgets and the chrome, and styles only the board's
+   own classes. A rule on an element that also carries a house class (the
+   panel head, a button, the dialog, the drop zone, caps) is in
+   styles/modes/storyboard.css, in the chrome layer, where it wins. */
+@layer component-sheets {
+  /* ---- the canvas ----------------------------------------------------------- */
+  /* The board: its bar, then the desk, which scrolls the whole plan. It takes
+     the pointer (the cell does not). The SHEET'S LENGTHS are Paper's layout,
+     not spacing: a 348 card, the 88 gutter that holds the cut into the next. */
+  .board-canvas {
+    --shot-card-w: 348px;
+    --shot-gutter-w: 88px;
+    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    outline: none;
+    pointer-events: auto;
+    background-color: var(--surface-board);
+  }
+
+  .board-canvas.is-drop {
+    box-shadow: inset 0 0 0 2px var(--accent);
+  }
+
+
+  .board-bar-title {
+    margin: 0;
+    font-size: var(--type-lg);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+  }
+
+  .board-bar-summary,
+  .board-section-count {
+    flex: none;
+    font-family: var(--font-numeric);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+    white-space: nowrap;
+  }
+
+  .board-bar-spacer {
+    flex: 1 1 0;
+  }
+
+  /* THE DESK: the board ground and its 20px dot grid. Style on top, then the
+     shots. Positioned, so the presence cursors land in its scrolled content. */
+  .board-desk {
+    position: relative;
+    flex: 1 1 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    padding: var(--space-8) var(--space-8) var(--space-7);
+    overflow: auto;
+    background-image: radial-gradient(circle, var(--board-dot) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  /* A section's head: the caps label, a hint, then its count or action. */
+  .board-section-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    min-width: 0;
+    min-height: var(--leading-xs);
+  }
+
+  .board-section-hint {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+
+
+  /* ---- the Style wall ------------------------------------------------------- */
+  /* On the desk, with no box round it (SB1). */
+  .style-wall {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+
+  /* The row scrolls sideways once the cards outrun it. The 4px inset and its
+     negative margin keep a selected card's offset outline inside the scroller,
+     which clips. */
+  .style-wall-items {
+    display: flex;
+    gap: var(--space-5);
+    height: calc(76px + 2 * var(--space-2));
+    margin: calc(-1 * var(--space-2));
+    padding: var(--space-2);
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  /* ---- a Style card --------------------------------------------------------- */
+  .style-card {
+    position: relative;
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    width: 120px;
+    height: 100%;
+    border-radius: var(--radius-tab);
+    background: var(--surface-secondary);
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .style-card.is-selected {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+
+  .style-card:focus-visible {
+    box-shadow: var(--focus-ring);
+  }
+
+  .style-card-media,
+  .style-card > .reference-preview,
+  .style-card > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* A font card shows the font: the specimen on white paper, as on a desk.
+     The sample is the brand font's picture, so it keeps the specimen size, the
+     one documented content exception to the type ladder. */
+  .style-card.is-font {
+    justify-content: space-between;
+    padding: var(--space-5);
+    background: var(--specimen-paper);
+  }
+
+  .style-font-sample {
+    font-size: var(--type-heading);
+    line-height: var(--leading-lg);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-body);
+    color: var(--specimen-ink);
+  }
+
+  .style-font-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: color-mix(in srgb, var(--specimen-ink) 65%, var(--specimen-paper));
+  }
+
+  .style-card.is-palette {
+    justify-content: space-between;
+    padding: var(--space-5);
+    border: 1px solid var(--line);
+  }
+
+  .style-palette-swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+
+  /* Every swatch takes the strong hairline, so a dark one still reads on the
+     dark card. */
+  .style-palette-swatch {
+    width: 18px;
+    height: 18px;
+    border-radius: var(--radius-full);
+    box-shadow: inset 0 0 0 1px var(--line-strong);
+  }
+
+  .style-palette-name {
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-2);
+  }
+
+  .style-card.is-note {
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-5);
+    background: var(--note-paper);
+  }
+
+  .style-note-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--note-ink);
+    overflow-wrap: anywhere;
+  }
+
+  .style-note-meta {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-micro);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--note-meta);
+  }
+
+  .style-card.is-link {
+    justify-content: flex-end;
+    gap: var(--space-1);
+    padding: var(--space-5);
+    border: 1px solid var(--line);
+  }
+
+  .style-link-host {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-mono);
+    font-size: var(--type-micro);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  .style-link-title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+    overflow-wrap: anywhere;
+  }
+
+  .style-card.is-component {
+    border: 1px solid var(--line);
+  }
+
+  .style-component-preview {
+    position: relative;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--surface-sunken);
+    /* A picture, and it swaps under the pointer: the poster or static preview
+       gives way to the live stage on hover, and to the stage once the library
+       names the host. A press that went down on the old node and up on the new
+       one fired NO click, so a tap (enter and press at once) never picked the
+       card. Taking no pointer, every press lands on the card itself. */
+    pointer-events: none;
+  }
+
+  .style-component-foot {
+    flex: none;
+    display: flex;
+    align-items: center;
+    height: var(--space-8);
+    min-width: 0;
+    padding: 0 var(--space-4);
+  }
+
+  .style-component-name {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+  }
+
+  /* THE CARD'S COMMENTS (S5): one corner control, always shown. A button
+     revealed only on hover never shows on a touch device, and it is the card's
+     one pointer route to a comment besides its menu. With open threads it is
+     the pin carrying their count, in the Studio pin's accent and point. */
+  .style-card-comment {
+    position: absolute;
+    top: var(--space-2);
+    right: var(--space-2);
+    display: grid;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-xs);
+    background: var(--badge-scrim);
+    color: var(--on-media);
+    cursor: pointer;
+  }
+
+  .style-card-comment > svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  .style-card-comment.is-pin {
+    border-radius: var(--radius-tab) var(--radius-tab) var(--radius-tab) var(--radius-2xs);
+    background: var(--accent);
+    color: var(--on-accent);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-semibold);
+  }
+
+  span.style-card-comment {
+    cursor: default;
+  }
+
+  /* The note's words clear the corner control. */
+  .style-card.is-note .style-note-text {
+    padding-right: var(--space-7);
+  }
+
+  .style-card-comment:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  /* ---- the Shots section ---------------------------------------------------- */
+  .board-shots {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+  }
+
+  /* THE SHEET (SB1): storyboard panels that wrap. Each cell is a card and the
+     gutter after it, which holds the cut into the next card. */
+  .board-shots-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    row-gap: var(--space-8);
+  }
+
+  .shot-cell {
+    position: relative;
+    flex: none;
+    display: flex;
+  }
+
+  /* The gutter: the cut chip level with the picture's middle, and "into 04"
+     under it where the row wraps. */
+  .shot-gutter {
+    position: relative;
+    flex: none;
+    width: var(--shot-gutter-w);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    padding-top: calc(var(--shot-card-w) * 9 / 32 - var(--badge-h) / 2);
+  }
+
+  /* ---- a shot card ---------------------------------------------------------- */
+  /* Off screen, a card costs no layout or paint (`content-visibility`); its
+     intrinsic size keeps the scroller's length. */
+  .shot-card {
+    position: relative;
+    flex: none;
+    width: var(--shot-card-w);
+    display: flex;
+    flex-direction: column;
+    background: var(--surface-panel);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-tab);
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    content-visibility: auto;
+    contain-intrinsic-size: auto var(--shot-card-w) auto calc(var(--shot-card-w) * 0.85);
+    transition: border-color var(--dur-fast) var(--ease);
+  }
+
+  .shot-card:hover {
+    border-color: var(--line-strong);
+  }
+
+  /* 2px of accent without moving the card: one outline over the border and a
+     pixel past it (G1 06). */
+  .shot-card.is-selected {
+    outline: 2px solid var(--accent);
+    outline-offset: -1px;
+  }
+
+  .shot-card:focus-visible {
+    box-shadow: var(--focus-ring);
+  }
+
+  /* A drop pins straight to this shot (S2 note 3). */
+  .shot-card.is-drop {
+    border-style: dashed;
+    border-color: var(--accent);
+  }
+
+  /* ---- the picture ---------------------------------------------------------- */
+  .shot-card-picture {
+    position: relative;
+    flex: none;
+    aspect-ratio: 16 / 9;
+    background: var(--surface-sunken);
+    overflow: hidden;
+  }
+
+  .shot-card-picture > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .shot-card-picture.is-paper {
+    background: var(--sketch-paper);
+  }
+
+  .shot-card-sketch-empty {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--sketch-ink);
+  }
+
+  /* "Built", laid over the built frame's top left. */
+  .shot-card-built {
+    position: absolute;
+    top: var(--space-4);
+    left: var(--space-4);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: var(--badge-h);
+    padding: 0 var(--space-3);
+    border-radius: var(--radius-xs);
+    background: var(--badge-scrim);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--on-media);
+  }
+
+  .shot-card-built > svg {
+    width: 12px;
+    height: 12px;
+    color: var(--success);
+  }
+
+  /* One dot per sketch, centred over the picture's foot, 8 up (the 6 here plus
+     the dot's own 2px inset). Each is a 5px dot in a 9px target; the one shown
+     is the sketch ink. */
+  .shot-card-dots {
+    position: absolute;
+    left: 50%;
+    bottom: var(--space-3);
+    display: flex;
+    translate: -50% 0;
+  }
+
+  .shot-card-dot {
+    width: 5px;
+    height: 5px;
+    padding: var(--space-1);
+    box-sizing: content-box;
+    border-radius: var(--radius-full);
+    background: var(--sketch-line);
+    background-clip: content-box;
+  }
+
+  .shot-card-dot.is-shown {
+    background-color: var(--sketch-ink);
+  }
+
+  /* The drag grip over the picture's top left, while the card is hovered. The
+     card itself drags: the grip says so. */
+  .shot-card-grip {
+    position: absolute;
+    top: var(--space-4);
+    left: var(--space-4);
+    display: none;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+    background: color-mix(in srgb, var(--surface-panel) 90%, transparent);
+    color: var(--ink-2);
+    cursor: grab;
+  }
+
+  .shot-card:hover > .shot-card-grip {
+    display: grid;
+  }
+
+  /* A built card's badge holds that corner; the grip takes the other. */
+  .shot-card:has(.shot-card-built) > .shot-card-grip {
+    left: auto;
+    right: var(--space-4);
+  }
+
+  /* ---- the body and footer -------------------------------------------------- */
+  .shot-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    min-width: 0;
+    padding: var(--space-6);
+  }
+
+  .shot-card-title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    min-width: 0;
+    height: var(--badge-h);
+  }
+
+  .shot-card-number {
+    flex: none;
+    font-family: var(--font-numeric);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  .shot-card-name {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-lg);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+  }
+
+  /* One line under the title: the voice, else What we see. A missing line
+     keeps its height, so the cards of a row stay one height. */
+  .shot-card-voice,
+  .shot-card-notes {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+
+  .shot-card-body:not(:has(.shot-card-voice, .shot-card-notes))::after {
+    content: "";
+    height: var(--leading-xs);
+  }
+
+  .shot-card-foot {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    min-width: 0;
+    height: var(--button-h);
+    margin-top: auto;
+    padding: 0 var(--space-6);
+    border-top: 1px solid var(--line-soft);
+  }
+
+  .shot-card-counts {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  .shot-card-length {
+    flex: none;
+    margin-left: auto;
+    font-family: var(--font-numeric);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+
+  /* ---- the cut between two cards -------------------------------------------- */
+  .shot-transition-chip {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    height: var(--badge-h);
+    padding: 0 var(--space-3);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-xs);
+    background: var(--surface-secondary);
+    color: var(--ink-2);
+    font: inherit;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    white-space: nowrap;
+  }
+
+  button.shot-transition-chip {
+    cursor: pointer;
+  }
+
+  button.shot-transition-chip:hover {
+    color: var(--ink-1);
+  }
+
+  .shot-transition-chip.is-selected {
+    border-color: var(--accent);
+    background: var(--accent-quiet);
+    color: var(--accent-ink);
+  }
+
+  .shot-transition-chip:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  .shot-gutter-wrap {
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+    white-space: nowrap;
+  }
+
+  /* ---- the reorder ---------------------------------------------------------- */
+  /* Where a dragged card lands: an accent line with a ring at each end, in the
+     gutter, behind its cut chip (which keeps a ring of the desk round it). */
+  .shot-insert {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(50% - var(--space-2));
+    z-index: 0;
+    width: 8px;
+    pointer-events: none;
+    background: linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
+  }
+
+  .shot-insert::before,
+  .shot-insert::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 8px;
+    height: 8px;
+    box-sizing: border-box;
+    border: 2px solid var(--accent);
+    border-radius: var(--radius-xs);
+    background: var(--surface-board);
+  }
+
+  .shot-insert::before {
+    top: 0;
+  }
+
+  .shot-insert::after {
+    bottom: 0;
+  }
+
+  /* Before the first card: in the desk's inset, left of it. */
+  .shot-insert.is-before {
+    left: calc(-1 * var(--space-7) - var(--space-2));
+  }
+
+  .shot-gutter.is-insert > .shot-transition-chip,
+  .shot-gutter.is-insert > .shot-gutter-wrap {
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 0 var(--space-2) var(--surface-board);
+  }
+
+  /* While a card moves, nothing in the sheet answers the pointer but the
+     cells, so the line follows the drag instead of the chips. */
+  .board-shots-row.is-moving .shot-transition-chip {
+    pointer-events: none;
+  }
+
+  /* ---- the add slot ---------------------------------------------------------- */
+  /* After the last card: a dashed panel the size of a card. */
+  .shot-add-slot {
+    flex: none;
+    width: var(--shot-card-w);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-4);
+    padding: var(--space-7);
+    border: 1px dashed var(--line-strong);
+    border-radius: var(--radius-tab);
+    background: transparent;
+    color: var(--ink-2);
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background var(--dur-fast) var(--ease),
+      border-color var(--dur-fast) var(--ease);
+  }
+
+  .shot-add-slot:hover {
+    background: var(--fill-rest);
+    border-color: var(--ink-3);
+  }
+
+  .shot-add-slot:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  .shot-add-slot > svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .shot-add-slot-title {
+    font-size: var(--type-lg);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+  }
+
+  .shot-add-slot-hint {
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  .board-drop-title {
+    min-width: 0;
+    font-size: var(--type-xl);
+    line-height: var(--leading-md);
+    font-weight: var(--weight-semibold);
+    color: var(--ink-1);
+  }
+
+  .board-drop-esc {
+    flex: none;
+    margin-left: auto;
+    font-size: var(--type-lg);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-regular);
+    color: var(--ink-3);
+  }
+
+
+  .board-drop-thumbs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    padding: 0 var(--space-7);
+  }
+
+  .board-drop-thumb {
+    flex: none;
+    width: 112px;
+    height: 70px;
+    border-radius: var(--radius-sm);
+    object-fit: cover;
+    background: var(--surface-secondary);
+  }
+
+  .board-drop-thumb.is-file,
+  .board-drop-thumb.is-more {
+    display: grid;
+    place-items: center;
+    padding: 0 var(--space-4);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+
+  .board-drop-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-7) var(--space-7) 0;
+  }
+
+  .board-drop-label {
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-caps);
+    text-transform: uppercase;
+    color: var(--ink-2);
+  }
+
+  .board-drop-note {
+    width: 100%;
+    min-height: 0;
+    padding: var(--space-4);
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    background: var(--surface-secondary);
+    color: var(--ink-1);
+    font: inherit;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    resize: vertical;
+    outline: none;
+  }
+
+  .board-drop-note:focus {
+    border-color: var(--accent);
+  }
+
+  .board-drop-note::placeholder {
+    color: var(--ink-3);
+  }
+
+  .board-drop-scopes {
+    display: flex;
+    gap: var(--space-4);
+  }
+
+  /* 1.5px of accent when picked, as an inset ring over the 1px border, so the
+     card never moves. */
+  .board-drop-scope {
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-6);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    background: var(--surface-secondary);
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+  }
+
+  .board-drop-scope.is-selected {
+    border-color: var(--accent);
+    background: var(--accent-quiet);
+    box-shadow: inset 0 0 0 0.5px var(--accent);
+  }
+
+  .board-drop-scope:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: default;
+  }
+
+  .board-drop-scope:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  .board-drop-scope-title {
+    font-size: var(--type-title);
+    line-height: var(--leading-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--ink-1);
+  }
+
+  .board-drop-scope-desc {
+    font-size: var(--type-md);
+    line-height: var(--leading-sm);
+    color: var(--ink-2);
+  }
+
+  .board-drop-agent {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-5);
+    margin: var(--space-7) var(--space-7) 0;
+    padding: var(--space-6);
+    border: 1px solid var(--success-line);
+    border-radius: var(--radius-md);
+    background: var(--success-wash);
+    font-size: var(--type-lg);
+    line-height: var(--leading-md);
+    color: var(--ink-2);
+  }
+
+  .board-drop-agent-dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    margin-top: var(--space-3);
+    border-radius: var(--radius-full);
+    background: var(--success);
+  }
+
+  /* ---- the component sheet (S3) --------------------------------------------- */
+  /* The right column's occupant while one component card is selected: the
+     column is 400 wide here (`BOARD_PANEL_W`), and the sheet brings its own bar
+     in place of the column head. The bar and the foot stay put and the body
+     between them scrolls, holding its gutter so a body that grows past the
+     fold does not narrow every row under the pointer. */
+  .component-sheet {
+    flex: 1 1 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .component-sheet-body {
+    flex: 1 1 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+
+  .component-sheet-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-lg);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--ink-1);
+  }
+
+  .component-sheet-author {
+    min-width: 0;
+    margin-left: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-mono);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  /* The live preview: 200 tall, the large corner, the loop chip in its corner. */
+  .component-sheet-stage {
+    position: relative;
+    flex: none;
+    height: 200px;
+    margin: var(--space-6) var(--space-6) 0;
+    border-radius: var(--radius-tab);
+    background: var(--surface-sunken);
+    overflow: hidden;
+  }
+
+  .component-sheet-loop {
+    position: absolute;
+    left: var(--space-5);
+    bottom: var(--space-5);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-1) var(--space-4);
+    border-radius: var(--radius-xs);
+    background: var(--scrim-strong);
+    font-family: var(--font-mono);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--on-accent);
+    pointer-events: none;
+  }
+
+  .component-sheet-loop-play {
+    width: 0;
+    height: 0;
+    border-left: 6px solid currentColor;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+  }
+
+  .component-sheet-tweaks {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-mono);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  /* OTHER PEOPLE'S CURSORS (Paper page 21): placed in the canvas content, the
+     arrow's tip on the point, the name tag to its right on the person's colour.
+     Paint only. */
+  .board-cursors {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--z-float);
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .board-cursor {
+    position: absolute;
+    display: flex;
+    align-items: flex-start;
+    transition:
+      left var(--dur-fast) linear,
+      top var(--dur-fast) linear;
+  }
+
+  .board-cursor > svg {
+    flex: none;
+  }
+
+  .board-cursor-tag {
+    height: 20px;
+    margin-top: var(--space-6);
+    margin-left: calc(-1 * var(--space-2));
+    padding: 0 var(--space-3);
+    overflow: hidden;
+    max-width: 200px;
+    font-family: var(--font-sans);
+    font-size: var(--type-sm);
+    font-weight: 600;
+    line-height: var(--leading-md);
+    color: #0b0b0b;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: var(--radius-sm);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .board-cursor {
+      transition: none;
+    }
+  }
+}