/* The builder page (builder.html, assets/builder.js). Three panes on a wide
   screen: assets and layers, the canvas, the inspector. On a phone the panes
   take turns behind a tab row. The canvas pans and zooms over every frame,
   and each frame is a separate page (assets/builder-frame.html). This is site
   chrome, styled from the system's tokens like the rest of the docs; the page
   is marked data-theme-fixed, so a theme tried in Configure reaches the frames
   and not these tools. */

.page-app .site-footer,
.page-app .wordmark-note {
  display: none;
}

/* The toolbar lives in the site header on a wide screen. */
.header-app {
  flex: 1;
  min-width: 0;
  margin-left: var(--dt-space-inline-md);
}

.site-header .bd-toolbar {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  padding: 0;
  overflow-x: auto;
  border: 0;
  background: transparent;
  scrollbar-width: none;
}

.site-header .bd-toolbar::-webkit-scrollbar {
  display: none;
}

.page-app .layout {
  grid-template-columns: minmax(0, 1fr);
}

.page-app .layout > .sidebar {
  display: none;
}

.main.app {
  max-width: none;
  padding: 0;
}

/* The builder is an app: the page itself never scrolls. Its header (the
   site's, or the app head on a phone) takes what it needs and the builder
   fills the rest, so there's nothing below to scroll into. The body is
   pinned to the viewport so a touch can't drag the page either. The site's
   floating menu button and the room kept for it go too. */
body.page-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  height: var(--bd-vh, 100dvh);
  overflow: hidden;
  padding-bottom: 0;
  overscroll-behavior: none;
}

/* The height comes down the tree as flex, never as a percentage: a
   percentage of a grid row or a flex item resolves to the content's height
   in some browsers, which left the panels as tall as what's in them and the
   page scrolling under the top bar. */
.page-app .layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.page-app .main.app,
.page-app .main.app > .doc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: hidden;
}

.page-app .fab {
  display: none;
}

.builder {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Fields sit darker than the panel they're on in light chrome, and lighter
   in dark, where the darkest surface is black and a field there reads as a
   hole. --dt-input-bg follows, for the inputs that read it. */
.page-app {
  /* The canvas's selection colour: outlines, handles, guides and the tag
     over what's picked. One fixed hue, clear on a white frame and on the
     dark canvas alike; the chrome takes no theme, so it stays put. */
  --bd-select: var(--dt-color-cyan-500);
  /* Guides dragged from the rulers, as design tools draw them. */
  --bd-guide: var(--dt-color-red-500);
  --bd-select-ink: var(--dt-color-white);
  /* Components, in Layers and on the canvas. */
  --bd-component: var(--dt-color-violet-600);
  --bd-field: var(--dt-surface-sunken);
  --bd-field-on: var(--dt-surface-raised);
}

:root.dark .page-app {
  --bd-component: var(--dt-color-violet-300);
  --bd-field: var(--dt-surface-overlay);
  --bd-field-on: color-mix(in oklab, var(--dt-surface-overlay) 80%, var(--dt-text-primary));
  --dt-input-bg: var(--bd-field);
}

.builder-loading,
.builder-noscript {
  padding: var(--dt-space-inset-lg);
}

.bd-ic {
  flex: none;
  width: var(--dt-size-icon-sm);
  height: var(--dt-size-icon-sm);
}

kbd {
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 0.7rem);
  opacity: 0.7;
}

/* ------------------------------------------------------------- the shell */

.bd-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr) 304px;
}

.bd-left,
.bd-right {
  min-height: 0;
  background: var(--dt-surface-subtle);
}

/* The left panel: an icon rail down its edge, and what the rail picked. */
.bd-left {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  overflow: hidden;
  border-right: var(--dt-border-width-default) solid var(--dt-border-default);
}

.bd-left-body {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bd-left-tabs.bd-rail {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  padding: var(--dt-space-inset-xs);
  border-right: var(--dt-border-width-default) solid var(--dt-border-default);
  border-bottom: 0;
  background: var(--dt-surface-base);
}

.bd-rail .bd-tab {
  flex: none;
  flex-direction: column;
  gap: 2px;
  width: calc(var(--dt-size-control-lg) + var(--dt-space-inset-xs));
  min-height: calc(var(--dt-size-control-lg) + var(--dt-space-inset-xs));
  padding: var(--dt-space-inset-2xs) 0;
  font-size: var(--dt-font-size-2xs);
  line-height: 1.2;
}

.bd-rail .bd-tab .bd-ic {
  width: var(--dt-size-icon-md);
  height: var(--dt-size-icon-md);
}

.bd-rail .bd-tab[aria-selected="true"] {
  background: var(--dt-surface-selected);
  box-shadow: none;
  color: var(--dt-text-on-selected);
}

.bd-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md) var(--dt-space-inset-xs);
}

.bd-panel-title {
  margin: 0;
  font-size: var(--dt-font-size-md);
  font-weight: var(--dt-font-weight-semibold);
}

/* Every left panel opens on the same bar as the Agent panel. */
.bd-panel-top {
  flex: none;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  min-height: 49px;
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-panel-top .bd-panel-title { font-size: var(--dt-font-size-sm); line-height: 24px; }

/* Configure, held in the panel on this page instead of floating over it. */
.bd-config-dock {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.configure-sheet.is-docked {
  position: static;
  flex: 1;
  width: auto;
  max-width: none;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.configure-sheet.is-docked .configure-body {
  --configure-inset: var(--dt-space-inset-md);
}

.configure-sheet.is-docked .configure-bar-top {
  background: var(--dt-surface-subtle);
}

.configure-round-gap {
  display: block;
}

/* The floating Configure button has nothing to open on this page. */
html.bd-configure-docked .configure-bar,
html.bd-configure-docked .configure-open-btn {
  display: none;
}

.bd-right {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room under the last control for the site's floating Configure button. */
  padding-bottom: var(--dt-dim-24);
  border-left: var(--dt-border-width-default) solid var(--dt-border-default);
}

.bd-center {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Tab, or the panels button, gives the canvas the whole width. */
.bd-shell.is-bare {
  grid-template-columns: minmax(0, 1fr);
}

.bd-shell > aside[hidden] {
  display: none;
}

/* --------------------------------------------------------------- tabs */

.bd-tabs {
  display: none;
}

.bd-left-tabs {
  display: flex;
  gap: var(--dt-space-inline-2xs);
  padding: var(--dt-space-inset-xs);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-default);
}

.bd-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-space-inline-2xs);
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-sm);
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-secondary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
  cursor: pointer;
}

.bd-tab:hover {
  color: var(--dt-text-primary);
}

.bd-tab[aria-selected="true"] {
  background: var(--dt-surface-base);
  color: var(--dt-text-primary);
  box-shadow: var(--dt-elevation-1);
}

.bd-tab-note {
  min-width: 0;
  overflow: hidden;
  color: var(--dt-text-tertiary);
  font-weight: var(--dt-font-weight-regular);
  text-overflow: ellipsis;
}

.bd-tabs .bd-tab {
  min-width: 0;
  white-space: nowrap;
}

/* ------------------------------------------------------------ controls */

.bd-btn,
.bd-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-space-inline-2xs);
  min-height: var(--dt-size-control-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-base);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  text-decoration: none;
  cursor: pointer;
}

.bd-btn {
  padding: 0 var(--dt-space-inset-sm);
}

.bd-act {
  min-width: var(--dt-size-control-sm);
  padding: 0;
}

.bd-btn:hover,
.bd-act:hover:not(:disabled) {
  border-color: var(--dt-border-default);
  background: var(--dt-surface-raised);
}

.bd-act[aria-pressed="true"] {
  background: var(--dt-surface-selected);
  border-color: var(--dt-surface-selected);
  color: var(--dt-text-on-selected);
}

.bd-btn-primary,
.bd-btn-primary:hover {
  background: var(--dt-surface-action);
  border-color: var(--dt-surface-action);
  color: var(--dt-text-on-action);
}

.bd-btn:disabled,
.bd-act:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bd-act-danger:hover:not(:disabled) {
  color: var(--dt-text-danger);
  border-color: var(--dt-border-danger);
}

/* Segmented: one pressed, icons where a picture says it. */
.bd-seg {
  position: relative;
  display: inline-flex;
  padding: 2px;
  touch-action: pan-y;
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
}

.bd-seg-wide {
  display: flex;
}

.bd-seg-wide .bd-seg-btn {
  flex: 1;
}

.bd-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-space-inline-2xs);
  min-width: calc(var(--dt-size-control-sm) - 4px);
  min-height: calc(var(--dt-size-control-sm) - 4px);
  padding: 0 var(--dt-space-inset-xs);
  border: 0;
  border-radius: calc(var(--dt-radius-control) - 2px);
  background: transparent;
  color: var(--dt-text-secondary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  white-space: nowrap;
  cursor: pointer;
}

.bd-seg-btn:hover {
  color: var(--dt-text-primary);
}

.bd-seg-btn[aria-pressed="true"] {
  background: var(--bd-field-on);
  color: var(--dt-text-primary);
  box-shadow: var(--dt-elevation-1);
}

/* The sliding thumb behind the pressed choice, in segmented rows and the
   inspector's tabs. Once it is measured the pressed button stops drawing its
   own fill. */
.bd-seg-thumb {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: calc(var(--dt-radius-control) - 2px);
  background: var(--bd-field-on);
  box-shadow: var(--dt-elevation-1);
  pointer-events: none;
}

.bd-seg > .bd-seg-btn {
  position: relative;
  z-index: 1;
}

.bd-seg.is-sliding > .bd-seg-btn[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
}

.bd-seg.is-dragging {
  cursor: grabbing;
}

.bd-seg.is-dragging > .bd-seg-btn {
  cursor: inherit;
}

.bd-switch {
  position: relative;
  flex: none;
  width: calc(var(--dt-size-control-sm) + 4px);
  height: calc(var(--dt-size-control-xs) - 4px);
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-border-strong);
  cursor: pointer;
}

.bd-switch[aria-checked="true"] {
  background: var(--dt-surface-action);
}

.bd-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--dt-size-control-xs) - 8px);
  height: calc(var(--dt-size-control-xs) - 8px);
  border-radius: 50%;
  background: var(--dt-surface-base);
  box-shadow: var(--dt-elevation-1);
}

.bd-switch[aria-checked="true"] .bd-switch-knob {
  left: auto;
  right: 2px;
}

.bd-input,
.bd-search input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--dt-input-bg);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
}

.bd-search {
  position: relative;
  display: block;
  margin: var(--dt-space-inset-sm);
}

.bd-search .bd-ic {
  position: absolute;
  top: 50%;
  left: var(--dt-space-inset-xs);
  color: var(--dt-text-tertiary);
  transform: translateY(-50%);
  pointer-events: none;
}

.bd-search input {
  padding-right: var(--dt-size-control-sm);
  padding-left: calc(var(--dt-space-inset-xs) + var(--dt-size-icon-sm) + var(--dt-space-inline-xs));
}

.bd-search input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.bd-search-clear {
  position: absolute;
  top: 50%;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--dt-size-control-sm) - 4px);
  height: calc(var(--dt-size-control-sm) - 4px);
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-tertiary);
  transform: translateY(-50%);
  cursor: pointer;
}

.bd-search-clear:hover {
  background: var(--dt-surface-raised);
  color: var(--dt-text-primary);
}

.bd-search .bd-search-clear .bd-ic {
  position: static;
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
  color: inherit;
  transform: none;
}

/* The dropdown: a button, and a listbox laid over the page. */
.bd-dd {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  width: 100%;
  min-height: var(--dt-size-control-md);
  padding: 0 var(--dt-space-inset-xs) 0 var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--dt-input-bg);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  text-align: left;
  cursor: pointer;
}

.bd-dd:hover {
  border-color: var(--dt-border-strong);
}

.bd-dd[aria-expanded="true"] {
  border-color: var(--dt-focus-ring-color);
}

.bd-dd-compact {
  width: auto;
  min-height: var(--dt-size-control-sm);
  background: var(--dt-surface-base);
  border-color: var(--dt-border-subtle);
}

.bd-dd-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-dd-chev {
  color: var(--dt-text-tertiary);
}

/* Menus, the tool bar and its trays are glass, like the system's own
   overlays (surface="glass-strong"): the canvas shows through, blurred. */
.bd-dd-list {
  position: fixed;
  z-index: var(--dt-z-toast);
  box-sizing: border-box;
  margin: 0;
  padding: var(--dt-space-inset-2xs);
  overflow-y: auto;
  list-style: none;
  border: var(--dt-border-width-default) solid var(--dt-border-glass);
  border-radius: var(--dt-radius-overlay);
  background: var(--dt-surface-glass-strong);
  -webkit-backdrop-filter: var(--dt-backdrop-glass);
  backdrop-filter: var(--dt-backdrop-glass);
  color: var(--dt-text-primary);
  box-shadow: var(--dt-elevation-3);
  font-size: var(--dt-font-size-sm);
}

.bd-dd-list:focus {
  outline: none;
}

.bd-dd-opt {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-height: var(--dt-size-control-md);
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-sm);
  border-radius: var(--dt-radius-control);
  cursor: pointer;
}

.bd-dd-opt.is-active {
  background: var(--dt-surface-raised);
  box-shadow: inset 0 0 0 var(--dt-border-width-default) var(--dt-border-default);
}

.bd-dd-opt.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bd-dd-opt-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.bd-dd-opt-hint {
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 0.7rem);
  overflow-wrap: anywhere;
}

.bd-dd-tick {
  color: var(--dt-text-primary);
}

/* Where a family of options starts: Controls, Layout layers, More sizes. */
/* The right-click menu sits at its point; rows keep their icon column. */
.bd-ctx {
  outline: none;
}

.bd-dd-noicon {
  display: inline-block;
  width: var(--dt-size-icon-md);
  height: var(--dt-size-icon-md);
}

.bd-dd-group {
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-xs) var(--dt-space-inset-2xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: default;
}

.bd-dd-group:not(:first-child) {
  margin-top: var(--dt-space-stack-2xs);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

/* The measured size, first: what it is, then what it's called. */
.bd-dd-px {
  flex: none;
  min-width: 4ch;
  color: var(--dt-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Pin to: nine spots beside the edge-wide choices and the offset. */
.bd-pin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--dt-space-inline-xs);
  margin-top: var(--dt-space-stack-xs);
}

.bd-pin .bd-btn {
  justify-content: flex-start;
}

/* Token previews, drawn with the token. Colour swatches are rounded
   squares, with corners in proportion to the controls around them. */
.bd-sw {
  flex: none;
  width: var(--dt-size-icon-sm);
  height: var(--dt-size-icon-sm);
  border-radius: calc(var(--dt-radius-control) / 2);
  box-shadow: inset 0 0 0 var(--dt-border-width-default) var(--dt-border-strong);
}

.bd-pv-radius {
  flex: none;
  width: var(--dt-size-icon-sm);
  height: var(--dt-size-icon-sm);
  border-top: var(--dt-border-width-strong) solid var(--dt-text-secondary);
  border-left: var(--dt-border-width-strong) solid var(--dt-text-secondary);
}

/* Picture tiles for props: pictures alone, all on one row where they fit.
   The chosen one's name follows the field's label; the one under the
   pointer is named there instead, in the selection colour. */
.bd-seg.bd-seg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  gap: 2px;
}

.bd-seg.bd-seg-tiles .bd-seg-btn {
  min-width: 0;
  min-height: 0;
  padding: 6px 0;
}

.bd-field-head {
  display: flex;
  align-items: baseline;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
}

.bd-field-val {
  overflow: hidden;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fill swatches in labelled rows: Neutral, Brand, Status. */
.bd-swatch-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px var(--dt-space-inline-xs);
  align-items: center;
}

.bd-swatch-group {
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 0.7rem);
  font-weight: var(--dt-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bd-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 3px;
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
}

.bd-swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  box-shadow: inset 0 0 0 var(--dt-border-width-default) color-mix(in oklab, currentColor 18%, transparent);
  font: inherit;
  font-size: 11px;
  font-weight: var(--dt-font-weight-semibold);
  cursor: pointer;
}

.bd-swatch.is-none {
  background: transparent;
  color: var(--dt-text-tertiary);
  box-shadow: inset 0 0 0 var(--dt-border-width-default) var(--dt-border-default);
}

.bd-swatch.is-none::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
}

.bd-swatch[aria-pressed="true"] {
  outline: 2px solid var(--bd-select);
  outline-offset: 1px;
}

.bd-swatch:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 2px;
}

.bd-swatch-tokens {
  min-height: 1.4em;
  overflow: hidden;
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 0.7rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two actions in a section's head: the eyedropper and the moon. */
.bd-sec-acts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.bd-sec-acts .bd-canvas-custom:not(.is-on) {
  border-color: transparent;
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .bd-swatch {
    transition: transform var(--dt-motion-micro);
  }

  .bd-swatch:hover {
    transform: scale(1.08);
  }
}

.bd-field-val.is-preview {
  color: color-mix(in oklab, var(--bd-select) 75%, var(--dt-text-primary));
  font-style: italic;
}

.bd-pv-fit,
.bd-pv-ratio-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
}

/* Square, so a wide photo shows the difference between the fits. */
.bd-pv-fit {
  width: 22px;
  height: 22px;
}

.bd-pv-fit {
  overflow: hidden;
  border: var(--dt-border-width-default) solid var(--dt-text-tertiary);
  border-radius: 2px;
  background: var(--bd-field);
}

.bd-pv-fit img {
  display: block;
  width: 100%;
  height: 100%;
}

.bd-pv-ratio {
  box-sizing: border-box;
  border: var(--dt-border-width-strong) solid currentColor;
  border-radius: 2px;
}

.bd-pv-corner {
  width: 20px;
  height: 20px;
  border-top: var(--dt-border-width-strong) solid currentColor;
  border-left: var(--dt-border-width-strong) solid currentColor;
}

.bd-pv-shadow {
  flex: none;
  width: var(--dt-size-icon-sm);
  height: var(--dt-size-icon-sm);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-raised);
}

.bd-pv-space {
  display: inline-flex;
  flex: none;
  align-items: center;
  width: var(--dt-size-icon-lg);
}

.bd-pv-space > span {
  max-width: var(--dt-size-icon-lg);
  height: 6px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-text-secondary);
}

.bd-btn:focus-visible,
.bd-act:focus-visible,
.bd-tab:focus-visible,
.bd-seg-btn:focus-visible,
.bd-switch:focus-visible,
.bd-dd:focus-visible,
.bd-cat:focus-visible,
.bd-tile:focus-visible,
.bd-layer-main:focus-visible,
.bd-layer-twisty:focus-visible,
.bd-crumb:focus-visible,
.bd-input:focus-visible,
.bd-search input:focus-visible,
.bd-search-clear:focus-visible,
.bd-num input:focus-visible,
.bd-flabel-btn:focus-visible,
.bd-float:focus-visible,
.bd-code-pre:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

/* Inspector fields: filled, borderless until hovered or focused, with a
   short label inside where a picture or a letter says enough. */
.bd-right .bd-dd,
.bd-right .bd-input,
.bd-right .bd-num {
  border-color: transparent;
  background: var(--bd-field);
}

.bd-right .bd-dd:hover,
.bd-right .bd-input:hover,
.bd-right .bd-num:hover {
  border-color: var(--dt-border-default);
}

.bd-right .bd-dd[aria-expanded="true"],
.bd-right .bd-input:focus {
  border-color: var(--dt-border-strong);
}

/* Opacity in a free frame: a slider, and the percent beside it. */
.bd-opacity {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
}

.bd-opacity-range {
  flex: 1;
  min-width: 0;
  margin: 0;
  accent-color: var(--dt-text-primary);
}

.bd-opacity-range:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

.bd-num.bd-opacity-num {
  flex: none;
  width: calc(var(--dt-size-control-md) * 1.75);
}

.bd-opacity-num input {
  padding: 0 0 0 var(--dt-space-inset-xs);
  text-align: right;
}

.bd-opacity-unit {
  width: 1.5em;
}

.bd-num:focus-within {
  border-color: var(--dt-focus-ring-color);
}

.bd-dd-prefix {
  flex: none;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
  white-space: nowrap;
}

.bd-dd-field .bd-dd-prefix {
  min-width: 1.25em;
}

.bd-dd-icon.bd-dd {
  width: var(--dt-size-control-sm);
  min-width: var(--dt-size-control-sm);
  justify-content: center;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.bd-right .bd-dd-icon.bd-dd {
  background: transparent;
}

.bd-dd-icon.bd-dd:hover,
.bd-right .bd-dd-icon.bd-dd:hover {
  background: var(--dt-surface-raised);
}

.bd-dd-icon .bd-dd-chev {
  display: none;
}

.bd-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dt-space-inline-2xs);
}

.bd-btn-sm {
  min-height: calc(var(--dt-size-control-sm) - 4px);
  padding: 0 var(--dt-space-inset-xs);
  font-size: var(--dt-font-size-xs);
}

.bd-btn[aria-pressed="true"] {
  border-color: var(--dt-surface-selected);
  background: var(--dt-surface-selected);
  color: var(--dt-text-on-selected);
}

.bd-act-ghost {
  border-color: transparent;
  background: transparent;
}

/* Pictures in a segmented row: corner radii, shadows. */
.bd-seg-pics .bd-seg-btn {
  min-width: 0;
  padding: 0;
}

.bd-seg-btn .bd-pv-radius,
.bd-seg-btn .bd-pv-shadow {
  width: var(--dt-size-icon-sm);
  height: var(--dt-size-icon-sm);
}

