@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/shotboard/sketch.css

@@ -0,0 +1,1392 @@
+/* THE SHOT BOARD (ShotBoard.tsx and its parts, Paper SB2-SB5; values in
+   plans/SHOT-BOARD-VALUES.md). Wrapped in the `component-sheets` cascade
+   layer: ShotBoard imports it, and under the /scene index's layer order it
+   ranks below the house widgets, so it styles its own classes and the layout
+   around the widgets (.btn, .badge, .caps, .panel-head), never the widgets. */
+@layer component-sheets {
+  /* ---- the frame: Layers | bar, desk, footer --------------------------- */
+  /* The board's canvas cell takes no pointer (shell.css); the shot board
+     opts back in. */
+  .shot-board {
+    flex: 1 1 0;
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    outline: none;
+    pointer-events: auto;
+    background: var(--surface-board);
+  }
+
+  .shot-board-main {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  /* ---- Layers (SB3, SB4): 224 wide, front first, 28px rows ------------- */
+  .sketch-layers {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    width: 224px;
+    min-height: 0;
+    background: var(--surface-panel);
+    border-right: 1px solid var(--line);
+  }
+
+  .sketch-layers-head {
+    justify-content: space-between;
+  }
+
+  .sketch-count {
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  .sketch-layers-empty {
+    margin: 0;
+    padding: var(--space-7);
+    font-size: var(--type-md);
+    line-height: var(--leading-sm);
+    color: var(--ink-3);
+  }
+
+  .sketch-layer-list {
+    flex: 1 1 0;
+    margin: 0;
+    padding: var(--space-3);
+    list-style: none;
+    overflow-y: auto;
+  }
+
+  .sketch-layer {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    height: var(--row-h);
+    padding: 0 var(--space-3);
+    border-radius: var(--radius-sm);
+    cursor: default;
+    outline: none;
+  }
+  .sketch-layer:hover {
+    background: var(--fill-rest);
+  }
+  .sketch-layer:focus-visible {
+    box-shadow: var(--focus-ring);
+  }
+  .sketch-layer[aria-selected="true"] {
+    background: var(--accent-quiet);
+  }
+
+  .sketch-layer-icon {
+    flex: none;
+    display: inline-flex;
+    width: 16px;
+    height: 16px;
+    color: var(--ink-3);
+  }
+  .sketch-layer-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-layer[aria-selected="true"] .sketch-layer-icon,
+  .sketch-layer[aria-selected="true"] .sketch-layer-name {
+    color: var(--accent-ink);
+  }
+
+  .sketch-layer-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+  }
+
+  .sketch-layer-kind {
+    flex: none;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  /* ---- the canvas bar (SB2, SB5) --------------------------------------- */
+  .sketch-bar {
+    container: sketch-bar / inline-size;
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    height: var(--panel-head-h);
+    padding: 0 var(--space-4);
+    background: var(--surface-panel);
+    border-bottom: 1px solid var(--line);
+  }
+
+  .sketch-bar-group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    min-width: 0;
+  }
+
+  .sketch-crumb {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: var(--control-h);
+    padding: 0 var(--space-4) 0 var(--space-2);
+    font: inherit;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-2);
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-tab);
+    cursor: pointer;
+  }
+  .sketch-crumb svg {
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-crumb:hover {
+    background: var(--fill-rest);
+    color: var(--ink-1);
+  }
+  .sketch-crumb:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  .sketch-divider {
+    flex: none;
+    width: 1px;
+    height: 16px;
+    background: var(--line);
+  }
+
+  .sketch-bar-title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    min-width: 0;
+    padding: 0 var(--space-2);
+  }
+
+  .sketch-bar-number {
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+
+  /* The bar's heading holds the shot's name, or its open rename, in the bar's
+     own face: a heading's default size, weight and margins would set the
+     rename's words bigger and bolder than the name they replace. */
+  .sketch-bar-heading {
+    display: flex;
+    min-width: 0;
+    margin: 0;
+    font: inherit;
+  }
+
+  /* The shot's name is a button that opens its rename (`PartName`): it reads
+     as the bar's title, and only its keyboard focus shows a ring. */
+  .sketch-bar-name {
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+    overflow: hidden;
+    text-align: left;
+    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);
+    background: none;
+    border: 0;
+    border-radius: var(--radius-xs);
+    cursor: default;
+  }
+  .sketch-bar-name:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  .sketch-bar-nav,
+  .sketch-zoom {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .sketch-bar-playing {
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+
+  .sketch-bar .btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .sketch-stop-square {
+    width: 9px;
+    height: 9px;
+    border-radius: var(--radius-2xs);
+    background: var(--accent-ink);
+  }
+
+  .sketch-stop-key {
+    font-family: var(--font-numeric);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--accent-ink);
+  }
+
+  /* A NARROW BAR (a 1024 window leaves the shot board about 500px between
+     Layers and the right column): the crumb, Play and Ask agent drop their
+     words and keep their icons and names, and Play's readout and Stop's key
+     go, so the shot's name and the prev/next buttons keep their room. */
+  @container sketch-bar (width < 720px) {
+    .sketch-bar-word,
+    .sketch-bar-playing,
+    .sketch-stop-key {
+      display: none;
+    }
+    .sketch-crumb {
+      padding: 0 var(--space-2);
+    }
+  }
+
+  /* The 28px square icon button (prev/next, zoom, close): no fill at rest. */
+  .sketch-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--control-h);
+    height: var(--control-h);
+    padding: 0;
+    color: var(--ink-2);
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+  }
+  .sketch-icon-button svg {
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-icon-button:hover:not(:disabled) {
+    background: var(--fill-rest);
+    color: var(--ink-1);
+  }
+  .sketch-icon-button:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: default;
+  }
+  .sketch-icon-button:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  /* ---- the desk and the paper (SB2) ------------------------------------ */
+  .sketch-desk {
+    flex: 1 1 0;
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    padding: var(--space-8);
+    overflow: auto;
+    background-color: var(--surface-board);
+    background-image: radial-gradient(circle, var(--board-dot) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  /* Centred when it fits, scrolled from its edge when it does not. */
+  .sketch-desk-stack {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    margin: auto;
+  }
+
+  .sketch-paper {
+    position: relative;
+    container-type: inline-size;
+    flex: none;
+    overflow: hidden;
+    color: var(--sketch-ink);
+    background: var(--sketch-paper);
+    border-radius: var(--radius-2xs);
+    box-shadow: var(--shadow-float);
+    outline: none;
+    touch-action: none;
+    user-select: none;
+  }
+  .sketch-paper[data-ground="dark"] {
+    color: var(--on-media);
+    background: var(--surface-app);
+  }
+  .sketch-paper[data-ground="brand"] {
+    color: var(--on-accent);
+    background: var(--accent);
+  }
+  .sketch-paper[data-tool="box"],
+  .sketch-paper[data-tool="text"],
+  .sketch-paper[data-tool="arrow"] {
+    cursor: crosshair;
+  }
+
+  /* ---- the items (SketchItem.tsx) -------------------------------------- */
+  .sketch-item {
+    position: absolute;
+    box-sizing: border-box;
+    outline: none;
+  }
+  .sketch-item:focus-visible {
+    box-shadow: var(--focus-ring);
+  }
+
+  .sketch-item.is-text {
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    line-height: var(--leading-tight);
+    font-weight: var(--weight-regular);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .sketch-item.is-text.is-title {
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-display-md);
+  }
+  .sketch-item.is-title .sketch-text-editor {
+    letter-spacing: var(--tracking-display-md);
+  }
+  .sketch-item.is-text[data-align="center"] {
+    justify-content: center;
+    text-align: center;
+  }
+  .sketch-item.is-text[data-align="end"] {
+    justify-content: flex-end;
+    text-align: right;
+  }
+
+  .sketch-text-editor {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    resize: none;
+    font: inherit;
+    line-height: inherit;
+    text-align: inherit;
+    color: inherit;
+    background: var(--fill-rest);
+    border: 0;
+    outline: 1px solid var(--accent);
+  }
+
+  .sketch-item.is-box {
+    border-radius: var(--radius-xs);
+    background: color-mix(in srgb, var(--sketch-paper) 80%, var(--sketch-line));
+    border: 1px solid var(--sketch-line);
+  }
+  .sketch-item.is-box[data-tone="dark"] {
+    background: color-mix(in srgb, var(--sketch-ink) 48%, black);
+    border-color: transparent;
+  }
+  .sketch-item.is-box[data-tone="accent"] {
+    background: var(--accent);
+    border-color: transparent;
+  }
+
+  .sketch-item-label {
+    position: absolute;
+    top: var(--space-4);
+    left: var(--space-5);
+    max-width: calc(100% - 2 * var(--space-5));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: var(--leading-tight);
+    font-weight: var(--weight-medium);
+    color: var(--sketch-ink);
+  }
+  .sketch-item.is-box[data-tone="dark"] .sketch-item-label {
+    color: var(--sketch-line);
+  }
+  .sketch-item.is-box[data-tone="accent"] .sketch-item-label {
+    color: var(--on-accent);
+  }
+  .sketch-item-label.is-arrow {
+    top: auto;
+    left: auto;
+    max-width: none;
+    translate: -50% -50%;
+    pointer-events: none;
+  }
+
+  .sketch-item.is-image,
+  .sketch-item.is-component,
+  .sketch-item.is-missing {
+    border-radius: var(--radius-2xs);
+  }
+  .sketch-item.is-image > img,
+  .sketch-item-media,
+  .sketch-item-poster {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius-2xs);
+    box-shadow: 0 0 0 1px var(--sketch-line);
+    pointer-events: none;
+  }
+  .sketch-item-media,
+  .sketch-item-poster {
+    object-fit: cover;
+  }
+
+  .sketch-item.is-missing {
+    background: color-mix(in srgb, var(--sketch-paper) 80%, var(--sketch-line));
+    border: 1px dashed var(--sketch-ink);
+  }
+
+  .sketch-item-tile {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--on-media);
+    background: var(--surface-secondary);
+    border-radius: var(--radius-xs);
+  }
+
+  /* The file name under a picture, and the "component" tag under a poster:
+     chrome type at every zoom, hanging under the item. */
+  .sketch-item-caption,
+  .sketch-item-tag {
+    position: absolute;
+    top: calc(100% + var(--space-3));
+    left: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    font-family: var(--font-numeric);
+    font-size: var(--type-micro);
+    line-height: var(--leading-xs);
+    color: var(--sketch-ink);
+    pointer-events: none;
+  }
+  .sketch-item-caption svg,
+  .sketch-item-tag svg {
+    flex: none;
+    width: 12px;
+    height: 12px;
+  }
+  .sketch-item-tag {
+    height: 16px;
+    padding: 0 var(--space-2);
+    background: var(--sketch-paper);
+    border: 1px solid var(--sketch-line);
+    border-radius: var(--radius-2xs);
+  }
+
+  /* An arrow: a paper-sized SVG that takes no pointer, but its wide hit
+     stroke does. Strokes keep their screen width at every zoom. */
+  .sketch-item.is-arrow {
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+  .sketch-arrow-line {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+  .sketch-arrow-hit {
+    fill: none;
+    stroke: transparent;
+    stroke-width: 12px;
+    vector-effect: non-scaling-stroke;
+    pointer-events: stroke;
+    outline: none;
+  }
+  .sketch-item.is-arrow[data-selected] .sketch-arrow-line {
+    stroke: var(--accent);
+  }
+
+  /* ---- selection, handles, guides, marquee, draft, drop ---------------- */
+  .sketch-selection,
+  .sketch-handles {
+    position: absolute;
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+  .sketch-selection {
+    border: 1px solid var(--accent);
+  }
+
+  .sketch-handle {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    box-sizing: border-box;
+    translate: -50% -50%;
+    background: var(--on-accent);
+    border: 1px solid var(--accent);
+    pointer-events: auto;
+  }
+  .sketch-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
+  .sketch-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
+  .sketch-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
+  .sketch-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
+  .sketch-handle.is-n { left: 50%; top: 0; cursor: ns-resize; }
+  .sketch-handle.is-e { left: 100%; top: 50%; cursor: ew-resize; }
+  .sketch-handle.is-s { left: 50%; top: 100%; cursor: ns-resize; }
+  .sketch-handle.is-w { left: 0; top: 50%; cursor: ew-resize; }
+  .sketch-handle.is-end {
+    border-radius: var(--radius-full);
+    cursor: move;
+  }
+
+  /* A snap guide is deliberately not the accent (shotTokens.css). */
+  .sketch-guide {
+    position: absolute;
+    background: var(--guide);
+    pointer-events: none;
+  }
+  .sketch-guide.is-x {
+    top: 0;
+    bottom: 0;
+    width: 1px;
+  }
+  .sketch-guide.is-y {
+    left: 0;
+    right: 0;
+    height: 1px;
+  }
+
+  .sketch-marquee,
+  .sketch-draft {
+    position: absolute;
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+  .sketch-marquee {
+    background: var(--accent-quiet);
+    border: 1px solid var(--accent);
+  }
+  .sketch-draft {
+    border: 1px dashed var(--accent);
+  }
+  .sketch-draft.is-arrow {
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+  .sketch-draft.is-arrow path {
+    stroke: var(--accent);
+    stroke-width: 2px;
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* SB4's drop target, centred on the drop point. */
+  .sketch-drop {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    width: 240px;
+    height: 140px;
+    translate: -50% -50%;
+    color: var(--accent);
+    background: var(--accent-quiet);
+    border: 1.5px dashed var(--accent);
+    border-radius: var(--radius-xs);
+    pointer-events: none;
+  }
+  .sketch-drop > svg {
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-drop-chip {
+    padding: 0 var(--space-3);
+    font-size: var(--type-sm);
+    line-height: var(--leading-md);
+    font-weight: var(--weight-medium);
+    white-space: nowrap;
+    color: var(--on-accent);
+    background: var(--accent);
+    border-radius: var(--radius-xs);
+  }
+
+  /* ---- the empty sketch (SB2) ------------------------------------------ */
+  .sketch-empty {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-8);
+    pointer-events: none;
+  }
+  .sketch-empty-copy {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    text-align: center;
+  }
+  .sketch-empty-title {
+    margin: 0;
+    font-size: var(--type-xl);
+    line-height: var(--leading-md);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-body);
+    color: var(--sketch-ink);
+  }
+  .sketch-empty-lead {
+    margin: 0;
+    font-size: var(--type-lg);
+    line-height: var(--leading-sm);
+    color: color-mix(in srgb, var(--sketch-ink) 80%, transparent);
+  }
+  .sketch-empty-starts {
+    display: flex;
+    gap: var(--space-6);
+    padding-top: var(--space-2);
+  }
+  .sketch-start {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-5);
+    width: 148px;
+    height: 88px;
+    font: inherit;
+    color: var(--sketch-ink);
+    background: var(--sketch-paper);
+    border: 1px solid var(--sketch-line);
+    border-radius: var(--radius-tab);
+    cursor: pointer;
+    pointer-events: auto;
+  }
+  .sketch-start:hover:not(:disabled) {
+    border-color: var(--sketch-ink);
+  }
+  .sketch-start:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+  .sketch-start:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: default;
+  }
+  .sketch-start-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+  .sketch-start-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+  }
+  .sketch-start-key {
+    padding: 0 var(--space-2);
+    font-family: var(--font-numeric);
+    font-size: var(--type-micro);
+    line-height: var(--leading-xs);
+    border: 1px solid var(--sketch-line);
+    border-radius: var(--radius-xs);
+  }
+
+  /* ---- Play (SB5) ------------------------------------------------------- */
+  .sketch-play-stage {
+    position: absolute;
+    inset: 0;
+  }
+  .sketch-play-overlay {
+    position: absolute;
+    inset: 0;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .sketch-play-box {
+    position: absolute;
+    box-sizing: border-box;
+    outline: 1.5px dashed var(--sketch-ink);
+    outline-offset: var(--space-2);
+    border-radius: var(--radius-sm);
+  }
+  .sketch-play-chip {
+    position: absolute;
+    top: calc(-1 * var(--space-5));
+    left: var(--space-5);
+    padding: 0 var(--space-3);
+    font-size: var(--type-sm);
+    line-height: var(--leading-md);
+    font-weight: var(--weight-medium);
+    white-space: nowrap;
+    color: var(--sketch-ink);
+    background: var(--sketch-paper);
+    border-radius: var(--radius-xs);
+  }
+  .sketch-play-progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    background: color-mix(in srgb, var(--sketch-ink) 12%, transparent);
+  }
+  .sketch-play-progress > span {
+    display: block;
+    height: 100%;
+    background: var(--accent);
+  }
+  .sketch-play-time {
+    position: absolute;
+    left: var(--space-6);
+    bottom: var(--space-6);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    height: 24px;
+    padding: 0 var(--space-4);
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-1);
+    background: var(--surface-secondary);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+  }
+  .sketch-play-total {
+    font-size: var(--type-sm);
+    color: var(--ink-3);
+  }
+  .sketch-play-dot,
+  .sketch-live-dot,
+  .sketch-stage-dot {
+    flex: none;
+    width: 6px;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: var(--success);
+  }
+  .sketch-live-dot {
+    box-shadow: 0 0 0 3px var(--success-line);
+  }
+
+  /* Play locks the strip and the footer (SB5). */
+  .sketch-desk-strip[inert],
+  .sketch-footer-cell[inert] {
+    opacity: var(--opacity-disabled);
+  }
+
+  /* ---- the sketch strip (SB2, SB3) ------------------------------------- */
+  .sketch-strip {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-6);
+  }
+  .sketch-thumb-cell {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    width: 128px;
+  }
+  .sketch-thumb {
+    display: block;
+    width: 128px;
+    padding: 0;
+    overflow: hidden;
+    background: var(--sketch-paper);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+  }
+  .sketch-thumb[aria-pressed="true"] {
+    border: 2px solid var(--accent);
+    box-shadow: var(--focus-ring);
+  }
+  .sketch-thumb:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+  .sketch-thumb-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-height: var(--leading-xs);
+    padding-top: var(--space-1);
+  }
+  .sketch-thumb-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-2);
+  }
+  .sketch-thumb-name.is-current {
+    color: var(--accent-ink);
+  }
+  .sketch-thumb-time {
+    flex: none;
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+  .sketch-add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    flex: none;
+    width: 128px;
+    aspect-ratio: 16 / 9;
+    font: inherit;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-2);
+    background: transparent;
+    border: 1px dashed var(--line-strong);
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+  }
+  .sketch-add:hover:not(:disabled) {
+    background: var(--fill-rest);
+    color: var(--ink-1);
+  }
+  .sketch-add:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: default;
+  }
+  .sketch-add-icon svg {
+    width: 16px;
+    height: 16px;
+    color: var(--ink-3);
+  }
+
+  /* ---- the tool footer (SB2) ------------------------------------------- */
+  .sketch-footer {
+    container: sketch-footer / inline-size;
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-7);
+    height: var(--tool-footer-h);
+    padding: 0 var(--space-5);
+    background: var(--surface-panel);
+    border-top: 1px solid var(--line);
+  }
+  .sketch-tools {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: 0;
+    overflow: hidden;
+  }
+  .sketch-tool {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex: none;
+    height: var(--control-h);
+    padding: 0 var(--space-4);
+    font: inherit;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-2);
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+  }
+  .sketch-tool:hover:not(:disabled) {
+    background: var(--fill-rest);
+    color: var(--ink-1);
+  }
+  .sketch-tool:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: default;
+  }
+  .sketch-tool:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+  .sketch-tool.is-armed {
+    background: var(--accent-soft);
+    color: var(--accent-ink);
+  }
+  .sketch-tool-icon {
+    display: inline-flex;
+  }
+  .sketch-tool-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-tool-key {
+    font-family: var(--font-numeric);
+    font-size: var(--type-micro);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+  .sketch-tool.is-armed .sketch-tool-key {
+    color: color-mix(in srgb, var(--accent-ink) 70%, transparent);
+  }
+
+  /* A NARROW FOOTER: the tools keep their icons, names and titles and drop
+     their words and keys, so all six and the zoom stay in the row. */
+  @container sketch-footer (width < 720px) {
+    .sketch-tool-label,
+    .sketch-tool-key {
+      display: none;
+    }
+    .sketch-tool {
+      padding: 0 var(--space-3);
+    }
+  }
+  .sketch-zoom-value {
+    width: 52px;
+    text-align: center;
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-1);
+  }
+  .sketch-fit {
+    height: var(--control-h);
+    padding: 0 var(--space-5);
+    font: inherit;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-2);
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+  }
+  .sketch-fit:hover {
+    background: var(--fill-rest);
+    color: var(--ink-1);
+  }
+  .sketch-fit:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  /* ---- the pickers (SB4): the popover recipe, 360 wide ----------------- */
+  .sketch-picker {
+    width: 360px;
+    box-shadow: var(--shadow-float);
+  }
+  .sketch-picker-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+    padding: var(--space-6);
+  }
+  .sketch-picker-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 20px;
+  }
+  .sketch-picker-title {
+    margin: 0;
+    font-size: var(--type-lg);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--ink-1);
+  }
+  .sketch-picker-search {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    height: var(--control-h);
+    padding: 0 var(--space-4);
+    color: var(--ink-3);
+    background: var(--fill-rest);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--field-radius);
+  }
+  .sketch-picker-search:focus-within {
+    border-color: var(--accent);
+  }
+  .sketch-picker-search svg {
+    flex: none;
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-picker-search input {
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    font: inherit;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-1);
+    background: transparent;
+    border: 0;
+    outline: none;
+  }
+  .sketch-picker-count {
+    font-family: var(--font-numeric);
+    font-size: var(--type-sm);
+    color: var(--ink-3);
+  }
+  .sketch-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-4);
+    max-height: 240px;
+    overflow-y: auto;
+  }
+  .sketch-picker-tile {
+    display: block;
+    aspect-ratio: 106 / 55;
+    padding: 0;
+    overflow: hidden;
+    background: var(--surface-secondary);
+    border: 0;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+  .sketch-picker-tile:hover {
+    box-shadow: 0 0 0 1px var(--line-strong);
+  }
+  .sketch-picker-tile:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+  .sketch-picker-tile > img,
+  .sketch-picker-media {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .sketch-picker-none {
+    margin: 0;
+    font-size: var(--type-md);
+    line-height: var(--leading-sm);
+    color: var(--ink-3);
+  }
+  .sketch-picker-foot {
+    display: flex;
+    align-items: center;
+    gap: var(--space-5);
+    padding-top: var(--space-5);
+    border-top: 1px solid var(--line);
+  }
+  .sketch-picker-foot.is-split {
+    justify-content: space-between;
+  }
+  .sketch-picker-foot .btn svg {
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-picker-hint {
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+  .sketch-picker-browse {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .sketch-picker-browse svg {
+    width: 16px;
+    height: 16px;
+  }
+  /* THE COMPONENT PICKER'S FOUR SECTIONS SCROLL AS ONE: four lists that each
+     scrolled on their own made a popover taller than a laptop window. */
+  .sketch-picker-sections {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+    max-height: 360px;
+    overflow-y: auto;
+  }
+  .sketch-picker-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .sketch-picker-section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 20px;
+  }
+  /* A built-in group's name (Effects, Particles, Paper, Primitives). */
+  .sketch-picker-group {
+    margin: var(--space-3) 0 var(--space-1);
+    padding: 0 var(--space-3);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-3);
+  }
+  .sketch-picker-rows {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sketch-picker-row-main {
+    display: flex;
+    align-items: center;
+    gap: var(--space-5);
+    width: 100%;
+    height: var(--button-h);
+    padding: 0 var(--space-3);
+    font: inherit;
+    text-align: left;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+  .sketch-picker-row-main:hover:not(:disabled, [aria-disabled="true"]) {
+    background: var(--fill-rest);
+  }
+  .sketch-picker-row-main:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+  /* A refused row (a dom component) stays pressable, so a press says why. */
+  .sketch-picker-row-main:disabled,
+  .sketch-picker-row-main[aria-disabled="true"] {
+    opacity: var(--opacity-disabled);
+    cursor: default;
+  }
+  .sketch-picker-thumb {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 40px;
+    height: 24px;
+    overflow: hidden;
+    color: var(--ink-3);
+    background: var(--surface-secondary);
+    border-radius: var(--radius-xs);
+  }
+  .sketch-picker-thumb svg {
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-picker-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .sketch-picker-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+  }
+  /* Where a workspace component lives: its file, or its home Project. */
+  .sketch-picker-where {
+    flex: none;
+    max-width: 96px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+  .sketch-picker-kind {
+    display: flex;
+    justify-content: flex-end;
+    width: 48px;
+  }
+  .sketch-picker-add {
+    display: grid;
+    place-items: center;
+    width: var(--control-h);
+    height: var(--control-h);
+    color: var(--ink-2);
+  }
+  .sketch-picker-add svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* ---- the item inspector (SB3, SB5) ------------------------------------ */
+  .sketch-inspector {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    background: var(--surface-panel);
+  }
+  .sketch-inspector-icon {
+    display: inline-flex;
+    color: var(--ink-2);
+  }
+  .sketch-inspector-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+  .sketch-inspector-title {
+    flex: 1;
+    min-width: 0;
+    margin: 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);
+  }
+  .sketch-inspector-playing {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    height: var(--panel-head-h);
+    padding: 0 var(--space-7);
+    background: var(--success-wash);
+    border-bottom: 1px solid var(--line);
+  }
+  .sketch-inspector-playing-word {
+    flex: 1;
+    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(--success);
+  }
+  .sketch-inspector-meta {
+    font-family: var(--font-numeric);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+  /* The body is the Studio inspector's: its sections pad themselves and draw
+     the hairline between them, so the scroller adds neither, and it holds its
+     gutter so a body that grows past the fold does not narrow every row. */
+  .sketch-inspector-body {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+  .sketch-preview {
+    width: 100%;
+    max-height: 200px;
+    overflow: hidden;
+    background: var(--sketch-paper);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+  }
+  .sketch-preview > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .sketch-door svg {
+    width: 16px;
+    height: 16px;
+    color: var(--ink-2);
+  }
+  .sketch-align {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-3);
+  }
+  .sketch-stage-list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sketch-stage-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    height: var(--row-h);
+  }
+  .sketch-stage-row .sketch-stage-dot {
+    background: var(--line-strong);
+  }
+  .sketch-stage-row.is-moving .sketch-stage-dot {
+    background: var(--success);
+  }
+  .sketch-stage-name {
+    flex: 1;
+    min-width: 0;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+  .sketch-stage-row.is-moving .sketch-stage-name {
+    color: var(--ink-1);
+  }
+}