.bd-seg-btn .bd-pv-shadow {
  border-radius: 3px;
  background: var(--dt-surface-base);
  outline: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

/* The box model: margin around padding around the item. */
.bd-box {
  font-size: var(--dt-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.bd-box-ring {
  position: relative;
  display: grid;
  grid-template-columns: minmax(2.75rem, 1fr) minmax(0, 2.4fr) minmax(2.75rem, 1fr);
  grid-template-areas: ". top ." "left mid right" ". bottom .";
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--dt-radius-control);
}

.bd-box-m {
  background: var(--dt-surface-sunken);
  border: var(--dt-border-width-default) dashed var(--dt-border-default);
}

.bd-box-p {
  grid-area: mid;
  background: var(--dt-surface-base);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
}

.bd-box-core {
  grid-area: mid;
  min-height: 18px;
  border-radius: 2px;
  background: var(--dt-surface-sunken);
  box-shadow: inset 0 0 0 var(--dt-border-width-default) var(--dt-border-subtle);
}

.bd-box-cell {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.bd-box-cell.is-top { grid-area: top; }
.bd-box-cell.is-right { grid-area: right; }
.bd-box-cell.is-bottom { grid-area: bottom; }
.bd-box-cell.is-left { grid-area: left; }

.bd-right .bd-box .bd-dd {
  width: auto;
  min-width: 0;
  min-height: 22px;
  justify-content: center;
  padding: 0 4px;
  border-color: transparent;
  background: transparent;
  font-size: var(--dt-font-size-xs);
}

.bd-right .bd-box .bd-dd:hover {
  background: var(--dt-surface-raised);
}

.bd-box .bd-dd-chev {
  display: none;
}

.bd-box .bd-dd-label {
  flex: none;
}

.bd-box-val.is-inherited .bd-dd-label {
  color: var(--dt-text-tertiary);
}

/* A side steps through the spacing when dragged sideways. */
.bd-box .bd-box-val {
  cursor: ew-resize;
  touch-action: none;
}

.bd-right .bd-box .bd-box-all {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  padding-left: 2px;
}

/* Every side at once: a small icon in the ring's corner, no words. */
.bd-right .bd-box .bd-box-all {
  min-height: 0;
  padding: 2px;
  color: var(--dt-text-tertiary);
}

.bd-box-all .bd-ic {
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
}

.bd-box-all .bd-dd-chev {
  display: none;
}

.bd-box-all .bd-dd-label:empty {
  display: none;
}

/* Flex layout: direction and wrap, then the alignment pad beside the gap. */
.bd-flex-head {
  display: flex;
  gap: var(--dt-space-inline-2xs);
  margin-top: var(--dt-space-stack-xs);
}

.bd-flex-head .bd-seg {
  flex: 1;
}

.bd-flex-head .bd-seg .bd-seg-btn {
  flex: 1;
}

.bd-flex-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--dt-space-inline-xs);
  margin-top: var(--dt-space-stack-xs);
}

.bd-flex-side {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  min-width: 0;
}

/* The alignment grid, with the direction and wrap beside it. */
.bd-flex-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--dt-space-inline-xs);
  align-items: start;
  margin-top: var(--dt-space-stack-xs);
}

.bd-flex-top-side {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  min-width: 0;
}

.bd-flex-top-side .bd-seg .bd-seg-btn {
  flex: 1;
}

/* The row and column toggle with wrap beside it, as one group. */
.bd-flex-dir {
  display: flex;
  gap: 2px;
  min-width: 0;
}

.bd-flex-dir .bd-seg {
  flex: 1;
  min-width: 0;
}

.bd-flex-dir .bd-seg .bd-seg-btn {
  flex: 1;
}

.bd-flex-wrap {
  flex: none;
}

.bd-flex-top-side .bd-flex-pair {
  margin-top: 0;
}

/* Beside the grid the fields are narrow: they drop their chevrons to
   keep the value in view. */
.bd-flex-top-side .bd-dd-chev {
  display: none;
}

.bd-flex-top-side .bd-dd {
  padding-inline: var(--dt-space-inset-xs);
}

/* Two fields or two buttons sharing a row. */
.bd-flex-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--dt-space-inline-2xs);
  margin-top: var(--dt-space-stack-2xs);
}

.bd-flex-pair > :only-child {
  grid-column: 1 / -1;
}

.bd-flex-pair > *,
.bd-flex-top-side > * {
  min-width: 0;
}

.bd-flex-pair .bd-btn,
.bd-flex-top-side .bd-btn {
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}

/* Secondary buttons in the inspector are outlined, not filled; pressed,
   they take the selection's colour as their outline and text. */
.bd-right .bd-btn:not(.bd-btn-primary) {
  border-color: var(--dt-border-default);
  background: transparent;
}

.bd-right .bd-btn:not(.bd-btn-primary):hover {
  border-color: var(--dt-border-strong);
  background: transparent;
}

.bd-right .bd-btn:not(.bd-btn-primary)[aria-pressed="true"] {
  border-color: var(--bd-select);
  background: transparent;
  color: var(--dt-text-primary);
  box-shadow: inset 0 0 0 var(--dt-border-width-default) var(--bd-select);
}

.bd-mx {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  grid-template-rows: repeat(3, 26px);
  gap: 2px;
  padding: 4px;
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
}

.bd-mx-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.bd-mx-cell:hover {
  background: var(--dt-surface-raised);
}

.bd-mx-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dt-border-strong);
}

.bd-mx-cell[aria-pressed="true"] .bd-mx-dot {
  border-radius: 1px;
  background: var(--dt-text-primary);
}

.bd-mx.is-row .bd-mx-cell[aria-pressed="true"] .bd-mx-dot {
  width: 4px;
  height: 14px;
}

.bd-mx.is-column .bd-mx-cell[aria-pressed="true"] .bd-mx-dot {
  width: 14px;
  height: 4px;
}

.bd-mx-cell:focus-visible,
.bd-tool:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 1px;
}

/* --------------------------------------------------------------- assets */

.bd-assets,
.bd-layers-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* Categories: one at a time, each named, the current one filled. */
.bd-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
  padding: 0 var(--dt-space-inset-sm) var(--dt-space-inset-2xs);
}

.bd-cats.is-muted .bd-cat[aria-pressed="false"] {
  opacity: 0.7;
}

.bd-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: calc(var(--dt-size-control-sm) - 4px);
  padding: 0 var(--dt-space-inset-xs) 0 6px;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface-base);
  color: var(--dt-text-secondary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.bd-cat .bd-ic {
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
}

.bd-cat:hover {
  border-color: var(--dt-border-strong);
  color: var(--dt-text-primary);
}

.bd-cat[aria-pressed="true"] {
  border-color: var(--dt-surface-inverse);
  background: var(--dt-surface-inverse);
  color: var(--dt-text-inverse);
}

.bd-assets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-sm) var(--dt-space-inset-xs);
}

.bd-assets-title {
  display: inline-flex;
  align-items: baseline;
  gap: var(--dt-space-inline-xs);
  margin: 0;
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-semibold);
}

.bd-count {
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-regular);
}

.bd-tiles {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 var(--dt-space-inset-sm) var(--dt-space-inset-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.bd-tiles.is-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  gap: var(--dt-space-inline-xs);
}

/* The list is one column of the same tiles, the picture over the words.
   Every tile is already one height (fixed picture, one-line name, a
   two-line blurb), so the rows hug them rather than share out the panel. */
.bd-tiles.is-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  align-content: start;
  gap: var(--dt-space-stack-xs);
}

.bd-tiles > li {
  display: flex;
  min-width: 0;
}

/* A tile: a white rounded card on the panel's tint, its picture inset at
   the top and its name centred under it. */
.bd-tile {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  width: 100%;
  height: 100%;
  padding: var(--dt-space-inset-2xs);
  overflow: hidden;
  border: var(--dt-border-width-default) solid transparent;
  border-radius: var(--dt-radius-container);
  background: var(--dt-surface-base);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--dt-color-neutral-950) 6%, transparent);
  color: var(--dt-text-primary);
  font: inherit;
  text-align: left;
  cursor: grab;
  /* Vertical swipes scroll the list; a sideways drag picks the tile up. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.bd-tile:hover {
  border-color: var(--dt-border-default);
}

.bd-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--dt-radius-container) - 4px);
  background: var(--dt-surface-subtle);
  pointer-events: none;
}

/* A primitive is its icon, with no preview behind it. */
.bd-thumb.is-icon {
  aspect-ratio: auto;
  height: var(--dt-size-control-md);
  background: none;
}

.bd-thumb.is-icon .bd-thumb-ic {
  width: var(--dt-size-icon-lg);
  height: var(--dt-size-icon-lg);
  color: var(--dt-text-primary);
}

.bd-thumb-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.bd-thumb-ic {
  width: var(--dt-size-icon-xl);
  height: var(--dt-size-icon-xl);
  color: var(--dt-text-tertiary);
}

.bd-tile-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 0 var(--dt-space-inset-2xs) var(--dt-space-inset-2xs);
  text-align: center;
}

.bd-tile-name {
  overflow: hidden;
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-tile-blurb {
  display: -webkit-box;
  min-height: calc(var(--dt-text-body-xs-line) * 2);
  overflow: hidden;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  line-height: var(--dt-text-body-xs-line);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bd-tile .bd-thumb {
  flex: none;
}

.bd-tile-text {
  flex: 1;
}

.bd-tiles.is-list .bd-thumb {
  aspect-ratio: 16 / 7;
}

.bd-tiles.is-list .bd-thumb.is-icon {
  aspect-ratio: auto;
}

.bd-tiles.is-list .bd-tile-text {
  text-align: left;
}



.bd-tip,
.bd-empty-note {
  margin: var(--dt-space-stack-xs) var(--dt-space-inset-sm);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
  line-height: var(--dt-text-body-xs-line);
}

/* --------------------------------------------------------------- layers */

.bd-layers {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0 var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bd-layer {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--dt-size-control-sm);
  border-radius: var(--dt-radius-control);
  color: var(--dt-text-primary);
}

.bd-layer.is-hover {
  background: var(--dt-surface-raised);
}

.bd-layer.is-current {
  background: var(--dt-surface-selected);
  color: var(--dt-text-on-selected);
}

.bd-layer.is-drop-inside {
  box-shadow: inset 0 0 0 var(--dt-border-width-strong) var(--dt-text-primary);
}

.bd-layer-twisty {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dt-size-control-xs);
  height: var(--dt-size-control-xs);
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}

button.bd-layer-twisty.is-open .bd-ic {
  transform: rotate(90deg);
}

/* A layer that folds shows its twisty on hover or focus, and always on a
   touch screen. */
button.bd-layer-twisty {
  opacity: 0;
  transition: opacity var(--dt-motion-micro);
}

.bd-layer:hover button.bd-layer-twisty,
.bd-layer:focus-within button.bd-layer-twisty,
button.bd-layer-twisty:focus-visible {
  opacity: 0.6;
}

@media (hover: none) {
  button.bd-layer-twisty {
    opacity: 0.6;
  }
}

.bd-layer-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-2xs);
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--dt-font-size-sm);
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.bd-layer-main .bd-ic {
  opacity: 0.7;
}

.bd-layer-name {
  flex: none;
  font-weight: var(--dt-font-weight-medium);
}

/* The eye and lock at the end of a row: shown on hover, or while set. */
.bd-layer-flags {
  display: inline-flex;
  flex: none;
  gap: 1px;
  margin-left: auto;
  padding-right: var(--dt-space-inset-2xs);
  opacity: 0;
}

.bd-layer:hover .bd-layer-flags,
.bd-layer:focus-within .bd-layer-flags,
.bd-layer-flags.is-set {
  opacity: 1;
}

.bd-layer-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dt-size-control-xs);
  height: var(--dt-size-control-xs);
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-tertiary);
  cursor: pointer;
}

.bd-layer-flag:hover,
.bd-layer-flag.is-on {
  color: var(--dt-text-primary);
}

.bd-layer-flag .bd-ic {
  width: var(--dt-size-icon-sm);
  height: var(--dt-size-icon-sm);
}

.bd-layer.is-hidden .bd-layer-main {
  opacity: 0.45;
}

.bd-mark-sel.is-locked {
  outline-style: dashed;
}

/* A component, the system's or one of the file's own: its own colour in
   Layers and on the canvas, outline, handles and tag, so it reads apart
   from groups, text and shapes. */
.bd-mark-sel.is-component {
  --bd-select: var(--bd-component);
}

.bd-layer.is-component .bd-layer-main > .bd-ic:first-child,
.bd-layer.is-component .bd-layer-name {
  color: var(--bd-component);
}

.bd-inst {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  margin-top: var(--dt-space-stack-2xs);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  line-height: var(--dt-text-body-xs-line);
}

.bd-inst > .bd-ic {
  flex: none;
  color: var(--dt-text-brand);
}

.bd-inst.is-lost > .bd-ic {
  color: var(--dt-text-secondary);
}

.bd-inst-text {
  flex: 1;
  min-width: 0;
}

.bd-inst-update {
  flex: none;
}

.bd-layer-text {
  min-width: 0;
  overflow: hidden;
  opacity: 0.6;
  font-size: var(--dt-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-layer-main:active {
  cursor: grabbing;
}

.bd-layer-frame .bd-layer-name {
  font-weight: var(--dt-font-weight-semibold);
}

.bd-layer-frame:not(.is-active-frame) {
  color: var(--dt-text-secondary);
}

span.bd-layer-twisty.is-open .bd-ic {
  transform: rotate(90deg);
}

.bd-empty-indent {
  margin-left: calc(var(--dt-space-inset-sm) + 28px);
}

.bd-layers-line {
  position: absolute;
  right: var(--dt-space-inset-xs);
  height: 3px;
  margin-top: -1.5px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-text-primary);
  pointer-events: none;
}

/* --------------------------------------------------------------- canvas */

.bd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-default);
  background: var(--dt-surface-base);
}

/* Each end of the bar takes the same room, so the title sits in the
   middle whatever is on either side. */
.bd-tb-side {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
}

.bd-tb-right {
  justify-content: flex-end;
}

.bd-tb-title {
  flex: 0 1 auto;
  justify-content: center;
  max-width: 60%;
}

/* The path in the bar stays on one line; a long name is cut short. */
.bd-crumbs.bd-tb-crumbs {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  font-size: var(--dt-font-size-sm);
}

.bd-tb-crumbs .bd-crumb {
  flex: 0 1 auto;
  overflow: hidden;
  max-width: 12rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--dt-text-secondary);
}

.bd-tb-crumbs .bd-crumb:hover {
  color: var(--dt-text-primary);
}

.bd-tb-crumbs .bd-crumb[aria-current],
.bd-tb-crumbs .bd-project-name {
  color: var(--dt-text-primary);
  font-weight: var(--dt-font-weight-medium);
}

.bd-tb-crumbs .bd-crumb[aria-current] {
  flex-shrink: 0;
}

.bd-tb-crumbs .bd-crumb-sep {
  flex: none;
  padding: 0 2px;
}

/* On a phone the bar is two rows: the project and its path with the
   projects button, then zoom, Play, Preview and Export on their own row.
   The zoom keeps its icon and menu but not its figure. */
@media (max-width: 900px) {
  .bd-tb-left {
    flex: 0 0 auto;
  }

  .bd-tb-title {
    flex: 1 1 0;
    justify-content: flex-start;
    max-width: none;
  }

  .bd-tb-right {
    flex: 1 1 100%;
  }

  .bd-tb-right .bd-zoom .bd-dd-label {
    display: none;
  }

  .bd-tb-crumbs .bd-crumb {
    max-width: 8rem;
  }

  .bd-tb-crumbs .bd-project-name {
    flex-shrink: 3;
  }
}

.bd-saved {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}

.bd-saved.is-error {
  color: var(--dt-text-danger);
}

/* The canvas: an open surface that pans and zooms. The world holds every
   frame at its own size; labels, rings and marks sit over it unscaled. */
.bd-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  background-color: var(--dt-surface-sunken);
  /* A faint grid: there to place things by, not to look at. */
  background-image: radial-gradient(color-mix(in oklab, var(--dt-border-subtle) 45%, transparent) 1px, transparent 1px);
  background-size: var(--dt-space-inset-xl) var(--dt-space-inset-xl);
  cursor: default;
}

.bd-stage.is-panning,
.bd-stage.is-panning .bd-frame {
  cursor: grab;
}

.bd-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.bd-frame {
  position: absolute;
  display: block;
  border: 0;
  background: var(--dt-surface-base);
  box-shadow: var(--dt-elevation-2);
}

/* While a handle or a turn grip is held, the frames let the pointer pass,
   so the move keeps reaching the builder over them. */
.bd-stage.is-sizing .bd-frame,
.bd-stage.is-dragging .bd-frame {
  pointer-events: none;
}

.bd-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bd-flabel {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
  padding-bottom: 6px;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  white-space: nowrap;
  transform: translateY(-100%);
}

.bd-flabel-btn {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--dt-font-weight-medium);
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
}

.bd-flabel-btn:hover,
.bd-flabel.is-current {
  color: var(--dt-text-primary);
}

.bd-flabel input {
  pointer-events: auto;
}

.bd-flabel-size {
  flex: none;
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 0.7rem);
}

.bd-ring {
  position: absolute;
  box-sizing: border-box;
  outline: var(--dt-border-width-default) solid var(--dt-border-strong);
}

.bd-ring.is-selected {
  outline: var(--dt-border-width-default) solid var(--bd-select);
}

/* The tool bar, floating along the canvas's foot: square-ish buttons in a
   softly rounded bar. A group's tray opens above its row, inside the bar. */
.bd-tools {
  position: absolute;
  bottom: var(--dt-space-inset-md);
  left: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  max-width: calc(100% - 16px);
  padding: 6px;
  border: var(--dt-border-width-default) solid var(--dt-border-glass);
  border-radius: var(--dt-radius-container);
  background: var(--dt-surface-glass-strong);
  -webkit-backdrop-filter: var(--dt-backdrop-glass);
  backdrop-filter: var(--dt-backdrop-glass);
  box-shadow: var(--dt-elevation-3);
  transform: translateX(-50%);
}

.bd-tools-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bd-tool {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dt-size-control-lg);
  height: var(--dt-size-control-lg);
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-secondary);
  cursor: pointer;
}

.bd-tool .bd-ic {
  width: var(--dt-size-icon-md);
  height: var(--dt-size-icon-md);
}

.bd-tool:hover {
  background: var(--dt-surface-raised);
  color: var(--dt-text-primary);
}

.bd-tool[aria-pressed="true"] {
  background: var(--dt-surface-selected);
  color: var(--dt-text-on-selected);
}

.bd-tool.is-expanded {
  box-shadow: inset 0 0 0 var(--dt-border-width-strong) var(--dt-text-primary);
}

/* A group button's corner mark: it opens more. */
.bd-tool-caret {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 0;
  height: 0;
  border-bottom: 5px solid currentColor;
  border-left: 5px solid transparent;
  opacity: 0.6;
}

.bd-tools-sep {
  flex: none;
  align-self: stretch;
  width: var(--dt-border-width-default);
  margin: 8px 4px;
  background: var(--dt-border-default);
}

/* A group's tray floats above the bar. It stays in the page while it
   closes, so it can fade and settle rather than blink out. */
.bd-tray {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 4px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  overflow-x: auto;
  border: var(--dt-border-width-default) solid var(--dt-border-glass);
  border-radius: var(--dt-radius-container);
  background: var(--dt-surface-glass-strong);
  -webkit-backdrop-filter: var(--dt-backdrop-glass);
  backdrop-filter: var(--dt-backdrop-glass);
  box-shadow: var(--dt-elevation-3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.96);
  transform-origin: 50% 100%;
  visibility: hidden;
  scrollbar-width: none;
  /* No transition at all unless motion is welcome: a forced short one
     would start it hidden for a frame and let a press fall through. */
  transition-property: none;
}

.bd-tray.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .bd-tray {
    transition: opacity var(--dt-motion-micro), transform var(--dt-motion-micro), visibility 0s linear 200ms;
  }

  .bd-tray.is-open {
    transition: opacity var(--dt-motion-micro), transform var(--dt-motion-micro), visibility 0s;
  }

  .bd-tool,
  .bd-tray-item {
    transition: background var(--dt-motion-micro), color var(--dt-motion-micro), box-shadow var(--dt-motion-micro);
  }

  .bd-nav-icons .bd-ic {
    transition: opacity var(--dt-motion-micro), transform var(--dt-motion-micro);
  }
}

/* Select and Hand share one button: the face shows the one that's on. */
.bd-nav-icons {
  position: relative;
  display: inline-grid;
  width: var(--dt-size-icon-md);
  height: var(--dt-size-icon-md);
}

.bd-nav-icons .bd-ic {
  grid-area: 1 / 1;
}

.bd-nav-hand,
.bd-tool-nav.is-hand .bd-nav-pointer {
  opacity: 0;
  transform: scale(0.6);
}

.bd-tool-nav.is-hand .bd-nav-hand {
  opacity: 1;
  transform: none;
}

.bd-tray-item {
  flex: none;
}

.bd-tray-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: calc(var(--dt-size-control-lg) * 1.5);
  min-height: calc(var(--dt-size-control-lg) * 1.4);
  padding: 6px 8px;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  cursor: pointer;
}

.bd-tray-item .bd-ic {
  width: var(--dt-size-icon-md);
  height: var(--dt-size-icon-md);
}

.bd-tray-item:hover {
  background: var(--dt-surface-base);
}

.bd-tray-item[aria-pressed="true"] {
  background: var(--dt-surface-selected);
  color: var(--dt-text-on-selected);
}

.bd-tray-item.is-soon {
  color: var(--dt-text-tertiary);
  cursor: default;
}

.bd-tray-item.is-soon:hover {
  background: transparent;
}

.bd-tray-soon {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 0 4px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface-base);
  color: var(--dt-text-secondary);
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bd-tool:focus-visible,
.bd-tray-item:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 1px;
}

@media (max-width: 600px) {
  /* Clear of the site's floating buttons in the bottom right corner. */
  .bd-tools {
    left: var(--dt-space-inset-xs);
    transform: none;
  }

  .bd-tray {
    left: 0;
    justify-content: flex-start;
    max-width: calc(100vw - 16px);
    transform: translate(0, 8px) scale(0.96);
    transform-origin: 0 100%;
  }

  .bd-tray.is-open {
    transform: none;
  }
}

@media (max-width: 900px) {
  .bd-tool {
    width: var(--dt-size-control-md);
    height: var(--dt-size-control-md);
  }

  .bd-tray-item {
    min-width: calc(var(--dt-size-control-md) * 1.5);
  }
}

/* With Hand, the canvas takes the press itself and pans. */
.bd-draw {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
}

.bd-draw.is-hand {
  cursor: grab;
}

/* A frame's right and bottom edges and its corner resize it. */
.bd-resizers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bd-resize {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}

/* A picked frame's box: the corner dots a selection has, and edge grips
   that run just outside its edges, so they never cover what's inside it. */
.bd-frame-box {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.bd-frame-box .bd-handle:is(.is-n, .is-s) {
  left: 0;
  width: 100%;
  height: 8px;
  margin: 0;
}

.bd-frame-box .bd-handle.is-n { top: -8px; }
.bd-frame-box .bd-handle.is-s { top: 100%; }

.bd-frame-box .bd-handle:is(.is-e, .is-w) {
  top: 0;
  width: 8px;
  height: 100%;
  margin: 0;
}

.bd-frame-box .bd-handle.is-w { left: -8px; }
.bd-frame-box .bd-handle.is-e { left: 100%; }

.bd-resize.is-r {
  width: 8px;
  cursor: ew-resize;
}

.bd-resize.is-b {
  height: 8px;
  cursor: ns-resize;
}

.bd-resize.is-c {
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}

.bd-resize:hover::after,
.bd-resize:active::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-focus-ring-color);
}

.bd-resize.is-c:hover::after,
.bd-resize.is-c:active::after {
  inset: 3px;
  border-radius: 2px;
}

.bd-resize-tag {
  position: absolute;
  padding: 2px var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-inverse);
  color: var(--dt-text-inverse);
  font-size: var(--dt-font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(8px, 8px);
  pointer-events: none;
}

.bd-flabel .bd-frame-menu.bd-dd {
  width: auto;
  min-width: 0;
  min-height: 18px;
  padding: 0 2px;
  color: var(--dt-text-secondary);
  pointer-events: auto;
}

.bd-flabel .bd-frame-menu .bd-ic {
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
}

/* Buttons that float over the canvas: show the panels, leave preview. */
.bd-float {
  position: absolute;
  bottom: var(--dt-space-inset-sm);
  left: var(--dt-space-inset-sm);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface-overlay);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  box-shadow: var(--dt-elevation-2);
  cursor: pointer;
}

.bd-float-center {
  top: var(--dt-space-inset-sm);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}

.bd-float-sep {
  width: var(--dt-border-width-default);
  height: 1em;
  background: var(--dt-border-default);
}

.bd-stage-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--dt-text-secondary);
}

/* Above the frames' edge grips, so an object pushed against a frame's edge
   still resizes itself. */
.bd-marks {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.bd-stage.is-panning .bd-marks * {
  pointer-events: none !important;
}

.bd-mark {
  position: absolute;
  box-sizing: border-box;
}

/* The box a drag across empty canvas draws to select what it touches. */
.bd-marquee {
  position: absolute;
  box-sizing: border-box;
  border: var(--dt-border-width-default) solid var(--bd-select);
  background: var(--dt-surface-selected);
  opacity: 0.35;
  pointer-events: none;
}

.bd-mark-hover {
  outline: var(--dt-border-width-default) dashed var(--dt-text-secondary);
}

/* A part of the selected component: dashed under the pointer, solid once
   picked, in the component colour. */
.bd-mark-part {
  outline: var(--dt-border-width-default) solid var(--bd-component);
  outline-offset: 1px;
}

.bd-mark-part.is-hover {
  outline-style: dashed;
}

.bd-mark-sel {
  outline: var(--dt-border-width-default) solid var(--bd-select);
}

.bd-mark-sel.is-extra {
  outline-style: dashed;
}

/* Handles: small and outline-only, with a grab area well beyond what
   shows. Hovering one brings it forward and dims the rest. */
.bd-handle {
  position: absolute;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: -8px;
  pointer-events: auto;
  touch-action: none;
}

/* A small white square at each corner, edged in the focus colour, so it
   shows on a light frame and on the dark canvas alike. The edges between
   take a drag without a dot of their own. */
.bd-handle::after {
  content: "";
  position: absolute;
  inset: 4.5px;
  box-sizing: border-box;
  border: var(--dt-border-width-default) solid var(--bd-select);
  border-radius: 1.5px;
  background: var(--dt-color-white);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--dt-color-neutral-950) 18%, transparent);
  transition: inset var(--dt-motion-micro), opacity var(--dt-motion-micro);
}

.bd-handle:is(.is-n, .is-e, .is-s, .is-w)::after {
  display: none;
}

.bd-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
.bd-handle.is-n { left: 50%; top: 0; cursor: ns-resize; }
.bd-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.bd-handle.is-e { left: 100%; top: 50%; cursor: ew-resize; }
.bd-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
.bd-handle.is-s { left: 50%; top: 100%; cursor: ns-resize; }
.bd-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
.bd-handle.is-w { left: 0; top: 50%; cursor: ew-resize; }

/* Short or narrow on screen, the handles that would cover its middle step
   outward, so the body still takes a press to move it. */
.bd-mark-sel.is-short .bd-handle.is-n { transform: translateY(-6px); }
.bd-mark-sel.is-short .bd-handle.is-s { transform: translateY(6px); }
.bd-mark-sel.is-narrow .bd-handle.is-e { transform: translateX(6px); }
.bd-mark-sel.is-narrow .bd-handle.is-w { transform: translateX(-6px); }
.bd-mark-sel:is(.is-short, .is-narrow) .bd-handle.is-nw { transform: translate(-6px, -6px); }
.bd-mark-sel:is(.is-short, .is-narrow) .bd-handle.is-ne { transform: translate(6px, -6px); }
.bd-mark-sel:is(.is-short, .is-narrow) .bd-handle.is-se { transform: translate(6px, 6px); }
.bd-mark-sel:is(.is-short, .is-narrow) .bd-handle.is-sw { transform: translate(-6px, 6px); }

.bd-mark-sel:has(.bd-handle:hover) .bd-handle:not(:hover)::after,
.bd-mark-sel.is-sizing .bd-handle:not(.is-active)::after {
  opacity: 0.3;
}

.bd-handle:hover::after,
.bd-handle.is-active::after {
  inset: 2px;
}

@media (pointer: coarse) {
  .bd-handle {
    width: 28px;
    height: 28px;
    margin: -14px;
  }

  .bd-handle::after {
    inset: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-handle::after {
    transition: none;
  }
}

/* Just outside each corner of a free layer: a grip that turns it. */
.bd-rotate {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.bd-rotate:active {
  cursor: grabbing;
}

.bd-rotate.is-nw { left: -24px; top: -24px; }
.bd-rotate.is-ne { right: -24px; top: -24px; }
.bd-rotate.is-se { right: -24px; bottom: -24px; }
.bd-rotate.is-sw { left: -24px; bottom: -24px; }

/* Size, position or angle by the pointer while it works. */
.bd-readout {
  position: fixed;
  z-index: var(--dt-z-toast);
  padding: 2px var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-inverse);
  color: var(--dt-text-inverse);
  font-size: var(--dt-font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.bd-mark-tag {
  position: absolute;
  bottom: 100%;
  left: calc(var(--dt-border-width-default) * -1);
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  padding: 2px var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-control) var(--dt-radius-control) 0 0;
  background: var(--bd-select);
  color: var(--bd-select-ink);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-medium);
  white-space: nowrap;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The tag's ⋯: the layer's actions, as a right-click gives them. */
.bd-mark-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: -2px calc(var(--dt-space-inset-xs) * -0.5) -2px 0;
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.bd-mark-more:hover {
  background: color-mix(in oklab, var(--bd-select-ink) 22%, transparent);
}

.bd-mark-more .bd-ic {
  width: 14px;
  height: 14px;
}

.bd-mark-sel.is-top .bd-mark-tag {
  bottom: auto;
  top: 0;
  border-radius: 0 0 var(--dt-radius-control) 0;
}

.bd-mark-line {
  position: absolute;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-text-primary);
}

/* Smart guides: what a dragged free object lined up with, and equal gaps. */
.bd-guide {
  position: absolute;
  min-width: 1px;
  min-height: 1px;
  background: var(--bd-select);
  pointer-events: none;
}

.bd-guide.is-gap {
  background: color-mix(in oklch, var(--bd-select) 40%, transparent);
}

.bd-guide.is-gap.is-h {
  min-height: 3px;
  margin-top: -1px;
}

.bd-guide.is-gap.is-v {
  min-width: 3px;
  margin-left: -1px;
}

.bd-guide-label {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0 var(--dt-space-inset-2xs);
  border-radius: var(--dt-radius-control);
  background: var(--bd-select);
  color: var(--dt-surface-base);
  font-size: var(--dt-font-size-2xs);
  font-weight: var(--dt-font-weight-medium);
  line-height: 1.5;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.bd-mark-box {
  position: absolute;
  box-sizing: border-box;
  outline: var(--dt-border-width-default) dashed var(--bd-select);
  background: color-mix(in oklch, var(--dt-text-primary) 8%, transparent);
}

/* What a Cmd-drag from a tile would swap out. */
.bd-mark-box.is-swap {
  outline-style: solid;
  background: color-mix(in oklch, var(--dt-text-primary) 14%, transparent);
}

/* Where a copy of a frame lands, while it's Cmd-Shift-dragged. */
.bd-dup {
  position: absolute;
  box-sizing: border-box;
  outline: var(--dt-border-width-default) dashed var(--bd-select);
  background: color-mix(in oklch, var(--dt-surface-base) 55%, transparent);
}

.bd-dup-tag {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  margin-bottom: 4px;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  white-space: nowrap;
}

.bd-dup-tag .bd-ic {
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
}

.bd-ghost {
  position: fixed;
  z-index: var(--dt-z-toast);
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-sm);
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface-inverse);
  color: var(--dt-text-inverse);
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
  box-shadow: var(--dt-elevation-3);
  pointer-events: none;
  transform: translate(12px, 12px);
}

/* ------------------------------------------------------------ inspector */

/* The head stays at the top while the inspector scrolls, so the name and
   its menu are always to hand. */
.bd-inspect-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--dt-space-inset-md) var(--dt-space-inset-md) var(--dt-space-inset-sm);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-default);
  background: var(--dt-surface-subtle);
}

/* Align and distribute, under the title, for free objects. */
.bd-arrange {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: var(--dt-space-stack-2xs);
}

.bd-arrange-btn:nth-child(3n):not(:last-child) {
  margin-right: var(--dt-space-inline-xs);
}

.bd-arrange-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.bd-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-inline-xs);
}

.bd-head-row .bd-inspect-title {
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}

.bd-head-row .bd-inspect-title > :last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-head-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin-top: var(--dt-space-stack-2xs);
}

.bd-inspect-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  margin: var(--dt-space-stack-2xs) 0 0;
  font-size: var(--dt-text-heading-sm-size, 1.1rem);
  line-height: 1.25;
}

.bd-inspect-title > .bd-ic {
  color: var(--dt-text-tertiary);
}

.bd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface-sunken);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-2xs, 0.7rem);
  font-weight: var(--dt-font-weight-medium);
}

.bd-badge .bd-ic {
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
}

.bd-inspect-sub {
  margin: var(--dt-space-stack-2xs) 0 0;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  line-height: var(--dt-text-body-xs-line);
}

.bd-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: var(--dt-font-size-xs);
}

.bd-crumb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dt-text-link);
  font: inherit;
  cursor: pointer;
}

.bd-crumb[aria-current] {
  color: var(--dt-text-secondary);
  cursor: default;
}

.bd-crumb-sep {
  color: var(--dt-text-tertiary);
}

.bd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
  margin-top: var(--dt-space-stack-sm);
}

.bd-size-row {
  display: flex;
  gap: var(--dt-space-inline-2xs);
}

/* A border's width and style: two menus sharing the row. */
.bd-border-look { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--dt-space-stack-xs); }
.bd-border-look:first-child { margin-top: 0; }
.bd-border-look .bd-dd { min-width: 0; width: 100%; }
.bd-border-look .bd-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* W and H with their unit beside them: px, or a share of the parent (%) or
   of the screen (vw, vh). */
.bd-size-unit {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
}

.bd-size-unit > :first-child {
  flex: 1;
  min-width: 0;
}

.bd-dd.bd-dd-unit {
  flex: none;
  gap: 0;
  width: auto;
  min-width: 0;
  padding-inline: 4px;
  border-color: transparent;
  background: transparent;
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 0.7rem);
}

.bd-dd.bd-dd-unit:hover,
.bd-dd.bd-dd-unit[aria-expanded="true"] {
  color: var(--dt-text-primary);
  background: var(--bd-field);
}

.bd-dd-unit .bd-dd-chev {
  display: none;
}

/* In the inspector, W or H and its unit read as one field: the unit sits
   inside, at its end. */
.bd-right .bd-size-unit {
  gap: 0;
  border: var(--dt-border-width-default) solid transparent;
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
}

.bd-right .bd-size-unit:hover {
  border-color: var(--dt-border-default);
}

.bd-right .bd-size-unit:focus-within {
  border-color: var(--dt-border-strong);
}

.bd-right .bd-size-unit .bd-dd:not(.bd-dd-unit),
.bd-right .bd-size-unit .bd-num {
  border-color: transparent;
  background: transparent;
}

.bd-right .bd-size-unit .bd-dd.bd-dd-unit:hover,
.bd-right .bd-size-unit .bd-dd.bd-dd-unit[aria-expanded="true"] {
  background: transparent;
}

/* A section of stacked fields keeps a small gap between them. */
.bd-right .bd-sec[data-sec="frame-size"] .bd-sec-body,
.bd-right .bd-sec[data-sec="frame-position"] .bd-sec-body {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
}

.bd-num {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  min-height: var(--dt-size-control-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--dt-input-bg);
}

.bd-num:focus-within {
  border-color: var(--dt-focus-ring-color);
}

.bd-num-l {
  flex: none;
  width: 1.75em;
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 0.7rem);
  text-align: center;
}

.bd-num input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--dt-size-control-sm) - 2px);
  padding: 0 var(--dt-space-inset-xs) 0 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.bd-num.is-muted input {
  color: var(--dt-text-secondary);
}

.bd-sec {
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md) var(--dt-space-inset-md);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-sec.is-closed {
  padding-bottom: var(--dt-space-inset-sm);
}

/* A section's title row: the name, which folds it, and an action. */
.bd-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-inline-xs);
  min-height: var(--dt-size-control-xs);
}

.bd-sec-h {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-semibold);
  text-align: left;
  cursor: pointer;
}

/* The fold's chevron sits right after the title and shows on hover or
   focus; a closed section keeps it, so it can be found again. On a touch
   screen it always shows. */
.bd-sec-chev {
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
  color: var(--dt-text-tertiary);
  opacity: 0;
  transition: opacity var(--dt-motion-micro);
}

.bd-sec-head:hover .bd-sec-chev,
.bd-sec-h:focus-visible .bd-sec-chev,
.bd-sec.is-closed .bd-sec-chev {
  opacity: 1;
}

@media (hover: none) {
  .bd-sec-chev {
    opacity: 1;
  }
}

.bd-sec.is-closed .bd-sec-chev {
  transform: rotate(-90deg);
}

.bd-sec-body > :first-child,
.bd-sec-body > .bd-field:first-child {
  margin-top: var(--dt-space-stack-xs);
}

.bd-sec-empty {
  margin: var(--dt-space-stack-2xs) 0 0;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}

.bd-note {
  display: flex;
  gap: var(--dt-space-inline-xs);
  margin: var(--dt-space-stack-sm) 0 0;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-sunken);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  line-height: var(--dt-text-body-xs-line);
}

.bd-field {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  margin-top: var(--dt-space-stack-sm);
}

.bd-field-inline {
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

.bd-field-inline .bd-field-hint {
  flex-basis: 100%;
}

.bd-field-label {
  color: var(--dt-text-primary);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-medium);
}

.bd-field-hint {
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 0.7rem);
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- code */

.bd-code {
  width: min(1080px, calc(100vw - 32px));
  height: min(920px, calc(100dvh - 48px));
  max-height: none;
  padding: 0;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-overlay);
  background: var(--dt-surface-overlay);
  color: var(--dt-text-primary);
  box-shadow: var(--dt-elevation-4);
}

.bd-code[open] {
  display: flex;
  flex-direction: column;
}

.bd-code::backdrop {
  background: var(--dt-surface-scrim);
}

.bd-code-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dt-space-inline-sm);
  padding: var(--dt-space-inset-md);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-default);
}

.bd-code-intro {
  flex: 1 1 20rem;
  min-width: 0;
}

.bd-code-head h2 {
  margin: 0;
  font-size: var(--dt-text-heading-sm-size, 1.1rem);
}

.bd-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-xs);
}

.bd-code-pre {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: var(--dt-space-inset-md);
  overflow: auto;
  background: var(--dt-surface-sunken);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-xs);
  line-height: 1.6;
  white-space: pre;
}

/* What the code leaves out of its instances, above the code. */
.bd-code-notes {
  margin: 0;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-md);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
  font-size: var(--dt-font-size-sm);
}

.bd-code-notes summary {
  cursor: pointer;
  font-weight: var(--dt-font-weight-medium);
}

.bd-code-notes p,
.bd-code-notes ul {
  margin: var(--dt-space-stack-2xs) 0 0;
  color: var(--dt-text-secondary);
}

.bd-code-notes ul {
  padding-left: var(--dt-space-inset-md);
}

/* --------------------------------------------------------------- rename */

.bd-rename {
  box-sizing: border-box;
  max-width: 14rem;
  min-height: var(--dt-size-control-xs);
  padding: 0 var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid var(--dt-border-strong);
  border-radius: var(--dt-radius-control);
  background: var(--dt-input-bg);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: inherit;
}

.bd-title-name {
  cursor: text;
}

/* Typing straight into the canvas. */
.bd-inline {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  resize: none;
  border: 0;
  border-radius: 2px;
  outline: var(--dt-border-width-strong) solid var(--bd-select);
  outline-offset: 2px;
  background: transparent;
  caret-color: var(--dt-text-primary);
}

/* ----------------------------------------------------- sides and media */

.bd-sides-row {
  display: flex;
  gap: var(--dt-space-inline-2xs);
}

.bd-sides-row > .bd-dd {
  flex: 1;
  min-width: 0;
}

.bd-act-sm {
  flex: none;
}

.bd-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dt-space-inline-2xs);
  margin-top: var(--dt-space-stack-2xs);
}

.bd-side {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.bd-side-l {
  flex: none;
  width: 1.1em;
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 0.7rem);
  text-align: center;
}

.bd-side .bd-dd {
  flex: 1;
  min-width: 0;
  padding-left: var(--dt-space-inset-xs);
}

.bd-media {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
}

.bd-media-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-sunken) center / cover no-repeat;
  color: var(--dt-text-tertiary);
}

.bd-media-actions {
  display: flex;
  gap: var(--dt-space-inline-2xs);
}

.bd-media-actions .bd-btn {
  cursor: pointer;
}

.bd-dd.is-mixed .bd-dd-label,
.bd-switch.is-mixed {
  opacity: 0.6;
}

.bd-dd-opt.is-danger {
  color: var(--dt-text-danger);
}

/* ---------------------------------------------------------- narrower */

@media (max-width: 1280px) {
  .bd-shell {
    grid-template-columns: 304px minmax(0, 1fr) 280px;
  }

  .bd-saved-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  /* The page stays still, so the pane under the tabs is what scrolls: the
     inspector, Assets or Layers, however long. */
  .bd-shell {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .bd-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: var(--dt-space-inline-2xs);
    padding: var(--dt-space-inset-xs) var(--dt-space-inset-md);
    border-bottom: var(--dt-border-width-default) solid var(--dt-border-default);
    background: var(--dt-surface-subtle);
  }

  .bd-shell {
    display: block;
  }

  .bd-left,
  .bd-right {
    border: 0;
    overflow: visible;
  }

  .bd-shell > aside,
  .bd-shell > .bd-center {
    display: none;
  }

  .bd-shell[data-pane="add"] > .bd-left,
  .bd-shell[data-pane="edit"] > .bd-right {
    display: block;
    padding-bottom: calc(var(--dt-dim-24) + env(safe-area-inset-bottom, 0px));
  }

  /* On a phone the rail runs along the top of its pane. */
  .bd-left-tabs.bd-rail {
    flex-direction: row;
    border-right: 0;
    border-bottom: var(--dt-border-width-default) solid var(--dt-border-default);
  }

  .bd-rail .bd-tab {
    flex: 1;
    width: auto;
  }

  .bd-shell[data-pane="add"] .bd-tiles,
  .bd-shell[data-pane="add"] .bd-layers {
    overflow: visible;
  }

  .bd-shell[data-pane="add"] .bd-tiles.is-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bd-shell[data-pane="canvas"] > .bd-center {
    display: flex;
  }

  /* The Agent as a sheet over the lower half, the canvas above it, and the
     tool bar (with the Agent's button) riding on its top edge. */
  .bd-shell.is-agent-sheet > .bd-left {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    height: 55dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: var(--dt-border-width-default) solid var(--dt-border-default);
    border-radius: var(--dt-radius-container) var(--dt-radius-container) 0 0;
    background: var(--dt-surface-subtle);
    box-shadow: var(--dt-shadow-md);
    overflow: visible;
  }

  .bd-shell.is-agent-sheet > .bd-left > .bd-left-tabs {
    display: none;
  }

  .bd-shell.is-agent-sheet .bd-left-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* Room below for the sheet, so the shell scrolls the stage up to the
     tabs and the canvas fills what the sheet leaves. */
  .bd-shell.is-agent-sheet {
    padding-bottom: 55dvh;
  }

  .bd-shell.is-agent-sheet .bd-stage {
    height: calc(45dvh - var(--dt-dim-12));
    min-height: 0;
  }

  /* The site's own header steps aside while the sheet is up; the panel
     tabs stay, under the canvas's top edge. */
  .page-app:has(.bd-shell.is-agent-sheet) .app-head {
    display: none;
  }

  /* The sheet's top bar: its grip, and the tool bar sitting on its edge. */
  .bd-sheet-bar {
    position: relative;
    display: flex;
    justify-content: center;
    flex: none;
  }

  .bd-sheet-bar .bd-tools {
    bottom: calc(100% + var(--dt-space-inset-xs));
  }

  .bd-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--dt-size-control-sm);
    border: 0;
    background: none;
    cursor: pointer;
  }

  .bd-sheet-grip {
    width: var(--dt-dim-10);
    height: 4px;
    border-radius: var(--dt-radius-pill);
    background: var(--dt-border-strong);
  }

  .bd-stage {
    flex: none;
    height: calc(100dvh - 200px);
    min-height: 420px;
  }

  .bd-code {
    height: calc(100dvh - 32px);
  }

}

@media (prefers-reduced-motion: no-preference) {
  button.bd-layer-twisty .bd-ic {
    transition: transform var(--dt-motion-micro);
  }

  span.bd-layer-twisty .bd-ic {
    transition: transform var(--dt-motion-micro);
  }

  .bd-seg-thumb {
    transition: transform var(--dt-motion-micro), width var(--dt-motion-micro), height var(--dt-motion-micro);
  }

  .bd-tab,
  .bd-seg-btn,
  .bd-cat,
  .bd-tile,
  .bd-layer {
    transition: background var(--dt-motion-micro), border-color var(--dt-motion-micro), color var(--dt-motion-micro);
  }
}

/* ---------------------------------------------------------------- import */

.bd-import {
  height: min(760px, calc(100dvh - 48px));
}

.bd-import-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--dt-space-stack-sm);
  min-height: 0;
  padding: var(--dt-space-inset-md);
}

.bd-import-text {
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  min-height: calc(var(--dt-size-control-lg) * 3);
  padding: var(--dt-space-inset-sm);
  resize: none;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
  color: var(--dt-text-primary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-xs);
  line-height: 1.5;
}

.bd-import-text:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

.bd-import-report {
  max-height: 34%;
  overflow-y: auto;
  font-size: var(--dt-font-size-sm);
}

.bd-import-report p {
  margin: 0;
}

.bd-import-ok,
.bd-import-error {
  display: flex;
  gap: var(--dt-space-inline-xs);
  align-items: flex-start;
}

.bd-import-error {
  color: var(--dt-text-danger);
}

.bd-import-dropped {
  margin-top: var(--dt-space-stack-xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-warning-subtle);
  color: var(--dt-text-primary);
  font-size: var(--dt-font-size-xs);
}

.bd-import-dropped ul {
  margin: var(--dt-space-stack-2xs) 0;
  padding-left: 1.2em;
}

.bd-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-xs);
}

/* An edit by layer name: the frame before and after beside a list of the
   changes, each with an icon for its kind. */
.bd-edit-kind {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-xs);
  align-items: center;
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md) 0;
}

.bd-edit-badge {
  display: inline-flex;
  gap: var(--dt-space-inline-2xs);
  align-items: center;
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-pill);
  font-size: var(--dt-font-size-xs);
}

.bd-edit-n,
.bd-edit-undo {
  display: inline-flex;
  gap: var(--dt-space-inline-2xs);
  align-items: center;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

.bd-edit-sp {
  flex: 1;
}

.bd-btn.is-on {
  background: var(--bd-field-on);
}

.bd-edit-cols {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--dt-space-inline-md);
  min-height: 0;
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md);
}

@media (max-width: 720px) {
  .bd-edit-cols {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }
}

.bd-edit-pv {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  min-height: 0;
}

.bd-edit-shot {
  position: relative;
  flex: 1;
  min-height: calc(var(--dt-size-control-lg) * 5);
  overflow: auto;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
}

.bd-edit-shot > p {
  padding: var(--dt-space-inset-sm);
}

.bd-edit-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.bd-edit-mark {
  position: absolute;
  box-sizing: border-box;
  outline: var(--dt-border-width-default) dashed var(--dt-text-secondary);
  pointer-events: none;
}

.bd-edit-mark-ic,
.bd-edit-ic {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--dt-size-icon-md, 24px);
  height: var(--dt-size-icon-md, 24px);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-overlay);
  color: var(--dt-text-primary);
}

.bd-edit-mark-ic {
  position: absolute;
  top: 0;
  right: 0;
  translate: 40% -40%;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  box-shadow: var(--dt-elevation-1);
}

.bd-edit-ic {
  background: var(--bd-field);
}

.bd-edit-mark-ic .bd-ic,
.bd-edit-ic .bd-ic {
  width: 14px;
  height: 14px;
}

.bd-edit-list {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  list-style: none;
}

.bd-edit-row {
  display: flex;
  gap: var(--dt-space-inline-sm);
  align-items: flex-start;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-edit-row:last-child {
  border-bottom: 0;
}

.bd-edit-row.is-off {
  color: var(--dt-text-secondary);
}

.bd-edit-t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: var(--dt-font-size-sm);
}

.bd-edit-t > b {
  overflow-wrap: anywhere;
  font-weight: var(--dt-font-weight-semibold);
}

.bd-edit-t > span {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

.bd-edit-via {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  font-style: italic;
}

.bd-edit-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
  margin-top: var(--dt-space-stack-2xs);
}

.bd-edit-opt {
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  cursor: pointer;
}

.bd-edit-opt.is-on {
  border-color: var(--dt-text-primary);
  background: var(--bd-field-on);
}

.bd-edit-opt:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

.bd-edit-src {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
}

.bd-edit-src-h {
  display: flex;
  gap: var(--dt-space-inline-xs);
  align-items: center;
  justify-content: space-between;
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

.bd-edit-src .bd-code-pre {
  flex: 1;
  margin: 0;
  border: 0;
}

.bd-edit-foot {
  align-items: center;
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

/* On the canvas after an edit: a quiet label on each layer it changed. */
.bd-edit-on {
  position: absolute;
  box-sizing: border-box;
  outline: var(--dt-border-width-default) dashed var(--dt-text-secondary);
  pointer-events: none;
}

.bd-edit-on-tag {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: inline-flex;
  gap: var(--dt-space-inline-2xs);
  align-items: center;
  margin-bottom: 2px;
  padding: 1px var(--dt-space-inset-2xs);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-overlay);
  color: var(--dt-text-primary);
  font-size: var(--dt-font-size-2xs, 11px);
  white-space: nowrap;
}

.bd-edit-on-tag .bd-ic {
  width: 12px;
  height: 12px;
}

.bd-layer-edited {
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--dt-text-secondary);
}

.bd-toast {
  position: fixed;
  bottom: calc(var(--dt-space-inset-lg) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 900;
  display: flex;
  gap: var(--dt-space-inline-sm);
  align-items: center;
  max-width: calc(100vw - 32px);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-xs) var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-overlay);
  background: var(--dt-surface-overlay);
  color: var(--dt-text-primary);
  box-shadow: var(--dt-elevation-3);
  font-size: var(--dt-font-size-sm);
  translate: -50% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .bd-toast {
    animation: bd-toast-in 0.2s ease-out;
  }
}

@keyframes bd-toast-in {
  from {
    opacity: 0;
    translate: -50% 8px;
  }
}

/* The live canvas bridge: the dialog that starts a session, the pill in the
   top bar while one runs, and the Session panel with its steps. */
.bd-code.bd-bridge-dlg,
.bd-code.bd-claude-dlg,
.bd-code.bd-share-dlg {
  width: min(680px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 48px);
}

.bd-br-body {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-md);
  overflow-y: auto;
  padding: var(--dt-space-inset-md);
}

.bd-br-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--dt-space-inline-xs);
  align-items: center;
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-br-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-xs);
  align-items: center;
  margin: 0;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
  font-size: var(--dt-font-size-sm);
}

.bd-br-step {
  display: flex;
  gap: var(--dt-space-inline-sm);
}

/* Connect Claude: where it stands, then three numbered steps. */
.bd-cc-state {
  flex-wrap: nowrap;
}

.bd-cc-state.is-live {
  color: var(--dt-text-success);
}

.bd-cc-state.is-error {
  color: var(--dt-text-danger);
}

.bd-cc-steps {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-cc-step {
  display: flex;
  gap: var(--dt-space-inline-sm);
  min-width: 0;
}

.bd-cc-step > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  min-width: 0;
  font-size: var(--dt-font-size-sm);
}

.bd-cc-step > div > span {
  color: var(--dt-text-secondary);
}

.bd-cc-step code {
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-xs);
  overflow-wrap: anywhere;
}

.bd-cc-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: 50%;
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-semibold);
}

.bd-cc-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-xs);
  align-items: center;
  min-width: 0;
}

.bd-cc-link .bd-br-link {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
}

.bd-cc-link > span {
  flex-basis: 100%;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

.bd-br-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: 50%;
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-semibold);
}

.bd-br-st {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  min-width: 0;
}

.bd-br-st > span,
.bd-br-wait {
  margin: 0;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-sm);
}

.bd-br-opts {
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
}

.bd-br-opt {
  display: flex;
  gap: var(--dt-space-inline-sm);
  align-items: center;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-br-opt:last-child {
  border-bottom: 0;
}

.bd-br-opt > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: var(--dt-font-size-sm);
}

.bd-br-opt > div > span {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

.bd-br-switch {
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-border-default);
  cursor: pointer;
}

.bd-br-switch.is-on {
  background: var(--dt-text-primary);
}

.bd-br-switch:disabled {
  cursor: default;
  opacity: 0.5;
}

.bd-br-switch:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

.bd-br-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dt-surface-overlay);
}

.bd-br-switch.is-on .bd-br-knob {
  left: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .bd-br-knob {
    transition: left 0.15s ease-out;
  }
}

.bd-br-code {
  display: flex;
  gap: var(--dt-space-inline-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-xs) var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
}

.bd-br-code code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-xs);
}

.bd-br-pill {
  display: inline-flex;
  gap: var(--dt-space-inline-2xs);
  align-items: center;
  max-width: min(420px, 46vw);
  padding: 2px;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-pill);
  background: var(--bd-field);
  font-size: var(--dt-font-size-xs);
}

.bd-br-lk {
  flex: none;
}

.bd-br-pill-main,
.bd-br-lk {
  display: inline-flex;
  gap: var(--dt-space-inline-2xs);
  align-items: center;
  min-width: 0;
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border: 0;
  border-radius: var(--dt-radius-pill);
  background: none;
  color: var(--dt-text-primary);
  font: inherit;
  cursor: pointer;
}

.bd-br-foot > .bd-edit-undo {
  flex: 1 1 100%;
}

.bd-br-pill-main:hover,
.bd-br-lk:hover {
  background: var(--bd-field-on);
}

.bd-br-pill-main:focus-visible,
.bd-br-lk:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
}

.bd-br-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-br-pill .bd-ic {
  width: 14px;
  height: 14px;
}

.bd-br-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dt-text-primary);
}

.bd-br-pill.is-paused .bd-br-dot {
  background: var(--dt-text-secondary);
}

@media (prefers-reduced-motion: no-preference) {
  .bd-br-pill:not(.is-paused) .bd-br-dot {
    animation: bd-br-pulse 1.6s ease-in-out infinite;
  }
}

@keyframes bd-br-pulse {
  50% {
    opacity: 0.35;
  }
}

.bd-br-vd {
  width: 1px;
  height: 14px;
  background: var(--dt-border-default);
}

@media (max-width: 720px) {
  .bd-br-pill-text,
  .bd-br-lk-text {
    display: none;
  }
}

.bd-br-panel {
  position: fixed;
  top: calc(var(--dt-size-control-lg) + 24px);
  right: 16px;
  z-index: 850;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--dt-size-control-lg) - 48px);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-overlay);
  background: var(--dt-surface-overlay);
  color: var(--dt-text-primary);
  box-shadow: var(--dt-elevation-3);
}

@media (max-width: 720px) {
  .bd-br-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 55dvh;
    border-radius: var(--dt-radius-overlay) var(--dt-radius-overlay) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

.bd-br-sh,
.bd-br-sf {
  display: flex;
  gap: var(--dt-space-inline-xs);
  align-items: center;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
}

.bd-br-sh {
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-br-sf {
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-br-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.bd-br-scroll > .bd-sec-empty {
  padding: var(--dt-space-inset-sm);
}

.bd-br-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-br-a {
  display: flex;
  gap: var(--dt-space-inline-sm);
  align-items: flex-start;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
}

.bd-br-a.is-undone .bd-edit-t > b,
.bd-br-a.is-undone .bd-edit-t > span {
  text-decoration: line-through;
  color: var(--dt-text-secondary);
}

.bd-br-a.is-off {
  color: var(--dt-text-secondary);
}

.bd-br-now,
.bd-br-why {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  font-style: italic;
}

.bd-br-thumb {
  display: block;
  max-width: 120px;
  max-height: 80px;
  margin-top: var(--dt-space-stack-2xs);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
}

.bd-br-card {
  margin: var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-overlay);
  box-shadow: var(--dt-elevation-1);
}

.bd-br-ch,
.bd-br-cf {
  display: flex;
  gap: var(--dt-space-inline-xs);
  align-items: center;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
}

.bd-br-ch {
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
  font-size: var(--dt-font-size-sm);
}

.bd-br-cf {
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-br-tell {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--dt-space-inset-sm));
  margin: 0 var(--dt-space-inset-sm) var(--dt-space-inset-xs);
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
}

.bd-br-tell:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

/* Agents: an avatar is the agent's own mark, or its initial on its colour. */
.bd-av {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bd-agent, var(--dt-text-secondary));
  color: var(--dt-color-white);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-semibold);
  line-height: 1;
}

.bd-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-av.is-sm {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.bd-av.is-xs {
  width: 16px;
  height: 16px;
  font-size: 9px;
}

.bd-av.is-blank {
  visibility: hidden;
}

/* Who's on the file, in the top bar: a stack of avatars that opens the
   account, or, signed out, an outlined one that offers to sign in. */
.bd-people,
.bd-people-in {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 2px;
  border: 0;
  border-radius: var(--dt-radius-pill);
  background: none;
  cursor: pointer;
}

.bd-people .bd-av + .bd-av {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--dt-surface-base);
}

.bd-av.is-ghost {
  border: var(--dt-border-width-default) dashed var(--dt-border-default);
  background: none;
  color: var(--dt-text-secondary);
}

.bd-av.is-more {
  background: var(--dt-surface-raised);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

.bd-people:hover .bd-av.is-ghost,
.bd-people-in:hover .bd-av.is-ghost {
  color: var(--dt-text-primary);
  border-color: var(--dt-text-secondary);
}

.bd-people:focus-visible,
.bd-people-in:focus-visible {
  outline: 2px solid var(--bd-select);
  outline-offset: 1px;
}

/* Where the open file is kept, in the top bar: a cloud when it's up, a
   struck-through one when it stays in this browser, and a slow pulse while
   changes are going up. On a phone it shows only when something needs
   attention. */
.bd-cloud-st.is-local,
.bd-cloud-st.is-offline {
  color: var(--dt-text-secondary);
}

.bd-cloud-st.is-error {
  color: var(--dt-text-danger);
}

.bd-cloud-st.is-busy svg {
  animation: bd-cloud-pulse 1.6s ease-in-out infinite;
}

@keyframes bd-cloud-pulse {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-cloud-st.is-busy svg {
    animation: none;
    opacity: 0.6;
  }
}

@media (max-width: 600px) {
  .bd-cloud-st.is-synced,
  .bd-cloud-st.is-pending,
  .bd-cloud-st.is-uploading {
    display: none;
  }
}

.bd-sh-status {
  display: flex;
  gap: var(--dt-space-inline-xs);
  align-items: flex-start;
  margin: 0 0 var(--dt-space-stack-sm);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-sm);
}

.bd-sh-status b {
  color: var(--dt-text-primary);
  font-weight: var(--dt-font-weight-semibold);
}

.bd-sh-status.is-error svg {
  color: var(--dt-text-danger);
}

.bd-sh-local {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-sm);
  align-items: flex-start;
}

/* Share: the people on the file, as the agents list, and an invite form. */
.bd-sh-form {
  display: flex;
  gap: var(--dt-space-inline-xs);
  align-items: flex-end;
}

.bd-sh-form .bd-br-name {
  flex: 1;
}

.bd-sh-you {
  color: var(--dt-text-secondary);
  font-weight: var(--dt-font-weight-regular);
}

.bd-br-agent.is-invited .bd-br-agent-t > b {
  color: var(--dt-text-secondary);
}

/* Export is its icon alone; its name is in its label. */
.bd-export {
  min-width: var(--dt-size-control-sm);
  padding: 0;
}

.bd-br-stack {
  display: inline-flex;
}

.bd-br-stack .bd-av + .bd-av {
  margin-left: -6px;
  box-shadow: 0 0 0 2px var(--bd-field);
}

/* On the canvas: the agent's colour round the layer it's on, and its cursor. */
.bd-agent-on {
  position: absolute;
  box-sizing: border-box;
  outline: 2px solid var(--bd-agent);
  outline-offset: 2px;
  pointer-events: none;
}

.bd-agent-cur {
  position: absolute;
  top: calc(100% - 6px);
  left: calc(50% - 8px);
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bd-agent-on {
    transition: left 0.25s ease-out, top 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out;
  }
}

.bd-agent-ptr {
  flex: none;
  width: 16px;
  height: 16px;
}

.bd-agent-ptr path {
  fill: var(--bd-agent);
  stroke: var(--dt-color-white);
  stroke-width: 1;
}

.bd-agent-tag {
  display: inline-flex;
  gap: var(--dt-space-inline-2xs);
  align-items: center;
  max-width: 260px;
  margin: 10px 0 0 -2px;
  padding: 2px var(--dt-space-inset-xs) 2px 2px;
  border-radius: var(--dt-radius-pill);
  background: var(--bd-agent);
  color: var(--dt-color-white);
  font-size: var(--dt-font-size-xs);
  white-space: nowrap;
  box-shadow: var(--dt-elevation-1);
}

.bd-agent-tag .bd-av {
  box-shadow: 0 0 0 1.5px var(--dt-color-white);
}

.bd-agent-tag i {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  opacity: 0.88;
}

.bd-br-agents {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-br-agent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-sm);
  align-items: center;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
}

.bd-br-agent-t {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  min-width: 0;
  font-size: var(--dt-font-size-sm);
}

.bd-br-agent-t > span {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

.bd-br-link {
  overflow: hidden;
  color: var(--dt-text-secondary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 11px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-br-add {
  padding: var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) dashed var(--dt-border-default);
  border-radius: var(--dt-radius-control);
}

.bd-br-name {
  display: flex;
  gap: var(--dt-space-inline-sm);
  align-items: center;
  font-size: var(--dt-font-size-sm);
}

.bd-br-name input {
  flex: 1;
  min-width: 0;
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
  color: var(--dt-text-primary);
  font: inherit;
}

.bd-br-name input:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

.bd-br-filter {
  display: inline-flex;
  overflow: hidden;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
}

.bd-br-filter button {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  padding: 2px var(--dt-space-inset-xs);
  border: 0;
  background: none;
  color: var(--dt-text-secondary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  cursor: pointer;
}

.bd-br-filter button.is-on {
  background: var(--bd-field-on);
  color: var(--dt-text-primary);
  font-weight: var(--dt-font-weight-semibold);
}

.bd-br-filter button:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: -2px;
}

.bd-br-kind {
  flex: none;
  color: var(--dt-text-secondary);
}

.bd-br-kind .bd-ic {
  width: 14px;
  height: 14px;
}

/* ------------------------------------------------------------- tooltips */

.bd-tip {
  position: fixed;
  z-index: 1000;
  max-width: min(280px, calc(100vw - 16px));
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-inverse);
  box-shadow: var(--dt-elevation-2);
  color: var(--dt-text-inverse);
  font-size: var(--dt-font-size-xs);
  line-height: var(--dt-line-height-xs);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bd-tip {
    animation: bd-tip-in var(--dt-motion-micro);
  }
}

@keyframes bd-tip-in {
  from {
    opacity: 0;
  }
}

/* -------------------------------------------------------------- content */

.bd-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bd-content.is-drop {
  outline: var(--dt-border-width-strong) dashed var(--dt-focus-ring-color);
  outline-offset: calc(-1 * var(--dt-space-inset-xs));
}

.bd-content-tabs {
  padding: 0 var(--dt-space-inset-md) var(--dt-space-inset-sm);
}

.bd-content-sec {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-md) var(--dt-space-inset-md);
}

.bd-content-h {
  margin: 0;
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-semibold);
}

.bd-content-note,
.bd-content-busy {
  margin: 0;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

/* Whose content this is, under the panel's title and in line with it. */
.bd-content-note.bd-content-scope {
  padding: 0 var(--dt-space-inset-md) var(--dt-space-inset-xs);
}

.bd-content-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-space-inline-xs);
}

.bd-iconlibs {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
}

.bd-iconlib {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-base);
  color: var(--dt-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bd-iconlib[aria-checked="true"] {
  border-color: var(--dt-border-selected);
  box-shadow: inset 0 0 0 var(--dt-border-width-default) var(--dt-border-selected);
}

.bd-iconlib-name {
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
}

.bd-iconlib-note {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}

.bd-lib {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dt-space-inline-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-lib.is-icons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bd-lib-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  min-width: 0;
}

.bd-lib-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  /* A checkerboard, so a cut-out reads as cut out. */
  background: repeating-conic-gradient(var(--dt-surface-sunken) 0% 25%, var(--dt-surface-base) 0% 50%) 50% / 16px 16px;
  cursor: grab;
  touch-action: none;
}

.bd-lib.is-icons .bd-lib-thumb {
  aspect-ratio: 1;
  padding: var(--dt-space-inset-sm);
}

.bd-lib-thumb img,
.bd-lib-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Photos and clips fill their tile, so they're big enough to tell apart.
   Illustrations and cut-outs stay whole, on the checkerboard. */
.bd-lib-thumb.is-fill img,
.bd-lib-thumb.is-fill video {
  object-fit: cover;
}

.bd-lib-name {
  overflow: hidden;
  padding-right: var(--dt-size-control-sm);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-lib-menu.bd-dd {
  position: absolute;
  right: 0;
  bottom: -4px;
}

.bd-media-pick.bd-dd {
  width: auto;
}

.bd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dt-space-stack-xs);
  padding: var(--dt-space-inset-lg) var(--dt-space-inset-md);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-sm);
  text-align: center;
}

.bd-empty p {
  margin: 0;
}

.bd-empty .bd-ic {
  width: var(--dt-size-icon-lg);
  height: var(--dt-size-icon-lg);
  color: var(--dt-text-tertiary);
}

/* A frame's canvas: a surface token, or one custom colour beside it. */
.bd-canvas-row {
  display: flex;
  gap: var(--dt-space-inline-2xs);
}

.bd-canvas-row .bd-dd {
  flex: 1;
  min-width: 0;
}

.bd-canvas-custom {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dt-size-control-sm);
  height: var(--dt-size-control-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-base);
  cursor: pointer;
}

.bd-canvas-custom.is-on {
  border-color: var(--dt-border-selected);
}

.bd-canvas-chip {
  width: 60%;
  height: 60%;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
}

.bd-canvas-ic {
  width: var(--dt-size-icon-sm);
  height: var(--dt-size-icon-sm);
  color: var(--dt-text-secondary);
}

.bd-canvas-custom:hover .bd-canvas-ic {
  color: var(--dt-text-primary);
}

.bd-canvas-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.bd-canvas-custom:focus-within {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 1px;
}

/* Set on this item, not left to the default. */
.bd-sec-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dt-surface-action-brand);
}

/* ------------------------------------------------------- shift: spacing */

.bd-spacing {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bd-spacing-line {
  position: absolute;
  background: var(--dt-surface-action-danger);
}

.bd-spacing-line.is-x {
  height: 1px;
}

.bd-spacing-line.is-y {
  width: 1px;
}

.bd-spacing-line.is-x::before,
.bd-spacing-line.is-x::after,
.bd-spacing-line.is-y::before,
.bd-spacing-line.is-y::after {
  content: "";
  position: absolute;
  background: inherit;
}

.bd-spacing-line.is-x::before,
.bd-spacing-line.is-x::after {
  top: -3px;
  width: 1px;
  height: 7px;
}

.bd-spacing-line.is-x::before {
  left: 0;
}

.bd-spacing-line.is-x::after {
  right: 0;
}

.bd-spacing-line.is-y::before,
.bd-spacing-line.is-y::after {
  left: -3px;
  width: 7px;
  height: 1px;
}

.bd-spacing-line.is-y::before {
  top: 0;
}

.bd-spacing-line.is-y::after {
  bottom: 0;
}

.bd-spacing-tag {
  position: absolute;
  padding: 1px var(--dt-space-inset-2xs);
  border: 0;
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-action-danger);
  color: var(--dt-text-on-action-danger);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--dt-line-height-xs);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}

.bd-spacing-tag:disabled {
  cursor: default;
}

.bd-spacing-tag:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 1px;
}

/* A section the canvas just opened, flashed once so the eye finds it. */
@media (prefers-reduced-motion: no-preference) {
  .bd-sec.is-flash {
    animation: bd-flash 1.2s ease-out;
  }
}

.bd-sec.is-flash {
  background: color-mix(in oklch, var(--dt-focus-ring-color) 8%, transparent);
}

@keyframes bd-flash {
  from {
    background: color-mix(in oklch, var(--dt-focus-ring-color) 18%, transparent);
  }
}

/* ---------------------------------------------------------------- play */

.bd-play {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: color-mix(in oklch, var(--dt-color-neutral-950) 96%, transparent);
  color: var(--dt-color-neutral-100);
  box-shadow: none;
}

.bd-play[open] {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.bd-play::backdrop {
  background: var(--dt-color-neutral-950);
}

/* The theater's top: the frame's name, and Close. */
.bd-play-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-inline-sm);
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md);
}

.bd-play-intro {
  flex: 1;
  min-width: 0;
}

.bd-play-intro h2 {
  margin: 0;
  color: var(--dt-color-neutral-050);
  font-size: var(--dt-font-size-md);
}

.bd-play-sub {
  margin: 2px 0 0;
  color: var(--dt-color-neutral-400);
  font-size: var(--dt-font-size-xs);
}

.bd-play-close {
  border-color: color-mix(in oklch, var(--dt-color-neutral-100) 18%, transparent);
  background: color-mix(in oklch, var(--dt-color-neutral-100) 10%, transparent);
  color: var(--dt-color-neutral-050);
}

.bd-play-back {
  flex: none;
}

/* A link: where it goes, and the address when it's a web one. */
.bd-link {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
}

.bd-play-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 0 var(--dt-space-inset-md);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Centred while it fits; larger than the stage, it scrolls from its top
   left corner rather than spilling off both sides. */
.bd-play-stage > .bd-play-device {
  flex: none;
  margin: auto;
}

/* Screen sizes and zoom, in a bar where the canvas keeps its tools. */
.bd-play-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  align-self: center;
  margin: var(--dt-space-inset-sm) 0 var(--dt-space-inset-md);
  max-width: calc(100% - 2 * var(--dt-space-inset-md));
  padding: 6px;
  border: var(--dt-border-width-default) solid color-mix(in oklch, var(--dt-color-neutral-100) 16%, transparent);
  border-radius: var(--dt-radius-container);
  background: color-mix(in oklch, var(--dt-color-neutral-900) 80%, transparent);
  -webkit-backdrop-filter: var(--dt-backdrop-glass);
  backdrop-filter: var(--dt-backdrop-glass);
  box-shadow: var(--dt-elevation-3);
}

.bd-play-bar .bd-seg {
  background: transparent;
}

.bd-play-bar .bd-seg-btn {
  min-width: calc(var(--dt-size-control-md) * 1.4);
  color: var(--dt-color-neutral-300);
}

.bd-play-bar .bd-seg-btn[aria-pressed="true"] {
  background: var(--dt-color-neutral-050);
  color: var(--dt-color-neutral-950);
}

.bd-play-bar .bd-seg-thumb {
  background: var(--dt-color-neutral-050);
}

.bd-play-sep {
  align-self: stretch;
  width: var(--dt-border-width-default);
  margin: 4px 2px;
  background: color-mix(in oklch, var(--dt-color-neutral-100) 16%, transparent);
}

/* On a phone the bar wraps to two rows, and the divider would dangle. */
@media (max-width: 600px) {
  .bd-play-sep {
    display: none;
  }
}

.bd-play-zoom {
  display: inline-flex;
  align-items: center;
}

.bd-play-bar .bd-play-step {
  color: var(--dt-color-neutral-300);
}

.bd-play-bar .bd-play-step:hover:not(:disabled) {
  color: var(--dt-color-neutral-050);
}

.bd-play-pct {
  min-width: 4ch;
  color: var(--dt-color-neutral-100);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bd-play-bar .bd-play-fit .bd-seg-btn {
  min-width: calc(var(--dt-size-control-md) * 1.2);
}

/* The screen: the frame at its own width, cut to a device's height. */
.bd-play-device {
  position: relative;
  overflow: hidden;
  border-radius: var(--dt-radius-container);
  background: var(--dt-surface-base);
  box-shadow: 0 24px 80px oklch(0 0 0 / 0.5), 0 0 0 var(--dt-border-width-default) color-mix(in oklch, var(--dt-color-neutral-100) 14%, transparent);
}

.bd-play-device iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
}

.bd-content-tabs .bd-seg-btn {
  padding-inline: var(--dt-space-inset-2xs);
  font-size: var(--dt-font-size-xs);
}

/* ---------------------------------------------------------------- slots */

.bd-slot-items {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-slot-item {
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

.bd-slot-item .bd-layer-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- lists */

.bd-list {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  min-width: 0;
}

.bd-list-item {
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-base);
  min-width: 0;
}

.bd-list-item.is-open {
  border-color: var(--dt-border-default);
}

.bd-list-head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline-end: 2px;
  min-width: 0;
}

.bd-list-sum {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  min-width: 0;
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-2xs);
  border: 0;
  background: transparent;
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  text-align: start;
  cursor: pointer;
}

.bd-list-chev {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--dt-text-tertiary);
}

.bd-list-item.is-open .bd-list-chev {
  transform: rotate(90deg);
}

.bd-list-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-list-body {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs) var(--dt-space-inset-xs);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-list-field {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  min-width: 0;
}

.bd-list-field.is-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.bd-list-text {
  min-height: calc(var(--dt-size-control-sm) * 2);
  padding-block: var(--dt-space-inset-2xs);
  resize: vertical;
  line-height: var(--dt-line-height-sm);
}

.bd-list-add {
  align-self: flex-start;
}

.bd-list-field .bd-input[aria-invalid="true"] {
  border-color: var(--dt-border-danger);
}

@media (prefers-reduced-motion: no-preference) {
  .bd-list-chev {
    transition: transform var(--dt-motion-micro);
  }
}

/* ---------------------------------------------------------------- kinds */

.bd-kind:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 2px;
}

/* -------------------------------------------------------- drag preview */

/* A layer dragged off its frame travels over the canvas as itself, drawn
   as it is: no card around it, no shadow. A tile's preview keeps its tile. */
.bd-ghost-el {
  position: fixed;
  z-index: var(--dt-z-toast);
  overflow: visible;
  pointer-events: none;
}

.bd-ghost-el.is-flat {
  overflow: hidden;
  border-radius: var(--dt-radius-control);
  box-shadow: var(--dt-elevation-3);
  opacity: 0.9;
}

.bd-ghost-inner {
  transform-origin: 0 0;
  pointer-events: none;
}

/* A loose object on the canvas has no page behind it. */
.bd-frame.is-bare {
  background: transparent;
  box-shadow: none;
}

.bd-stage.is-dark .bd-flabel {
  color: var(--dt-text-inverse);
}

/* ---------------------------------------------------------- layer parts */

.bd-layers-head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: var(--dt-space-inset-xs);
}

.bd-layers-head .bd-search {
  flex: 1;
  min-width: 0;
  margin-right: var(--dt-space-inset-2xs);
}

/* A component's own part: picked to change what it shows, through the
   component's props. */
.bd-layer.is-part {
  color: var(--dt-text-secondary);
}

.bd-layer-main.is-static {
  cursor: default;
}

/* ------------------------------------------------------ content kinds */

.bd-kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--dt-space-stack-xs);
  flex: none;
  margin: 0;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-md) var(--dt-space-inset-md);
  list-style: none;
}

/* The cards scroll with their panel, so every row can be as tall as the
   tallest card. */
.bd-assets.is-cards {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bd-assets .bd-kinds {
  padding-inline: var(--dt-space-inset-sm);
}

.bd-kinds > li {
  display: flex;
  min-width: 0;
}

/* A card: its picture across the top, the words under it. */
.bd-kind {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dt-space-stack-2xs);
  width: 100%;
  height: 100%;
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid transparent;
  border-radius: var(--dt-radius-container);
  background: var(--dt-surface-base);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--dt-color-neutral-950) 6%, transparent);
  color: var(--dt-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bd-kind:hover {
  border-color: var(--dt-border-default);
}

/* An Assets kind is its icon over its name, centred, like a primitive. */
.bd-asset-kinds .bd-kind {
  align-items: center;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-2xs);
  text-align: center;
}

.bd-kind-pics.is-asset {
  aspect-ratio: auto;
  height: var(--dt-size-control-md);
  background: none;
  color: var(--dt-text-primary);
}

.bd-asset-kinds .bd-kind-text {
  align-items: center;
}

.bd-asset-kinds .bd-kind-name {
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
}

.bd-asset-kinds .bd-kind-count {
  padding-top: 0;
}

.bd-asset-kinds .bd-kind-chev {
  display: none;
}

.bd-kind-pics {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-radius: calc(var(--dt-radius-container) - 4px);
  background: var(--dt-surface-sunken);
  color: var(--dt-text-secondary);
}

.bd-kind-pics > .bd-ic {
  width: var(--dt-size-icon-lg);
  height: var(--dt-size-icon-lg);
}

.bd-kind-count {
  margin-top: auto;
  padding-top: var(--dt-space-stack-2xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}

.bd-kind-pics img,
.bd-kind-pics video {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

.bd-kind-pics.is-icons img {
  object-fit: contain;
  padding: var(--dt-space-inset-2xs);
}

.bd-kind-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding-inline: var(--dt-space-inset-2xs);
}

.bd-kind-name {
  font-weight: var(--dt-font-weight-semibold);
}

.bd-kind-note {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  line-height: var(--dt-text-body-xs-line);
}

.bd-kind-chev {
  position: absolute;
  top: calc(var(--dt-space-inset-2xs) + 6px);
  right: calc(var(--dt-space-inset-2xs) + 6px);
  color: var(--dt-text-tertiary);
}

.bd-gallery-head {
  justify-content: flex-start;
}

/* ------------------------------------------------------ builder canvas */

.bd-stage-swatches .bd-seg-btn {
  min-width: var(--dt-size-control-sm);
}

.bd-stage-chip {
  display: block;
  width: var(--dt-size-icon-md);
  height: var(--dt-size-icon-md);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
}

.bd-stage-chip.is-default {
  background-color: var(--dt-surface-sunken);
  background-image: radial-gradient(var(--dt-border-strong) 1px, transparent 1px);
  background-size: 4px 4px;
}

.bd-canvas-row.is-tokens .bd-canvas-custom {
  display: none;
}

/* ------------------------------------------------------------- scrub */

/* A W or H that drags sideways to step through sizes. */
.bd-dd-prefix.is-scrub,
.bd-num-l.is-scrub {
  cursor: ew-resize;
  touch-action: none;
}

.bd-scrubbing,
.bd-scrubbing * {
  cursor: ew-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ------------------------------------------------- frame's components */

.bd-frame-items {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.bd-frame-item {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  width: 100%;
  min-height: calc(var(--dt-size-control-sm) - 4px);
  padding: 0 var(--dt-space-inset-xs);
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  text-align: left;
  cursor: pointer;
}

.bd-frame-item:hover {
  background: var(--dt-surface-sunken);
}

.bd-frame-item:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: -2px;
}

.bd-frame-item .bd-ic {
  flex: none;
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
  color: var(--dt-text-tertiary);
}

.bd-frame-item-name {
  flex: none;
  font-weight: var(--dt-font-weight-medium);
}

.bd-frame-item .bd-layer-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------- variables */

.bd-vars {
  flex: 1;
  min-height: 0;
  padding: 0 var(--dt-space-inset-sm) var(--dt-space-inset-md);
  overflow-y: auto;
}

.bd-vars-note {
  margin: 0 0 var(--dt-space-stack-xs);
}

.bd-vars-sec + .bd-vars-sec {
  margin-top: var(--dt-space-stack-sm);
}

.bd-vars-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr));
  gap: var(--dt-space-inline-2xs);
}

.bd-var {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  min-width: 0;
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-base);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  text-align: left;
  cursor: pointer;
}

.bd-var:hover {
  border-color: var(--dt-border-strong);
}

/* A component's own padding, offered as its default: dashed, since it is
   what applies when Padding is unset rather than a token to set. */
.bd-var-own {
  grid-column: 1 / -1;
  border-style: dashed;
}

.bd-var-own .bd-var-name {
  color: var(--dt-text-secondary);
}

.bd-var[aria-pressed="true"] {
  border-color: var(--dt-border-selected);
  box-shadow: inset 0 0 0 1px var(--dt-border-selected);
}

.bd-var:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 2px;
}

.bd-var-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-var-px {
  flex: none;
  min-width: 2ch;
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ floating panels */

/* On a wide screen the canvas runs the full width and the two panels float
   over it, inset from the edges with rounded corners. The camera keeps
   frames clear of them (insets, in builder.js). */
@media (min-width: 901px) {
  .bd-shell {
    position: relative;
    /* The room under the panels: a little more than at their other edges,
       and clear of a home indicator. */
    --bd-panel-foot: calc(var(--dt-space-inset-sm) + env(safe-area-inset-bottom, 0px));
    grid-template-rows: minmax(0, 1fr);
    /* The panels' widths, set from their edges and kept per browser. */
    grid-template-columns: var(--bd-left-w, 344px) minmax(0, 1fr) var(--bd-right-w, 312px);
  }

  /* Folded, the left panel is just its rail. */
  .bd-shell.is-left-closed {
    grid-template-columns: auto minmax(0, 1fr) var(--bd-right-w, 312px);
  }

  .bd-shell.is-left-closed > .bd-left {
    grid-template-columns: auto;
  }

  .bd-shell.is-left-closed > .bd-left .bd-left-body {
    display: none;
  }

  .bd-shell.is-left-closed > .bd-left .bd-rail {
    border-right: 0;
  }

  .bd-shell > .bd-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .bd-shell > .bd-left,
  .bd-shell > .bd-right {
    position: relative;
    z-index: 5;
    grid-row: 1;
    margin: var(--dt-space-inset-xs);
    margin-bottom: var(--bd-panel-foot);
    max-height: calc(100% - var(--dt-space-inset-xs) - var(--bd-panel-foot));
    border: var(--dt-border-width-default) solid var(--dt-border-subtle);
    border-radius: calc(var(--dt-radius-container) + 2px);
    box-shadow: var(--dt-elevation-2);
  }

  .bd-shell > .bd-left {
    grid-column: 1;
    margin-right: 0;
  }

  .bd-shell > .bd-right {
    grid-column: 3;
    margin-left: 0;
    padding-bottom: var(--dt-space-inset-md);
  }

  .bd-shell > .bd-left .bd-rail {
    border-right-color: var(--dt-border-subtle);
  }

  /* The tool bar sits in the middle of what the panels leave open. */
  .bd-shell:not(.is-bare) .bd-tools {
    left: calc(50% + (var(--bd-left-w, 344px) - var(--bd-right-w, 312px)) / 2);
  }

  /* A panel's inner edge resizes it: a line lights on hover, focus and drag. */
  .bd-panel-edge {
    position: absolute;
    z-index: 6;
    top: var(--dt-space-inset-xs);
    bottom: var(--bd-panel-foot);
    width: 9px;
    cursor: col-resize;
    touch-action: none;
  }

  .bd-panel-edge.is-left {
    left: calc(var(--bd-left-w, 344px) - 5px);
  }

  .bd-panel-edge.is-right {
    right: calc(var(--bd-right-w, 312px) - 5px);
  }

  .bd-panel-edge::after {
    content: "";
    position: absolute;
    top: var(--dt-space-inset-md);
    bottom: var(--dt-space-inset-md);
    left: 3px;
    width: 3px;
    border-radius: var(--dt-radius-pill);
    background: var(--bd-select);
    opacity: 0;
  }

  .bd-panel-edge:hover::after,
  .bd-panel-edge:focus-visible::after,
  html.bd-is-resizing .bd-panel-edge::after {
    opacity: 1;
  }

  .bd-panel-edge:focus-visible {
    outline: none;
  }

  /* While a panel resizes, frames don't take the pointer and nothing selects. */
  html.bd-is-resizing,
  html.bd-is-resizing * {
    cursor: col-resize !important;
    user-select: none;
  }

  html.bd-is-resizing iframe {
    pointer-events: none;
  }

  /* With the inspector folded away, one button at the edge brings it back. */
  .bd-panel-show {
    position: absolute;
    z-index: 6;
    top: var(--dt-space-inset-sm);
    right: var(--dt-space-inset-sm);
    display: inline-grid;
    place-items: center;
    width: var(--dt-size-control-md);
    height: var(--dt-size-control-md);
    border: var(--dt-border-width-default) solid var(--dt-border-subtle);
    border-radius: var(--dt-radius-control);
    background: var(--dt-surface-subtle);
    color: var(--dt-text-secondary);
    box-shadow: var(--dt-elevation-2);
    cursor: pointer;
  }

  .bd-panel-show:hover {
    color: var(--dt-text-primary);
  }

  .bd-panel-show:focus-visible {
    outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
    outline-offset: 2px;
  }
}

/* ------------------------------------------------------ the panel search */

/* One search, floating at the foot of the left panel, in the same place on
   every panel; it searches whichever is open. */
.bd-left-body {
  position: relative;
}

.bd-left-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--dt-size-control-md) + var(--dt-space-inset-md));
}

.bd-left-main > * {
  flex: 1;
  min-height: 0;
}

/* Configure's search hides the groups and settings that don't match. */
.bd-cfg-out {
  display: none !important;
}

.bd-left-main > .bd-config-none {
  flex: none;
  margin: 0;
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md);
}

.bd-search.bd-search-dock {
  position: absolute;
  right: var(--dt-space-inset-xs);
  bottom: var(--dt-space-inset-xs);
  left: var(--dt-space-inset-xs);
  z-index: 3;
  margin: 0;
}

.bd-search-dock input {
  min-height: var(--dt-size-control-md);
  border-color: var(--dt-border-glass);
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface-glass-strong);
  -webkit-backdrop-filter: var(--dt-backdrop-glass);
  backdrop-filter: var(--dt-backdrop-glass);
  box-shadow: var(--dt-elevation-2);
}

/* A template card: its name, then where it goes. */
.bd-tpl-card {
  cursor: default;
}

.bd-tpl-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
  padding: 0 var(--dt-space-inset-2xs);
}

/* Blend: what it is now, and an icon that opens the list. */
.bd-blend-row {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
}

.bd-blend-now {
  flex: 1;
  min-width: 0;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-sm);
}

.bd-mode-toggle[aria-pressed="true"] {
  background: var(--dt-surface-inverse);
  color: var(--dt-text-inverse);
}

/* ------------------------------------------------- the system, at rest */

.bd-sys-row {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
}

.bd-sys-row + .bd-sys-row {
  margin-top: var(--dt-space-stack-xs);
}

.bd-sys-label {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-medium);
}





.bd-sys-bar {
  flex: none;
  height: 6px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-text-tertiary);
}












.bd-layer.is-part.is-current {
  color: var(--dt-text-primary);
}

.bd-search-dock .bd-ic {
  z-index: 1;
}

/* On a phone the site's menu button floats bottom right; the search keeps clear. */
@media (max-width: 900px) {
  .bd-search.bd-search-dock {
    position: sticky;
    right: auto;
    left: auto;
    bottom: var(--dt-space-inset-xs);
    margin: var(--dt-space-inset-xs) calc(var(--dt-size-control-lg) + var(--dt-space-inset-md)) var(--dt-space-inset-xs) var(--dt-space-inset-xs);
  }

  .bd-left-main {
    padding-bottom: 0;
  }
}

/* The system at rest, as rows: what it shows, its name, its detail. */
.bd-sys-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-sys-item {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--dt-size-control-sm) - 2px);
  padding: 0 var(--dt-space-inset-xs);
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  text-align: left;
}

button.bd-sys-item {
  cursor: grab;
  touch-action: pan-y;
}

button.bd-sys-item:hover {
  background: var(--dt-surface-sunken);
}

button.bd-sys-item:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: -2px;
}

.bd-sys-lead {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dt-size-icon-lg);
  color: var(--dt-text-secondary);
}

.bd-sys-name {
  flex: none;
}

.bd-sys-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-sys-sw {
  width: var(--dt-size-icon-md);
  height: var(--dt-size-icon-md);
  border-radius: calc(var(--dt-radius-control) / 2);
}

.bd-sys-ag {
  font-size: var(--dt-font-size-md);
  line-height: 1;
}

/* ------------------------------------------------------ my components */

.bd-mine {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  margin: 0;
  padding: 0 var(--dt-space-inset-sm) var(--dt-space-inset-sm);
  overflow-y: auto;
  list-style: none;
}

.bd-mine-item {
  display: flex;
  align-items: center;
  gap: 2px;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: calc(var(--dt-radius-container) - 2px);
  background: var(--dt-surface-base);
}

.bd-mine-item:hover {
  border-color: var(--dt-border-strong);
}

.bd-mine-btn {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
  min-height: var(--dt-size-control-lg);
  padding: 0 var(--dt-space-inset-xs);
  border: 0;
  background: transparent;
  color: var(--dt-text-primary);
  font: inherit;
  text-align: left;
  cursor: grab;
  touch-action: pan-y;
}

.bd-mine-btn:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: -2px;
}

.bd-mine-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bd-mine-name {
  overflow: hidden;
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-mine-meta {
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}

.bd-comp-dlg {
  width: min(560px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 48px);
}

.bd-comp-body {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-sm);
  padding: var(--dt-space-inset-md);
  overflow-y: auto;
}

.bd-comp-status {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-radius: var(--dt-radius-control);
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
}

.bd-comp-status.is-ready {
  background: var(--dt-surface-success-subtle);
  color: var(--dt-text-success);
}

.bd-comp-status.is-blocked {
  background: var(--dt-surface-danger-subtle);
  color: var(--dt-text-danger);
}

.bd-comp-issues {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--dt-font-size-sm);
}

.bd-comp-issues li {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-inline-xs);
}

.bd-comp-issues .bd-ic {
  flex: none;
  margin-top: 2px;
}

.bd-comp-issues .is-error .bd-ic {
  color: var(--dt-text-danger);
}

.bd-comp-issues .is-warn .bd-ic {
  color: var(--dt-text-warning);
}

.bd-comp-tokens summary {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-sm);
  cursor: pointer;
}

.bd-comp-tokens ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
  margin: var(--dt-space-stack-xs) 0 0;
  padding: 0;
  list-style: none;
}

.bd-comp-tokens code {
  padding: 2px 6px;
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-sunken);
  font-size: var(--dt-font-size-xs);
}

/* ------------------------------------------------------------- projects */

/* The bar names the project on screen: the projects button, its name
   (double-click to rename) and a menu of what a project can do. */
.bd-project {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  min-width: 0;
}

.bd-project-name {
  overflow: hidden;
  max-width: 14rem;
  padding: 0 var(--dt-space-inset-2xs);
  border-radius: var(--dt-radius-control);
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bd-project-name:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

input.bd-project-name {
  width: 12rem;
  height: var(--dt-size-control-sm);
}

@media (max-width: 900px) {
  .bd-project-name {
    max-width: 8rem;
  }
}

.bd-btn-danger,
.bd-btn-danger:hover {
  background: var(--dt-surface-danger);
  border-color: var(--dt-surface-danger);
  color: var(--dt-text-on-danger);
}

/* The projects home: New, a big search, a sort, and a card per project
   and file. Every card's actions sit in a ⋯ menu beside its name. */
.bd-projects-search {
  margin: 0;
}

.bd-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  align-content: start;
  gap: var(--dt-space-inline-md);
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-md) var(--dt-space-inset-md);
  overflow-y: auto;
  list-style: none;
}

.bd-proj {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--dt-space-stack-2xs);
}

.bd-proj-open {
  display: block;
  width: 100%;
  padding: 0;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-container);
  background: var(--dt-surface-sunken);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dt-motion-micro), box-shadow var(--dt-motion-micro);
}

.bd-proj-open:hover {
  border-color: var(--dt-border-strong);
}

.bd-proj-open:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: var(--dt-focus-ring-offset);
}

.bd-proj.is-current .bd-proj-open {
  border-color: var(--dt-surface-action);
  box-shadow: 0 0 0 var(--dt-border-width-default) var(--dt-surface-action);
}

.bd-proj-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: var(--dt-text-tertiary);
}

.bd-proj-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.bd-proj-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bd-proj-name {
  overflow: hidden;
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

input.bd-proj-name {
  width: 100%;
  height: var(--dt-size-control-sm);
}

.bd-proj-meta {
  overflow: hidden;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bd-proj-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  font-size: var(--dt-font-size-xs);
}

.bd-proj-confirm span {
  margin-right: auto;
}

.bd-projects-empty {
  padding: var(--dt-space-inset-md);
}


/* On a phone, each project is a row: its picture, its name, and its actions
   in plain view beside them, so a screen shows several at once. The dialog's
   Close stays in its corner however the heading wraps. */
@media (max-width: 600px) {
  .bd-projects .bd-code-head,
  .bd-versions .bd-code-head,
  .bd-keys .bd-code-head {
    position: relative;
    padding-right: calc(var(--dt-space-inset-md) + var(--dt-size-control-md) + var(--dt-space-inline-xs));
  }

  .bd-projects .bd-code-actions .bd-act[aria-label="Close"],
  .bd-versions .bd-code-actions .bd-act[aria-label="Close"],
  .bd-keys .bd-code-actions .bd-act[aria-label="Close"] {
    position: absolute;
    top: var(--dt-space-inset-md);
    right: var(--dt-space-inset-md);
  }

  .bd-projects-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dt-space-stack-xs);
  }

  .bd-proj {
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: start;
    gap: 0 var(--dt-space-inline-sm);
  }

  .bd-proj-open {
    grid-row: 1 / span 2;
  }

  .bd-proj-confirm {
    grid-column: 2;
  }
}

/* The project's pages, in the left panel: one row each, the page on
   screen marked. */
.bd-pages-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bd-pages {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0 var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  list-style: none;
}

.bd-page {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--dt-size-control-sm);
  border-radius: var(--dt-radius-control);
}

.bd-page:hover {
  background: var(--dt-surface-raised);
}

.bd-page.is-current {
  background: var(--dt-surface-selected);
  color: var(--dt-text-on-selected);
}

.bd-page-open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-xs);
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--dt-font-size-sm);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.bd-page-open:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: -2px;
}

.bd-page-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

input.bd-page-name {
  flex: 1;
  min-width: 0;
  height: var(--dt-size-control-sm);
}

.bd-page-menu {
  opacity: 0;
}

.bd-page:hover .bd-page-menu,
.bd-page:focus-within .bd-page-menu,
.bd-page.is-current .bd-page-menu {
  opacity: 1;
}

@media (hover: none) {
  .bd-page-menu {
    opacity: 1;
  }
}

.bd-page-confirm {
  display: flex;
  gap: var(--dt-space-inline-2xs);
  padding-right: var(--dt-space-inset-2xs);
}

/* Folders in the list: a twisty, the name and how many pages. The pages in
   an open folder sit a step in. */
.bd-panel-acts {
  display: inline-flex;
  gap: var(--dt-space-inline-2xs);
}

.bd-pages {
  position: relative;
}

.bd-folder {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--dt-size-control-sm);
  border-radius: var(--dt-radius-control);
}

.bd-folder:hover {
  background: var(--dt-surface-raised);
}

.bd-folder.is-drop {
  background: var(--dt-surface-selected);
  color: var(--dt-text-on-selected);
}

.bd-folder-twisty {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dt-size-control-sm);
  height: var(--dt-size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: var(--dt-text-tertiary);
  cursor: pointer;
}

.bd-folder-twisty .bd-ic {
  width: var(--dt-size-icon-sm);
  height: var(--dt-size-icon-sm);
}

.bd-folder-open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-xs) 0 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.bd-folder-open:focus-visible,
.bd-folder-twisty:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: -2px;
}

.bd-folder-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

input.bd-folder-name {
  flex: 1;
  min-width: 0;
  height: var(--dt-size-control-sm);
}

.bd-folder-count {
  margin-left: auto;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-regular);
}

.bd-folder:hover .bd-page-menu,
.bd-folder:focus-within .bd-page-menu {
  opacity: 1;
}

.bd-page.is-nested {
  margin-left: var(--dt-space-inset-md);
}

.bd-page.is-moving {
  opacity: 0.4;
}

.bd-pages.is-dragging {
  cursor: grabbing;
}

.bd-pages.is-dragging .bd-page-open,
.bd-pages.is-dragging .bd-folder-open {
  cursor: grabbing;
}

/* Where the page would land: a line across the list, stepped in for a
   place inside a folder. */
.bd-page-drop {
  position: absolute;
  right: var(--dt-space-inset-xs);
  left: var(--dt-space-inset-xs);
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--dt-focus-ring-color);
  pointer-events: none;
}

.bd-page-drop.is-nested {
  left: calc(var(--dt-space-inset-xs) + var(--dt-space-inset-md));
}

/* Keyboard shortcuts: groups in columns, each a list of what and which keys. */
.bd-keys {
  width: min(960px, calc(100vw - 32px));
  height: min(720px, calc(100dvh - 48px));
}

.bd-keys-groups {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-md) var(--dt-space-inset-md);
  columns: 3 260px;
  column-gap: var(--dt-space-inline-lg);
}

.bd-keys-group {
  break-inside: avoid;
  margin-bottom: var(--dt-space-stack-md);
}

.bd-keys-group h3 {
  margin: 0 0 var(--dt-space-stack-2xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bd-keys-group dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--dt-space-stack-2xs) var(--dt-space-inline-sm);
  margin: 0;
}

.bd-keys-group dt {
  font-size: var(--dt-font-size-sm);
}

.bd-keys-group dd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--dt-space-inline-2xs);
  margin: 0;
}

.bd-keys-group kbd {
  padding: 0 var(--dt-space-inset-2xs);
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-sunken);
  color: var(--dt-text-secondary);
  font-family: inherit;
  font-size: var(--dt-font-size-xs);
  line-height: 1.6;
  white-space: nowrap;
}

/* Versions of the project on screen, newest first. */
.bd-versions {
  height: min(640px, calc(100dvh - 48px));
}

.bd-versions-list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-md) var(--dt-space-inset-md);
  overflow-y: auto;
  list-style: none;
}

.bd-version {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--dt-space-inline-sm);
  padding: var(--dt-space-inset-xs) 0;
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
}

.bd-version-when {
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
}

.bd-version-what {
  grid-column: 1;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}

.bd-version .bd-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (prefers-reduced-motion: reduce) {
  .bd-proj-open {
    transition: none;
  }
}

/* A frame far from view in a big project: its size and name, until it's
   panned near and comes alive. */
.bd-frame-ghost {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: var(--dt-border-width-default) dashed var(--dt-border-default);
  background: var(--dt-surface-raised);
  pointer-events: none;
}

.bd-frame-ghost-name {
  color: var(--dt-text-tertiary);
  font-size: calc(var(--dt-font-size-sm) * 2);
}

/* Content: the brand. The logo and mark show on a neutral tile at their own
   proportions; the name stands in for a logo file, set in the sans family. */
.bd-brand-intro {
  padding: 0 var(--dt-space-inset-md) var(--dt-space-inset-xs);
}

.bd-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-space-inline-xs);
  width: 100%;
  min-height: 88px;
  padding: var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-container);
  background: var(--dt-surface-sunken);
  color: var(--dt-text-primary);
  font: inherit;
  cursor: grab;
  touch-action: manipulation;
}

.bd-brand-tile:hover {
  border-color: var(--dt-border-default);
}

.bd-brand-tile:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 2px;
}

.bd-brand-tile img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.bd-brand-tile.is-mark img {
  max-height: 56px;
}

.bd-brand-tile.is-empty {
  flex-direction: column;
  border-style: dashed;
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  cursor: default;
}

.bd-brand-word {
  overflow: hidden;
  font-family: var(--dt-font-family-sans);
  font-size: var(--dt-font-size-lg);
  font-weight: var(--dt-font-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--dt-text-wordmark, var(--dt-text-primary));
}

.bd-kind-pics.is-brand img {
  object-fit: contain;
  padding: var(--dt-space-inset-2xs);
}

.bd-kind-pics.is-brand .bd-brand-word {
  padding-inline: var(--dt-space-inset-xs);
  font-size: var(--dt-font-size-md);
}

.bd-brand-err {
  margin: 0 var(--dt-space-inset-md);
  color: var(--dt-text-danger);
  font-size: var(--dt-font-size-xs);
}

/* ----------------------------------------------------------------- home */

/* Home: every project, as a page laid over the canvas, which keeps its
   place underneath. The bar names it and offers the way back. */
.builder {
  position: relative;
}

.bd-home {
  position: absolute;
  inset: 0;
  z-index: var(--dt-z-sticky, 20);
  overflow-y: auto;
  background: var(--dt-surface-base);
  color: var(--dt-text-primary);
}

.bd-home-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--dt-space-inset-lg) var(--dt-space-inset-md) var(--dt-space-inset-2xl);
}

.bd-home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dt-space-inline-md);
  padding: 0 var(--dt-space-inset-md) var(--dt-space-inset-sm);
}

.bd-home-title {
  margin: 0;
  font-size: var(--dt-text-heading-lg-size, 1.75rem);
  font-weight: var(--dt-font-weight-semibold);
  line-height: 1.15;
}

.bd-home .bd-projects-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bd-tb-home {
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-medium);
}

.bd-home-back {
  gap: var(--dt-space-inline-2xs);
}

/* Home and each project's page fade up as they arrive; a file's canvas
   fades in as it opens. */
@keyframes bd-home-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes bd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bd-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@keyframes bd-spin {
  to { transform: rotate(360deg); }
}
.bd-home {
  animation: bd-fade-in 0.18s ease-out both;
}
.bd-home-inner {
  animation: bd-home-in 0.24s ease-out both;
}
.bd-shell.is-arriving .bd-stage {
  animation: bd-fade-in 0.36s ease-out both;
}

.bd-home-heading {
  display: grid;
  gap: var(--dt-space-stack-2xs);
  min-width: 0;
}
.bd-home-crumbs {
  font-size: var(--dt-font-size-sm);
}
.bd-home-heading input.bd-home-title {
  width: min(100%, 28rem);
  height: auto;
  padding: 2px var(--dt-space-inset-xs);
  font: inherit;
  font-size: var(--dt-text-heading-lg-size, 1.75rem);
  font-weight: var(--dt-font-weight-semibold);
}
.bd-home-actions {
  align-items: center;
}

/* Dark mode: the builder's own switch, beside Account on Home. */
.bd-mode {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-sm);
}
.bd-mode-text {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
}
@media (max-width: 599px) {
  .bd-home-mode .bd-mode-word {
    display: none;
  }
}

/* New: the one primary button, a menu of what can be made. */
.bd-home-new.bd-dd {
  width: auto;
  padding: 0 var(--dt-space-inset-sm);
  border-color: var(--dt-surface-action);
  background: var(--dt-surface-action);
  color: var(--dt-text-on-action);
  font-weight: var(--dt-font-weight-medium);
}
.bd-home-new.bd-dd:hover {
  background: var(--dt-surface-action-hover, var(--dt-surface-action));
}

.bd-home-tools {
  display: grid;
  gap: var(--dt-space-stack-sm);
  padding: 0 var(--dt-space-inset-md) var(--dt-space-inset-md);
}
.bd-home-search input {
  height: calc(var(--dt-size-control-lg) + 4px);
  border-radius: var(--dt-radius-container);
  font-size: var(--dt-font-size-md, 1rem);
}
.bd-home-search .bd-ic {
  left: var(--dt-space-inset-sm);
  width: var(--dt-size-icon-md);
  height: var(--dt-size-icon-md);
}
.bd-home-search input {
  padding-left: calc(var(--dt-space-inset-sm) + var(--dt-size-icon-md) + var(--dt-space-inline-sm));
}
.bd-home-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-inline-sm);
}
.bd-home-sort.bd-seg {
  width: auto;
}
.bd-home-count {
  color: var(--dt-text-tertiary);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-xs);
}

.bd-home-lists {
  display: grid;
  gap: var(--dt-space-stack-md);
}
.bd-home-sec-title {
  margin: 0;
  padding: 0 var(--dt-space-inset-md);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-semibold);
}

/* A card: its picture, then its name and meta beside its ⋯ menu. */
.bd-proj-row {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
}
.bd-proj-row .bd-proj-info {
  flex: 1;
}
.bd-proj-menu.bd-dd {
  flex: none;
}

/* A project's picture: its own, or up to four of its files', two by two. */
.bd-proj-thumb.is-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 2px;
  place-items: stretch;
}
.bd-proj-thumb.is-mosaic img {
  position: static;
  min-height: 0;
}
.bd-proj-badge {
  position: absolute;
  top: var(--dt-space-inset-xs);
  left: var(--dt-space-inset-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface-overlay);
  box-shadow: var(--dt-elevation-1);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}
.bd-proj-badge .bd-ic {
  width: var(--dt-size-icon-xs);
  height: var(--dt-size-icon-xs);
}

/* Opening a file: its card shows it loading and the rest wait. */
.bd-proj-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--dt-surface-base) 55%, transparent);
  animation: bd-fade-in 0.15s ease-out both;
}
.bd-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--dt-border-default);
  border-top-color: var(--dt-text-primary);
  border-radius: 50%;
  animation: bd-spin 0.7s linear infinite;
}
.bd-projects:has(.bd-proj.is-opening) .bd-proj:not(.is-opening) {
  opacity: 0.6;
  transition: opacity var(--dt-motion-micro);
}

/* While the list is read: the shapes of cards, shimmering. */
.bd-skel {
  display: block;
  border-radius: var(--dt-radius-control);
  background: linear-gradient(90deg, var(--dt-surface-sunken) 0%, var(--dt-border-default) 50%, var(--dt-surface-sunken) 100%);
  background-size: 200% 100%;
  animation: bd-shimmer 1.2s linear infinite;
}
.bd-proj-skel {
  display: grid;
  align-content: start;
  gap: var(--dt-space-stack-2xs);
}
.bd-skel-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--dt-radius-container);
}
.bd-skel-line {
  width: 60%;
  height: 0.75rem;
}
.bd-skel-line.is-short {
  width: 35%;
}

@media (prefers-reduced-motion: reduce) {
  .bd-home,
  .bd-home-inner,
  .bd-shell.is-arriving .bd-stage,
  .bd-proj-loading {
    animation: none;
  }
  .bd-skel {
    animation: none;
  }
  .bd-spinner {
    animation-duration: 2s;
  }
}

@media (max-width: 900px) {
  .bd-home-inner {
    padding-top: var(--dt-space-inset-md);
  }

  .bd-home-back-text {
    display: none;
  }

  .bd-home .bd-projects-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------- sidebar pictures */

/* The Assets kinds, the containers and the templates show what they hold,
   the way the component tiles do: a live specimen, or a drawing. */
.bd-kind-pics.is-preview {
  position: relative;
  gap: var(--dt-space-inline-xs);
  aspect-ratio: 3 / 2;
  height: auto;
  padding: var(--dt-space-inset-2xs);
  background: var(--dt-surface-subtle);
}

.bd-kind-pics.is-preview > .bd-thumb {
  flex: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: none;
}

.bd-asset-kinds .bd-kind-pics.is-preview {
  width: 100%;
}

/* A frame drawn to its proportions: an outline on a sheet. */
.bd-kind-pics.is-frames {
  gap: 5px;
  align-items: flex-end;
  padding-bottom: var(--dt-space-inset-xs);
}

.bd-mini-frame {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  padding: 4px;
  border: var(--dt-border-width-default) solid var(--dt-border-strong);
  border-radius: 3px;
  background: var(--dt-surface-base);
}

.bd-mini-bar {
  display: block;
  height: 5px;
  border-radius: 2px;
  background: var(--dt-border-default);
}

.bd-mini-frame.is-free {
  position: relative;
  display: block;
}

.bd-mini-dot {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--dt-border-default);
}

.bd-mini-dot:nth-child(1) { top: 18%; left: 12%; }
.bd-mini-dot:nth-child(2) { top: 44%; left: 54%; width: 28%; aspect-ratio: 2; border-radius: 99px; }
.bd-mini-dot:nth-child(3) { bottom: 16%; left: 26%; }

.bd-mini-frame.is-tall {
  background: linear-gradient(var(--dt-border-default) 0 0) top 5px left 3px / calc(100% - 6px) 4px no-repeat,
    linear-gradient(var(--dt-border-subtle) 0 0) top 12px left 3px / calc(100% - 6px) 30% no-repeat,
    linear-gradient(var(--dt-border-subtle) 0 0) bottom 5px left 3px / calc(100% - 6px) 30% no-repeat,
    var(--dt-surface-base);
}

/* The system's colours, a chip each. */
.bd-kind-pics.is-swatches {
  gap: 4px;
  padding: var(--dt-space-inset-xs);
}

.bd-mini-swatch {
  flex: 1;
  height: 60%;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: calc(var(--dt-radius-control) / 2);
}

/* A page of bands, for a template. */
.bd-mini-page {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 46%;
  height: 86%;
  padding: 4px;
  border: var(--dt-border-width-default) solid var(--dt-border-strong);
  border-radius: 3px;
  background: var(--dt-surface-base);
}

.bd-mini-band {
  display: block;
  flex: 1;
  border-radius: 2px;
  background: var(--dt-border-subtle);
}

.bd-mini-band:first-child {
  flex: 2;
  background: var(--dt-border-default);
}

.bd-container-card .bd-kind-text,
.bd-tpl-card .bd-kind-text {
  padding-top: var(--dt-space-stack-2xs);
}

/* ------------------------------------------------------------- account */

/* The rail's tabs, then the Account button at the far end. */
.bd-rail-tabs {
  display: flex;
  flex-direction: inherit;
  gap: inherit;
  min-width: 0;
  min-height: 0;
}

/* A short screen scrolls the rail's tabs, so Account at its foot stays in
   view. Only the upright rail beside the panels; on a phone it runs across. */
@media (min-width: 901px) {
  .bd-left-tabs.bd-rail .bd-rail-tabs {
    overflow-y: auto;
    scrollbar-width: none;
  }
  .bd-left-tabs.bd-rail .bd-rail-tabs::-webkit-scrollbar { display: none; }
  .bd-rail-account { flex: none; }
}

.bd-rail-account {
  margin-top: auto;
}

.bd-rail-account.is-in .bd-ic {
  color: var(--dt-text-link);
}

.bd-acct {
  width: min(440px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 48px);
}

.bd-acct .bd-code-head {
  flex-wrap: nowrap;
  align-items: center;
}

.bd-acct .bd-code-intro {
  flex: 1 1 auto;
}

.bd-acct-body {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-sm);
  padding: var(--dt-space-inset-md);
  overflow-y: auto;
}

.bd-acct-body p {
  margin: 0;
}

.bd-acct-off,
.bd-acct-in,
.bd-acct-form {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-sm);
}

.bd-acct-field {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
}

.bd-acct-field .bd-input {
  min-height: var(--dt-size-control-md);
  /* 16px or more, so a phone doesn't zoom in on the field. */
  font-size: max(16px, var(--dt-font-size-sm));
}

.bd-acct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-space-inline-sm);
}

.bd-acct-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dt-text-link);
  font: inherit;
  font-size: var(--dt-font-size-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.bd-acct-switch {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-sm);
}

.bd-acct-who {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  overflow-wrap: anywhere;
}

.bd-acct-msg:empty {
  display: none;
}

.bd-acct-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-radius: var(--dt-radius-control);
  font-size: var(--dt-font-size-sm);
}

.bd-acct-msg .bd-ic {
  flex: none;
}

.bd-acct-msg.is-error {
  background: var(--dt-surface-danger-subtle);
  color: var(--dt-text-danger);
}

.bd-acct-msg.is-note {
  background: var(--dt-surface-success-subtle);
  color: var(--dt-text-success);
}

@media (max-width: 900px) {
  /* On a phone the rail is a row: Account takes just its icon at the end. */
  .bd-rail-tabs {
    flex: 1;
  }

  .bd-rail .bd-rail-account {
    flex: none;
    width: var(--dt-size-control-lg);
    margin-top: 0;
  }

  .bd-rail-account .bd-rail-label {
    display: none;
  }
}

/* Variables in Assets: this project's or everything. */
.bd-vars-scope {
  margin: 0 var(--dt-space-inset-sm) var(--dt-space-stack-sm);
}

/* Constraints: the pin square beside its two dropdowns. Each line is a
   button; a pinned one is solid in the selection colour. */
.bd-pins-row {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-sm);
}

.bd-pins-dds {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  min-width: 0;
}

.bd-pins {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-sunken);
}

.bd-pins-layer {
  position: absolute;
  inset: 26px;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: 3px;
  background: var(--dt-surface-raised);
}

.bd-pin-line {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.bd-pin-line::before {
  content: "";
  position: absolute;
  border-radius: 1px;
  background: var(--dt-border-strong);
}

.bd-pin-line.is-left,
.bd-pin-line.is-right,
.bd-pin-line.is-hcenter {
  height: 12px;
}

.bd-pin-line.is-left::before,
.bd-pin-line.is-right::before,
.bd-pin-line.is-hcenter::before {
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1px;
}

.bd-pin-line.is-top,
.bd-pin-line.is-bottom,
.bd-pin-line.is-vcenter {
  width: 12px;
}

.bd-pin-line.is-top::before,
.bd-pin-line.is-bottom::before,
.bd-pin-line.is-vcenter::before {
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 1px;
}

.bd-pin-line.is-left { left: 3px; top: 30px; width: 22px; }
.bd-pin-line.is-right { left: 47px; top: 30px; width: 22px; }
.bd-pin-line.is-top { top: 3px; left: 30px; height: 22px; }
.bd-pin-line.is-bottom { top: 47px; left: 30px; height: 22px; }
.bd-pin-line.is-hcenter { left: 28px; top: 30px; width: 16px; }
.bd-pin-line.is-vcenter { left: 30px; top: 28px; height: 16px; }

.bd-pin-line:hover::before {
  background: var(--dt-text-secondary);
}

.bd-pin-line.is-on::before {
  background: var(--bd-select);
}

.bd-pin-line.is-on.is-left::before,
.bd-pin-line.is-on.is-right::before,
.bd-pin-line.is-on.is-hcenter::before {
  height: 2px;
  margin-top: -0.5px;
}

.bd-pin-line.is-on.is-top::before,
.bd-pin-line.is-on.is-bottom::before,
.bd-pin-line.is-on.is-vcenter::before {
  width: 2px;
  margin-left: -0.5px;
}

.bd-pin-line:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: 1px;
  border-radius: 2px;
}

/* On the canvas: dashed lines from a selected free layer to the edges it
   keeps to. */
.bd-pin-mark {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.bd-pin-mark.is-x {
  height: 0;
  border-top: 1px dashed var(--bd-select);
}

.bd-pin-mark.is-y {
  width: 0;
  border-left: 1px dashed var(--bd-select);
}

/* View: layout columns and guides over the frames, under the selection's
   marks; rulers along the open canvas, above them. */
.bd-view {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.bd-cols {
  position: absolute;
  overflow: hidden;
}

.bd-col,
.bd-col-gut {
  position: absolute;
  top: 0;
  bottom: 0;
}

.bd-col {
  background: color-mix(in oklab, var(--bd-select) 10%, transparent);
  box-shadow: inset 1px 0 color-mix(in oklab, var(--bd-select) 35%, transparent), inset -1px 0 color-mix(in oklab, var(--bd-select) 35%, transparent);
}

.bd-col-gut {
  background: color-mix(in oklab, var(--bd-guide) 12%, transparent);
}

.bd-rguide {
  position: absolute;
  pointer-events: auto;
}

.bd-rguide.is-x {
  width: 7px;
  margin-left: -3px;
  cursor: ew-resize;
}

.bd-rguide.is-y {
  height: 7px;
  margin-top: -3px;
  cursor: ns-resize;
}

.bd-rguide::before {
  content: "";
  position: absolute;
  background: var(--bd-guide);
}

.bd-rguide.is-x::before {
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
}

.bd-rguide.is-y::before {
  left: 0;
  right: 0;
  top: 3px;
  height: 1px;
}

.bd-rguide:hover::before,
.bd-rguide.is-dragging::before {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bd-guide) 40%, transparent);
}

.bd-rguide.is-dragging {
  pointer-events: none;
}

.bd-rulers {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.bd-ruler,
.bd-ruler-corner {
  position: absolute;
  background: var(--dt-surface-raised);
  color: var(--dt-text-tertiary);
  font: var(--dt-font-weight-regular) 10px/1 var(--dt-font-family-mono);
  pointer-events: auto;
  user-select: none;
}

.bd-ruler {
  overflow: hidden;
}

.bd-ruler.is-top {
  top: 0;
  height: 20px;
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-default);
  cursor: ns-resize;
}

.bd-ruler.is-left {
  top: 20px;
  width: 20px;
  border-right: var(--dt-border-width-default) solid var(--dt-border-default);
  cursor: ew-resize;
}

.bd-ruler-corner {
  top: 0;
  width: 20px;
  height: 20px;
  border-right: var(--dt-border-width-default) solid var(--dt-border-default);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-default);
  pointer-events: none;
}

.bd-ruler-tick {
  position: absolute;
  background: var(--dt-border-strong);
}

.bd-ruler.is-top .bd-ruler-tick {
  bottom: 0;
  width: 1px;
  height: 7px;
}

.bd-ruler.is-left .bd-ruler-tick {
  right: 0;
  width: 7px;
  height: 1px;
}

.bd-ruler-num {
  position: absolute;
  white-space: nowrap;
}

.bd-ruler.is-top .bd-ruler-num {
  bottom: 9px;
  left: 3px;
}

.bd-ruler.is-left .bd-ruler-num {
  right: 9px;
  top: 3px;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: right top;
}

.bd-ruler-span {
  position: absolute;
  background: color-mix(in oklab, var(--bd-select) 30%, transparent);
}

.bd-ruler.is-top .bd-ruler-span {
  top: 0;
  bottom: 0;
}

.bd-ruler.is-left .bd-ruler-span {
  left: 0;
  right: 0;
}

.bd-ruler-at {
  position: absolute;
  background: var(--bd-guide);
}

.bd-ruler.is-top .bd-ruler-at {
  top: 0;
  bottom: 0;
  width: 1px;
}

.bd-ruler.is-left .bd-ruler-at {
  left: 0;
  right: 0;
  height: 1px;
}

/* The inspector, quiet: every control the same short filled field, labels
   small and muted, numbers in even figures, section titles as small as the
   labels but heavier, and hints as tooltips on their labels. The pictures
   that say more than a menu would (the pin square, the align matrix, the
   box model) keep their size. */
.bd-right {
  font-variant-numeric: tabular-nums;
}
.bd-right .bd-sec {
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm) var(--dt-space-inset-sm);
}
.bd-right .bd-sec-head {
  min-height: var(--dt-dim-6);
}
.bd-right .bd-sec-h {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}
.bd-right .bd-sec.is-closed .bd-sec-h {
  color: var(--dt-text-tertiary);
  font-weight: var(--dt-font-weight-medium);
}
.bd-right .bd-sec-dot {
  width: 5px;
  height: 5px;
}
.bd-right .bd-sec-empty {
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-right .bd-field {
  gap: var(--dt-space-stack-2xs);
  margin-top: var(--dt-space-stack-xs);
}
.bd-right .bd-field-label {
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
  font-weight: var(--dt-font-weight-regular, 400);
}
.bd-right .bd-field-label.has-tip {
  cursor: help;
}
.bd-right .bd-field-inline .bd-field-label {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
}
.bd-right .bd-dd,
.bd-right .bd-num,
.bd-right .bd-input {
  min-height: var(--dt-size-control-sm);
  border-radius: var(--dt-radius-control);
  font-size: var(--dt-font-size-xs);
}
.bd-right .bd-dd {
  padding: 0 var(--dt-space-inset-2xs, 4px) 0 var(--dt-space-inset-xs);
}
.bd-right .bd-num input {
  font-size: var(--dt-font-size-xs);
}
.bd-right .bd-num-l {
  font-family: inherit;
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-right .bd-dd-prefix {
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-right .bd-size-row {
  gap: var(--dt-space-inline-xs);
}
.bd-right .bd-seg {
  min-height: var(--dt-size-control-sm);
}
.bd-right .bd-seg-btn {
  font-size: var(--dt-font-size-xs);
}
.bd-right .bd-inspect-head {
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-sm) var(--dt-space-inset-xs);
}
.bd-right .bd-inspect-title {
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-semibold);
}
.bd-right .bd-arrange .bd-act,
.bd-right .bd-arrange .bd-dd-icon.bd-dd {
  border-color: transparent;
  background: none;
}
.bd-right .bd-arrange .bd-act:not([disabled]):hover,
.bd-right .bd-arrange .bd-dd-icon.bd-dd:hover {
  background: var(--bd-field);
}

/* The canvas icons play once, briskly, when their control is hovered or
   focused (their own CSS holds the motion and turns it off for reduced
   motion). */
.bd-ic.ci {
  --ci-repeat: 1;
  --ci-duration: 900ms;
  overflow: visible;
}

/* The Context panel: docs and skills the assistant reads, by scope. */
.bd-cx {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-size: var(--dt-font-size-xs);
  font-variant-numeric: tabular-nums;
}
.bd-cx-top {
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
}
.bd-cx-group {
  padding: var(--dt-space-inset-xs) 0;
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-cx-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dt-space-inline-xs);
  margin: 0;
  padding: var(--dt-space-inset-2xs, 4px) var(--dt-space-inset-sm);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-semibold);
}
.bd-cx-sub {
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
  font-weight: var(--dt-font-weight-regular, 400);
}
.bd-cx-empty {
  margin: 0;
  padding: var(--dt-space-inset-2xs, 4px) var(--dt-space-inset-sm) var(--dt-space-inset-xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-cx-item {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-inline-xs);
  padding: 0 var(--dt-space-inset-sm) 0 0;
}
.bd-cx-item.is-off .bd-cx-main {
  opacity: 0.55;
}
.bd-cx-item .bd-switch {
  margin-top: var(--dt-space-inset-xs);
  flex: none;
}
.bd-cx-open {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-xs) var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border: 0;
  border-radius: var(--dt-radius-control);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bd-cx-open:hover {
  background: var(--bd-field);
}
.bd-cx-open:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: -2px;
}
.bd-cx-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--dt-dim-7);
  height: var(--dt-dim-7);
  border-radius: var(--dt-radius-control);
  background: var(--bd-field);
  color: var(--dt-text-secondary);
}
.bd-cx-icon.is-skill {
  background: color-mix(in oklab, var(--dt-color-violet-500, #8b6cf6) 22%, transparent);
  color: color-mix(in oklab, var(--dt-color-violet-500, #8b6cf6) 70%, var(--dt-text-primary));
}
.bd-cx-icon .bd-ic {
  width: var(--dt-size-icon-xs, 14px);
  height: var(--dt-size-icon-xs, 14px);
}
.bd-cx-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bd-cx-title {
  overflow: hidden;
  font-weight: var(--dt-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-cx-when {
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-cx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
  margin-top: 2px;
}
.bd-cx-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--dt-space-inset-xs);
  border: 0;
  border-radius: var(--dt-radius-pill);
  background: var(--bd-field);
  color: var(--dt-text-secondary);
  font: inherit;
  font-size: var(--dt-font-size-2xs, 11px);
  cursor: pointer;
}
.bd-cx-chip.is-page,
.bd-cx-chip.is-on {
  background: color-mix(in oklab, var(--dt-color-primary-500, #e2541b) 20%, transparent);
  color: var(--dt-text-primary);
}
.bd-cx-chip.is-page {
  cursor: default;
}
.bd-cx-meter {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  margin-top: auto;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-cx-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bd-field);
}
.bd-cx-bar i {
  display: block;
  height: 100%;
  background: var(--dt-text-secondary);
}
.bd-cx-actions {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm) var(--dt-space-inset-sm);
}
.bd-cx-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
}
/* One item, open. */
.bd-cx-edit {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  min-height: 100%;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm) var(--dt-space-inset-sm);
}
.bd-cx-edit-head {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
}
.bd-cx-name {
  flex: 1;
  min-width: 0;
  font-weight: var(--dt-font-weight-semibold);
}
.bd-cx-field {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
}
.bd-cx-files {
  display: flex;
  flex-direction: column;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  overflow: hidden;
}
.bd-cx-file {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-2xs, 4px) var(--dt-space-inset-xs);
  border: 0;
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
  background: none;
  color: var(--dt-text-secondary);
  font: inherit;
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 11px);
  text-align: left;
  cursor: pointer;
}
.bd-cx-file:first-child {
  border-top: 0;
}
.bd-cx-file.is-on {
  background: var(--bd-field);
  color: var(--dt-text-primary);
}
.bd-cx-file > :nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-cx-file .bd-ic {
  width: 14px;
  height: 14px;
}
.bd-cx-body {
  flex: 1;
  min-height: 240px;
  padding: var(--dt-space-inset-xs);
  font-family: var(--dt-font-family-mono);
  font-size: var(--dt-font-size-2xs, 11px);
  line-height: 1.55;
  resize: vertical;
}
.bd-cx-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-inline-xs);
}

/* The Assistant panel: the conversation, and the box at its foot with what
   goes with the next message as chips. */
.bd-as {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  font-size: var(--dt-font-size-xs);
}
.bd-left-body:has(.bd-as) {
  display: flex;
  flex-direction: column;
}
.bd-left-main:has(.bd-as) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bd-as-head {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-as-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--dt-font-size-sm);
  font-weight: var(--dt-font-weight-semibold);
}
/* Live: requests leave the browser and cost, so the badge says so in colour. */
.bd-as-badge.is-live {
  color: var(--dt-color-green-500);
  background: color-mix(in srgb, var(--dt-color-green-500) 16%, transparent);
}
.bd-as-badge {
  flex: none;
  padding: 2px var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-pill);
  background: color-mix(in oklab, var(--dt-color-violet-500, #8b6cf6) 22%, transparent);
  color: var(--dt-text-primary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--dt-space-stack-sm);
  min-height: 0;
  overflow-y: auto;
  padding: var(--dt-space-inset-sm);
}
.bd-as-empty p {
  margin: 0 0 var(--dt-space-stack-xs);
  color: var(--dt-text-secondary);
}
.bd-as-sugg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
}
.bd-as-sugg button {
  padding: var(--dt-space-inset-2xs, 4px) var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  background: none;
  color: var(--dt-text-secondary);
  font: inherit;
  font-size: var(--dt-font-size-2xs, 11px);
  cursor: pointer;
}
.bd-as-sugg button:hover {
  background: var(--bd-field);
  color: var(--dt-text-primary);
}
.bd-as-me {
  align-self: flex-end;
  max-width: 88%;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-radius: 12px 12px 4px 12px;
  background: var(--bd-field-on, var(--bd-field));
  white-space: pre-wrap;
}
.bd-as-bot {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
}
.bd-as-step {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-ok .bd-ic {
  width: 12px;
  height: 12px;
}
.bd-as-step.is-failed .bd-as-ok {
  color: var(--dt-text-danger, #e5484d);
}
/* The checks that ran after a reply, on its change card. */
.bd-as-checks {
  padding: var(--dt-space-inset-2xs, 6px) 0;
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-as-checks-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px var(--dt-space-inset-sm);
  font-weight: 600;
}
.bd-as-check {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-height: 28px;
  padding: 2px var(--dt-space-inset-sm);
}
.bd-as-check-i {
  display: grid;
  flex: none;
  place-items: center;
}
.bd-as-check-i .bd-ic {
  width: 14px;
  height: 14px;
}
.bd-as-check.is-pass .bd-as-check-i {
  color: var(--dt-text-success, #2a9d5b);
}
.bd-as-check.is-warn .bd-as-check-i {
  color: var(--dt-text-warning, #c58a00);
}
.bd-as-check.is-fail .bd-as-check-i {
  color: var(--dt-text-danger, #e5484d);
}
.bd-as-check.is-skip {
  color: var(--dt-text-tertiary);
}
.bd-as-check-t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  color: var(--dt-text-secondary);
}
.bd-as-check.is-warn .bd-as-check-t,
.bd-as-check.is-fail .bd-as-check-t {
  color: var(--dt-text-primary);
}
.bd-as-check-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.bd-as-check-link:hover {
  text-decoration: underline;
}
.bd-as-check-d {
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
/* A note the model wrote between tool calls: what it's doing next. */
.bd-as-note-step {
  margin: 0;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
  font-style: italic;
}
/* When it looked at the canvas: the picture it saw, small. */
.bd-as-look {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-2xs, 6px);
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control, 8px);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-look img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  background: #fff;
}
.bd-as-look span {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  min-width: 0;
}
.bd-as-look .bd-ic {
  flex: none;
  width: 12px;
  height: 12px;
}
.bd-as-text {
  margin: 0;
  color: var(--dt-text-secondary);
  white-space: pre-wrap;
}
.bd-as-wait {
  color: var(--dt-text-tertiary);
}
.bd-as-err {
  color: var(--dt-text-danger, #e5484d);
}
/* Pictures going with the next message, and the ones a message carried. */
.bd-as-pics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-xs, 6px);
  padding-bottom: var(--dt-space-stack-2xs, 6px);
}
.bd-as-pic {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
}
.bd-as-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control, 8px);
  background: #fff;
}
.bd-as-pic-x {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: 50%;
  background: var(--bd-panel, var(--dt-surface-raised));
  color: var(--dt-text-secondary);
  cursor: pointer;
}
.bd-as-pic-x .bd-ic {
  width: 11px;
  height: 11px;
}
.bd-as-pic-x:hover,
.bd-as-pic-x:focus-visible {
  color: var(--dt-text-primary);
}
.bd-as-comp.is-drop {
  outline: 2px dashed var(--dt-border-strong, currentColor);
  outline-offset: -2px;
}
.bd-as-me-pics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 88%;
  margin-left: auto;
}
.bd-as-me-pics img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--dt-radius-control, 8px);
  background: #fff;
}
.bd-as-me-picnote {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 4px;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-me-picnote .bd-ic {
  width: 12px;
  height: 12px;
}
/* What a reply used, and the conversation's total. */
.bd-as-tok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
  font-variant-numeric: tabular-nums;
}
.bd-as-tok .bd-ic {
  width: 11px;
  height: 11px;
}
.bd-as-total {
  margin: var(--dt-space-stack-2xs, 6px) 0 0;
  padding-top: var(--dt-space-stack-2xs, 6px);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* A reply's words, from Markdown. */
.bd-md {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs, 6px);
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bd-md > * {
  margin: 0;
}
.bd-md strong {
  color: var(--dt-text-primary);
  font-weight: var(--dt-font-weight-semibold);
}
.bd-md .bd-md-h {
  margin-top: var(--dt-space-stack-2xs, 6px);
  color: var(--dt-text-primary);
  font-weight: var(--dt-font-weight-semibold);
}
.bd-md .bd-md-h:first-child {
  margin-top: 0;
}
.bd-md .bd-md-h.is-h1 {
  font-size: 1.08em;
}
.bd-md ul,
.bd-md ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: 1.25em;
}
.bd-md li::marker {
  color: var(--dt-text-tertiary);
}
.bd-md code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bd-field);
  color: var(--dt-text-primary);
  font-family: var(--dt-font-family-mono, ui-monospace, monospace);
  font-size: 0.92em;
}
.bd-md pre {
  max-width: 100%;
  padding: var(--dt-space-inset-xs, 8px);
  overflow-x: auto;
  border-radius: var(--dt-radius-control, 8px);
  background: var(--bd-field);
  white-space: pre;
}
.bd-md pre code {
  padding: 0;
  background: none;
}
.bd-md blockquote {
  padding-inline-start: var(--dt-space-inset-xs, 8px);
  border-inline-start: 2px solid var(--dt-border-subtle);
  color: var(--dt-text-tertiary);
}
.bd-md a {
  color: var(--dt-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* What a reply did, folded into one row that updates as it works. */
.bd-as-act {
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control, 8px);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-act-h,
.bd-as-fold {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs, 6px);
  width: 100%;
  min-height: 32px;
  padding: 4px var(--dt-space-inset-xs, 8px);
  border: 0;
  background: none;
  color: var(--dt-text-secondary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.bd-as-act-h:hover,
.bd-as-fold:hover {
  color: var(--dt-text-primary);
}
.bd-as-act-h:focus-visible,
.bd-as-fold:focus-visible {
  outline: 2px solid var(--dt-focus-ring, currentColor);
  outline-offset: -2px;
  border-radius: inherit;
}
.bd-as-act-i {
  display: grid;
  flex: none;
  place-items: center;
  width: 14px;
  height: 14px;
  color: var(--dt-text-success, #2a9d5b);
}
.bd-as-act.has-failed .bd-as-act-i {
  color: var(--dt-text-warning, #c58a00);
}
.bd-as-act-i .bd-ic {
  width: 14px;
  height: 14px;
}
.bd-as-act-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-as-act.is-running .bd-as-act-t {
  color: var(--dt-text-primary);
}
.bd-as-act-t.is-note {
  font-style: italic;
}
.bd-as-act-shot {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: cover;
  object-position: top;
  border-radius: 3px;
  background: #fff;
}
.bd-as-act-n {
  flex: none;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bd-field);
  color: var(--dt-text-tertiary);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.bd-as-act-chev {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--dt-text-tertiary);
  transition: transform var(--dt-motion-duration-fast, 120ms) ease;
}
.bd-as-act-chev .bd-ic {
  width: 12px;
  height: 12px;
}
.is-open > .bd-as-act-h .bd-as-act-chev,
.is-open > .bd-as-fold .bd-as-act-chev {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .bd-as-act-chev {
    transition: none;
  }
}
.bd-as-act-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 2px var(--dt-space-inset-xs, 8px) var(--dt-space-inset-xs, 8px);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
  list-style: none;
}
.bd-as-act-list .bd-as-step {
  align-items: flex-start;
  min-height: 22px;
  padding-top: 3px;
}
.bd-as-act-list .bd-as-ok {
  display: grid;
  flex: none;
  place-items: center;
  width: 14px;
  height: 14px;
}
.bd-as-step-t {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bd-as-act-list .bd-as-step {
  color: var(--dt-text-secondary);
}
.bd-as-step.is-running {
  color: var(--dt-text-primary);
}
.bd-as-step-shot {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  background: #fff;
}
.bd-as-act-list .bd-as-note-step {
  padding: 3px 0 1px 20px;
}
/* Working: a small ring that turns, or holds still with reduced motion. */
.bd-as-spin {
  display: block;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--dt-border-subtle);
  border-top-color: var(--dt-text-secondary);
  border-radius: 50%;
  animation: bd-as-spin 0.8s linear infinite;
}
@keyframes bd-as-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bd-as-spin {
    animation: none;
    border-top-color: var(--dt-text-tertiary);
  }
}
/* The change card's head folds its rows away. */
.bd-as-plan .bd-as-card-h.bd-as-fold {
  flex-direction: row;
  align-items: center;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  color: var(--dt-text-primary);
  font-weight: var(--dt-font-weight-semibold);
}
.bd-as-plan .bd-as-fold > span:first-child {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: var(--dt-space-inline-xs, 6px);
  min-width: 0;
}
.bd-as-changes .bd-as-fold {
  justify-content: space-between;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  color: var(--dt-text-primary);
  font-size: inherit;
  font-weight: var(--dt-font-weight-semibold);
}
.bd-as-fold-r {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-xs, 6px);
}
.bd-as-note.is-warn {
  color: var(--dt-text-warning, #c58a00);
}
.bd-as-card {
  margin-top: var(--dt-space-stack-2xs);
  overflow: hidden;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-container, 10px);
}
.bd-as-card-h {
  display: flex;
  justify-content: space-between;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  font-weight: var(--dt-font-weight-semibold);
}
.bd-as-note {
  color: var(--dt-text-tertiary);
  font-weight: var(--dt-font-weight-regular, 400);
}
.bd-as-row {
  display: flex;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-2xs, 4px) var(--dt-space-inset-sm);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-as-n {
  flex: none;
  min-width: 64px;
  color: var(--dt-text-tertiary);
}
.bd-as-v {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bd-as-row {
  align-items: center;
}
.bd-as-row.is-undone .bd-as-v {
  color: var(--dt-text-tertiary);
  text-decoration: line-through;
}
/* Undo back to a change: shown on hover or focus, so the card stays quiet. */
.bd-as-row-undo {
  flex: none;
  opacity: 0;
}
.bd-as-row:hover .bd-as-row-undo,
.bd-as-row-undo:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .bd-as-row-undo {
    opacity: 1;
  }
}
.bd-as-on {
  color: var(--dt-text-tertiary);
}
.bd-as-acts {
  display: flex;
  gap: var(--dt-space-inline-2xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-as-retry {
  margin-left: auto;
}
.bd-as-comp {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  margin: var(--dt-space-inset-xs) var(--dt-space-inset-sm) var(--dt-space-inset-sm);
  padding: var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-container, 10px);
  background: var(--bd-field);
}
.bd-as-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-2xs);
}
.bd-as-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 4px 0 var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-pill);
  background: var(--bd-field);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-chip .bd-ic {
  width: 12px;
  height: 12px;
}
.bd-as-chip button {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--dt-text-tertiary);
  font: inherit;
  cursor: pointer;
}
.bd-as-chip.is-target {
  background: color-mix(in oklab, var(--dt-color-primary-500, #e2541b) 20%, transparent);
  color: var(--dt-text-primary);
}
.bd-as-chip.is-target.is-off {
  background: var(--bd-field);
  color: var(--dt-text-tertiary);
  text-decoration: line-through;
}
.bd-as-chip.is-skill {
  padding-right: var(--dt-space-inset-xs);
  background: color-mix(in oklab, var(--dt-color-violet-500, #8b6cf6) 22%, transparent);
}
.bd-as-input {
  width: 100%;
  min-height: 44px;
  padding: var(--dt-space-inset-2xs, 4px);
  border: 0;
  background: none;
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  resize: none;
}
.bd-as-input:focus-visible {
  outline: none;
}
.bd-as-comp:focus-within {
  box-shadow: 0 0 0 var(--dt-focus-ring-width) var(--dt-focus-ring-color);
}
.bd-as-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-space-inline-xs);
}
/* A plan waiting on the person's answer: its title, and the frame it
   makes on a line of its own. */
.bd-as-plan .bd-as-card-h {
  flex-direction: column;
  gap: 2px;
}
.bd-as-plan .bd-as-card-h > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  min-width: 0;
}
.bd-as-plan .bd-as-card-h .bd-ic {
  width: 14px;
  height: 14px;
}
.bd-as-plan-steps {
  margin: 0;
  padding: 0 var(--dt-space-inset-sm);
  list-style: none;
  counter-reset: bd-plan;
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-as-plan-steps li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-2xs, 6px) 0;
  counter-increment: bd-plan;
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-as-plan-steps li:last-child {
  border-bottom: 0;
}
.bd-as-plan-steps li::before {
  content: counter(bd-plan);
  display: grid;
  grid-row: span 2;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 9px;
  background: var(--bd-field-on, var(--bd-field));
  color: var(--dt-text-secondary);
  font-size: 10px;
}
.bd-as-plan-steps b {
  font-weight: var(--dt-font-weight-medium, 500);
}
.bd-as-plan-steps span {
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-plan-notes p {
  display: flex;
  gap: var(--dt-space-inline-2xs);
  align-items: flex-start;
  margin: 0 var(--dt-space-inset-sm) var(--dt-space-inset-xs);
  padding: var(--dt-space-inset-2xs, 6px) var(--dt-space-inset-xs);
  border-radius: var(--dt-radius-control, 6px);
  background: color-mix(in oklab, var(--dt-text-warning, #c58a00) 14%, transparent);
  color: var(--dt-text-secondary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-plan-notes .bd-ic {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  color: var(--dt-text-warning, #c58a00);
}
.bd-as-plan-skip {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  padding: 0 var(--dt-space-inset-sm) var(--dt-space-inset-xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
/* A question with a few ways to go: each option a row to click, with its
   letter, its label and what it means. */
.bd-as-ask .bd-as-card-h {
  gap: var(--dt-space-inline-xs);
}
.bd-as-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-inline-xs);
  width: 100%;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border: 0;
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bd-as-opt:hover:not(:disabled), .bd-as-opt.is-chosen {
  background: color-mix(in oklab, var(--dt-text-primary) 6%, transparent);
}
.bd-as-opt:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: calc(var(--dt-focus-ring-width) * -1);
}
.bd-as-opt:disabled {
  cursor: default;
}
.bd-as-opt:disabled:not(.is-chosen) {
  opacity: 0.6;
}
.bd-as-opt-k {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--dt-border-width-default) var(--dt-border-default);
  color: var(--dt-text-secondary);
  font-size: 10px;
}
.bd-as-opt.is-chosen .bd-as-opt-k {
  background: var(--dt-text-primary);
  box-shadow: none;
  color: var(--dt-surface-raised);
}
.bd-as-opt-k .bd-ic {
  width: 11px;
  height: 11px;
}
.bd-as-opt-t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.bd-as-opt-t b {
  font-weight: var(--dt-font-weight-medium, 500);
}
.bd-as-opt-t span {
  color: var(--dt-text-tertiary);
}
.bd-as-opt-other .bd-as-opt-t span {
  color: var(--dt-text-secondary);
}
.bd-as-ask-said {
  display: flex;
  gap: var(--dt-space-inline-xs);
  margin: 0;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
  color: var(--dt-text-secondary);
}
.bd-as-ask-said .bd-ic {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}
/* What the person changed since the last reply: a dashed card in the
   thread, and above the message box until it's sent. */
.bd-as-edits {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-2xs);
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) dashed var(--dt-border-default);
  border-radius: var(--dt-radius-container, 10px);
}
.bd-as-edits.is-pending {
  margin: 0 var(--dt-space-inset-sm) var(--dt-space-stack-2xs);
}
.bd-as-edits-h {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
}
.bd-as-edits-h b {
  flex: 1;
  min-width: 0;
  font-weight: var(--dt-font-weight-medium, 500);
}
.bd-as-edits-h > .bd-ic {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--dt-text-tertiary);
}
.bd-as-edits-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0 0 0 20px;
  color: var(--dt-text-secondary);
  overflow-wrap: anywhere;
}
.bd-as-edits-more {
  color: var(--dt-text-tertiary);
  list-style: none;
}
.bd-as-edits-n {
  margin: 0;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}
/* A note typed while a reply runs, until that reply hears it. */
.bd-as-me-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.bd-as-me.is-queued {
  opacity: 0.8;
}
.bd-as-queued {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-queued .bd-ic {
  width: 12px;
  height: 12px;
}
.bd-as-divider {
  margin: 0;
  padding-top: var(--dt-space-stack-xs, 8px);
  border-top: var(--dt-border-width-default) dashed var(--dt-border-subtle);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
  text-align: center;
}
/* The panel's menu: its settings and the thread's actions. */
/* The menu opens across the panel, so it's never cut off at its edge. */
.bd-as-pop {
  position: absolute;
  z-index: 20;
  top: 44px;
  right: var(--dt-space-inset-xs, 8px);
  left: var(--dt-space-inset-xs, 8px);
  padding: var(--dt-space-inset-2xs, 6px) 0;
  border-radius: var(--dt-radius-container, 10px);
  background: var(--dt-surface-raised);
  box-shadow: 0 0 0 1px var(--dt-border-subtle), var(--dt-elevation-3, 0 12px 32px rgba(0, 0, 0, 0.3));
}
.bd-as-mrow {
  display: flex;
  gap: var(--dt-space-inline-sm);
  align-items: flex-start;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
}
.bd-as-mrow-t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.bd-as-mrow-t b {
  font-weight: var(--dt-font-weight-medium, 500);
}
.bd-as-mrow-t span,
.bd-as-mnote {
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-2xs, 11px);
}
.bd-as-mnote {
  margin: 0;
  padding: 0 var(--dt-space-inset-sm) var(--dt-space-inset-2xs, 4px);
}
.bd-as-pop hr {
  margin: var(--dt-space-inset-2xs, 4px) 0;
  border: 0;
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-as-mbtn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-2xs, 6px) var(--dt-space-inset-sm);
  border: 0;
  background: none;
  color: var(--dt-text-secondary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.bd-as-mbtn:hover:not(:disabled) {
  background: var(--bd-field-on, var(--bd-field));
  color: var(--dt-text-primary);
}
.bd-as-mbtn:disabled {
  opacity: 0.5;
  cursor: default;
}
.bd-as-mbtn .bd-ic {
  width: 14px;
  height: 14px;
}
.bd-as-sp {
  flex: 1;
}
.bd-as-send {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--dt-text-primary);
  color: var(--dt-surface-raised);
  cursor: pointer;
}
.bd-as-send:disabled {
  opacity: 0.4;
  cursor: default;
}
.bd-as-send .bd-ic {
  width: 14px;
  height: 14px;
}
.bd-as-acts .bd-btn {
  white-space: nowrap;
}
/* Variants of a frame: a row each with Show, and Keep buttons that wrap. */
.bd-as-variants .bd-as-card-h > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-inline-2xs);
  min-width: 0;
}
.bd-as-variants .bd-as-card-h .bd-ic {
  width: 14px;
  height: 14px;
}
.bd-as-variants .bd-as-row {
  align-items: center;
}
.bd-as-variants .bd-as-vk {
  min-width: 14px;
}
.bd-as-variants .bd-as-row.is-kept .bd-as-v {
  font-weight: var(--dt-font-weight-medium, 500);
}
.bd-as-keeps {
  flex-wrap: wrap;
}
.bd-as-variants-n {
  margin: 0;
  padding: 0 var(--dt-space-inset-sm) var(--dt-space-inset-xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}
/* The file's conversations: a row each that opens it, with what was said
   last and the changes still standing; the open one marked. */
.bd-as-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: var(--dt-space-inset-xs) 0;
}
.bd-as-grp {
  display: flex;
  justify-content: space-between;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm) var(--dt-space-inset-2xs);
  color: var(--dt-text-secondary);
  font-weight: var(--dt-font-weight-semibold);
}
.bd-as-tr {
  display: flex;
  align-items: flex-start;
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-as-tr.is-open {
  background: color-mix(in oklab, var(--dt-text-primary) 6%, transparent);
}
.bd-as-tr-open {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--dt-space-inset-xs) var(--dt-space-inset-sm);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bd-as-tr-open:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: calc(var(--dt-focus-ring-width) * -1);
}
.bd-as-tr-h {
  display: flex;
  gap: var(--dt-space-inline-xs);
}
.bd-as-tr-h b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--dt-font-weight-medium, 500);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-as-tr-said {
  color: var(--dt-text-secondary);
  overflow-wrap: anywhere;
}
.bd-as-tr-m {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-inline-xs);
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}
.bd-as-tr-m:empty {
  display: none;
}
.bd-as-tr-m span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.bd-as-tr-m .bd-ic {
  width: 11px;
  height: 11px;
}
.bd-as-tr-del {
  margin: var(--dt-space-inset-xs) var(--dt-space-inset-xs) 0 0;
  opacity: 0;
}
.bd-as-tr:hover .bd-as-tr-del, .bd-as-tr-del:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .bd-as-tr-del {
    opacity: 1;
  }
}
.bd-as-empty-l, .bd-as-list-n {
  margin: 0;
  padding: var(--dt-space-inset-sm);
  color: var(--dt-text-tertiary);
}
.bd-as-list-n {
  margin-top: auto;
  font-size: var(--dt-font-size-xs);
}
/* Who sent a message, above it, in a shared conversation. */
.bd-as-from {
  align-self: flex-end;
  color: var(--dt-text-tertiary);
  font-size: var(--dt-font-size-xs);
}
.bd-as-mrow.is-off .bd-switch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The inspector in two parts: what a layer is and says, then a divider,
   then where it sits. With properties of its own above, the second part
   folds into one line. */
.bd-insp-divider {
  height: 4px;
  background: var(--dt-surface-sunken);
}

.bd-place-sum {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  width: 100%;
  min-height: var(--dt-size-control-md);
  padding: 0 var(--dt-space-inset-sm);
  border: 0;
  border-bottom: var(--dt-border-width-default) solid var(--dt-border-subtle);
  background: none;
  color: var(--dt-text-secondary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  text-align: start;
  cursor: pointer;
}

.bd-place-sum:hover {
  color: var(--dt-text-primary);
}

.bd-place-sum:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: calc(-1 * var(--dt-focus-ring-width));
}

.bd-place-sum-h {
  flex: none;
  color: var(--dt-text-primary);
  font-weight: var(--dt-font-weight-semibold);
}

.bd-place-sum-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--dt-text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A frame's sections: a card each, folded until pressed. */
.bd-part {
  margin-top: var(--dt-space-stack-2xs);
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
}

.bd-part.is-hidden .bd-part-name {
  opacity: 0.5;
}

.bd-part-head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline-end: 2px;
}

.bd-part-name {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  min-width: 0;
  min-height: var(--dt-size-control-sm);
  padding: 0 var(--dt-space-inset-xs);
  border: 0;
  background: none;
  color: var(--bd-component);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  font-weight: var(--dt-font-weight-semibold);
  text-align: start;
  cursor: pointer;
}

.bd-part-name span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-part-name:focus-visible {
  outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color);
  outline-offset: -2px;
}

.bd-part-chev {
  color: var(--dt-text-tertiary);
}

.bd-part-body {
  padding: 0 var(--dt-space-inset-xs) var(--dt-space-inset-xs);
}
/* Agent composer: reach and effort are one icon each, lit when pressed. */
.bd-as-toggle[aria-pressed="true"] {
  background: var(--dt-surface-selected);
  box-shadow: inset 0 0 0 var(--dt-border-width-default) var(--dt-border-strong);
  color: var(--dt-text-primary);
}

/* Dovetail Icons: the library as a searchable grid by category, in Content's
   Icons gallery and in the inspector's icon picker. */
.bd-iconlib-grid {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  min-width: 0;
}
.bd-iconlib-group { min-width: 0; }
.bd-iconlib-cat {
  margin: var(--dt-space-stack-2xs) 0;
  font-size: var(--dt-font-size-2xs);
  font-weight: var(--dt-font-weight-medium);
  color: var(--dt-text-tertiary);
}
.bd-iconlib-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: var(--dt-space-inline-2xs);
}
.bd-iconlib-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: none;
  color: var(--dt-text-secondary);
  cursor: pointer;
  touch-action: manipulation;
}
.bd-iconlib-cell:hover { background: var(--dt-surface-hover, var(--dt-surface-sunken)); color: var(--dt-text-primary); }
.bd-iconlib-cell:focus-visible { outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color); outline-offset: -2px; }
.bd-iconlib-cell.is-on { background: var(--dt-surface-selected); color: var(--dt-text-on-selected); }
.bd-iconpick { display: flex; flex-direction: column; gap: var(--dt-space-stack-xs); min-width: 0; }
.bd-iconpick .bd-iconlib-grid { max-height: 320px; overflow: auto; overscroll-behavior: contain; }
.bd-iconpick-btn {
  display: flex;
  align-items: center;
  gap: var(--dt-space-inline-xs);
  width: 100%;
  min-height: 36px;
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-control);
  background: var(--dt-surface-sunken);
  color: var(--dt-text-primary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  text-align: start;
  cursor: pointer;
}
.bd-iconpick-glyph { display: inline-flex; color: var(--dt-text-primary); }
.bd-iconpick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-iconpick-act { color: var(--dt-text-secondary); }

/* A component's own properties: its name opens like a tab into a box in
   the component colour that holds them, so they read as the component's. */
.bd-inspect.is-comp .bd-inspect-head {
  padding-left: var(--dt-space-inset-sm);
  padding-bottom: 0;
  border-bottom: 0;
}
.bd-inspect.is-comp .bd-head-row .bd-inspect-title {
  flex: 0 1 auto;
  margin-bottom: -1px;
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid color-mix(in oklch, var(--bd-component) 45%, transparent);
  border-bottom: 0;
  border-radius: var(--dt-radius-control) var(--dt-radius-control) 0 0;
  background: color-mix(in oklch, var(--bd-component) 16%, var(--dt-surface-subtle));
  color: var(--dt-text-primary);
}
.bd-inspect.is-comp .bd-inspect-title > .bd-ic { color: var(--bd-component); }
.bd-props-box {
  margin: 0 var(--dt-space-inset-sm) var(--dt-space-inset-sm);
  border: var(--dt-border-width-default) solid color-mix(in oklch, var(--bd-component) 45%, transparent);
  border-radius: 0 var(--dt-radius-container, var(--dt-radius-control)) var(--dt-radius-container, var(--dt-radius-control)) var(--dt-radius-container, var(--dt-radius-control));
  background: color-mix(in oklch, var(--bd-component) 16%, var(--dt-surface-subtle));
  overflow: hidden;
}
.bd-props-box > .bd-sec {
  padding-left: var(--dt-space-inset-sm);
  padding-right: var(--dt-space-inset-sm);
  border-bottom-color: color-mix(in oklch, var(--bd-component) 25%, transparent);
}
.bd-props-box > .bd-sec:last-child { border-bottom: 0; }

/* Stretch and Space between: two icon toggles, side by side, no labels. */
.bd-flex-pair:has(> .bd-flex-tog) {
  display: flex;
  gap: var(--dt-space-inline-2xs);
}
.bd-flex-tog { flex: none; }

/* A field above the size grid (Text box, Lines) keeps its distance from W and H. */
.bd-sec .bd-field + .bd-grid2 { margin-top: var(--dt-space-stack-sm); }

/* A page's or folder's icon: its own button, to pick one from the library
   or an emoji, in a chooser that opens under the row. */
.bd-page, .bd-folder { position: relative; }
.bd-item-ico-wrap { display: contents; }
.bd-item-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--dt-size-control-xs);
  height: var(--dt-size-control-xs);
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: none;
  color: var(--dt-text-secondary);
  cursor: pointer;
}
.bd-item-ico:hover, .bd-item-ico[aria-expanded="true"] { background: var(--dt-surface-sunken); color: var(--dt-text-primary); }
.bd-item-ico:focus-visible { outline: var(--dt-focus-ring-width) solid var(--dt-focus-ring-color); outline-offset: -2px; }
.bd-item-glyph { display: inline-flex; line-height: 1; }
.bd-item-glyph.is-emoji { font-size: var(--dt-font-size-sm); }
.bd-chooser {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-stack-xs);
  max-height: 340px;
  margin-top: 2px;
  padding: var(--dt-space-inset-sm);
  overflow: auto;
  overscroll-behavior: contain;
  border: var(--dt-border-width-default) solid var(--dt-border-default);
  border-radius: var(--dt-radius-container, var(--dt-radius-control));
  background: var(--dt-surface-raised);
  box-shadow: var(--dt-shadow-lg, var(--dt-shadow-md));
}
.bd-chooser-head { display: flex; align-items: center; justify-content: space-between; gap: var(--dt-space-inline-xs); }
.bd-chooser-tabs { display: flex; gap: 2px; }
.bd-chooser-tab {
  padding: var(--dt-space-inset-2xs) var(--dt-space-inset-xs);
  border: 0;
  border-radius: var(--dt-radius-control);
  background: none;
  color: var(--dt-text-secondary);
  font: inherit;
  font-size: var(--dt-font-size-xs);
  cursor: pointer;
}
.bd-chooser-tab[aria-selected="true"] { background: var(--dt-surface-selected); color: var(--dt-text-on-selected); }
.bd-emoji-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 2px; }
.bd-emoji-cell {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--dt-radius-control);
  background: none;
  font-size: var(--dt-font-size-md);
  cursor: pointer;
}
.bd-emoji-cell:hover, .bd-emoji-cell.is-on { background: var(--dt-surface-sunken); }
.bd-emoji-own { display: flex; gap: var(--dt-space-inline-xs); margin-top: var(--dt-space-stack-xs); }
.bd-emoji-own .bd-input { flex: 1; min-width: 0; }

/* A component's page in Assets: a live preview, its properties, Insert. */
.bd-cd { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bd-cd-blurb { margin: 0; padding: 0 var(--dt-space-inset-md) var(--dt-space-inset-xs); color: var(--dt-text-secondary); font-size: var(--dt-font-size-xs); }
.bd-cd-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  max-height: 320px;
  margin: 0 var(--dt-space-inset-md);
  padding: var(--dt-space-inset-sm);
  overflow: hidden;
  border: var(--dt-border-width-default) solid var(--dt-border-subtle);
  border-radius: var(--dt-radius-container, var(--dt-radius-control));
  background: var(--dt-surface-subtle);
  cursor: grab;
  touch-action: pan-y;
}
.bd-cd-stage { transform-origin: center; pointer-events: none; max-width: none; }
.bd-cd-fit { position: relative; overflow: hidden; }
.bd-cd-props { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--dt-space-inset-md) var(--dt-space-inset-md); }
.bd-cd-props .bd-field.is-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.bd-cd-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--dt-space-inline-xs);
  padding: var(--dt-space-inset-sm) var(--dt-space-inset-md);
  border-top: var(--dt-border-width-default) solid var(--dt-border-subtle);
}
.bd-cd-insert { flex: 1; justify-content: center; }
/* What's built from it: small live examples, two across (one for blocks). */
.bd-cd-sub { margin: var(--dt-space-inset-sm) 0 var(--dt-space-inset-xs); color: var(--dt-text-secondary); font-size: var(--dt-font-size-xs); font-weight: var(--dt-font-weight-medium, 500); }
.bd-cd-examples { margin-bottom: var(--dt-space-inset-xs); }
.bd-cd-ex-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dt-space-inset-xs); margin: 0; padding: 0; list-style: none; }
.bd-cd-ex-list.is-wide { grid-template-columns: minmax(0, 1fr); }
.bd-cd-ex {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-inset-2xs);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: grab;
}
.bd-cd-ex .bd-cd-preview.is-example { min-height: 88px; max-height: 120px; margin: 0; padding: var(--dt-space-inset-xs); pointer-events: none; }
.bd-cd-ex-list.is-wide .bd-cd-ex .bd-cd-preview.is-example { max-height: 150px; }
.bd-cd-ex.is-on .bd-cd-preview.is-example { border-color: var(--bd-select); box-shadow: 0 0 0 1px var(--bd-select); }
.bd-cd-ex:hover .bd-cd-preview.is-example { border-color: var(--dt-border-default); }
.bd-cd-ex:focus-visible { outline: 2px solid var(--bd-select); outline-offset: 2px; border-radius: var(--dt-radius-control); }
.bd-cd-ex-name { overflow: hidden; color: var(--dt-text-secondary); font-size: var(--dt-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.bd-cd-ex.is-on .bd-cd-ex-name { color: var(--dt-text-primary); }