/* ============================================================================
   Board panel: tabs, cards (groups, detail), blueprints (editor), tables.
   ========================================================================== */

/* ---- panel body: maximize usable space ------------------------------------ */

.panel__body--board {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.board {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
}

.board__view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Tab bar styles (.tabs, .tabs--main, .tabs--sub) live in components.css —
   createTabs() is a shared component used by the board and the settings panel. */

/* ---- board location tabs (panel header strip) ----------------------------- */

.board-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.board-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  max-width: 12rem;
  padding: 2px 2px 2px var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-secondary);
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.board-tabs__item:hover {
  color: var(--color-ink);
  background: var(--color-hover);
}

.board-tabs__item:has(.board-tabs__tab.is-active) {
  color: var(--color-ink);
  background: var(--color-active);
  border-color: var(--color-border-strong);
}

/* Assistant-opened tabs (tool.show as:"tab") — left accent bar on the pill. */
.board-tabs__item:has(.board-tabs__tab--assistant) {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent);
}
.board-tabs__item:has(.board-tabs__tab--assistant.is-active) {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.board-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: none;
  padding: var(--space-1) var(--space-1) var(--space-1) 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
  cursor: pointer;
  flex: 1 1 auto;
}

.board-tabs__tab:hover,
.board-tabs__tab.is-active {
  color: inherit;
  background: transparent;
}

.board-tabs__dismiss-assistant {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-secondary);
  font-size: var(--text-xs);
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
}
.board-tabs__dismiss-assistant:hover {
  color: var(--color-ink);
  background: var(--color-hover);
}

.board-tabs__label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.board-tabs__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  flex: 0 0 auto;
}

.board-tabs__close:hover {
  opacity: 1;
  background: var(--color-active);
}

.board-tabs__tab:focus-visible,
.board-tabs__close:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.board-tabs__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-secondary);
  cursor: pointer;
  flex: 0 0 auto;
}

.board-tabs__new:hover {
  color: var(--color-ink);
  background: var(--color-hover);
}

/* ---- shared bar above tab content ---------------------------------------------- */

.board__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-top: var(--space-2);
}

.board__bar-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.board__bar-danger {
  color: var(--color-danger);
}

.board__bar-tools {
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.board__bar-selection {
  flex: 1 0 100%;
  order: 10;
}

.board__bar-search {
  width: min(240px, 100%);
}

.inline-name {
  align-self: flex-start;
  width: min(260px, 100%);
}

/* ---- card groups ------------------------------------------------------------------- */

.group {
  flex-shrink: 0;
}

.group + .group {
  border-top: var(--border-hairline);
  padding-top: var(--space-2);
}

.group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.group__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.group__toggle svg {
  color: var(--color-ink-faint);
  transition: rotate var(--dur-fast) var(--ease);
}

.group.is-collapsed .group__toggle svg {
  rotate: -90deg;
}

.group.is-collapsed .group__body {
  display: none;
}

.group.is-collapsed.is-drop-target .group__body {
  display: flex;
  min-height: 2rem;
}

.group__count {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.group__actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.group__header:hover .group__actions,
.group__actions:focus-within {
  opacity: 1;
}

.group__body {
  display: flex;
  flex-direction: column;
  padding-left: var(--space-5);
  min-height: 2.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.group.is-drop-target .group__body,
.group.is-drop-target.is-collapsed .group__header {
  background: var(--color-focus-ring);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.group.is-drop-target.is-collapsed .group__header {
  border-radius: var(--radius-sm);
}

.group__empty {
  padding: var(--space-1) 0 var(--space-2);
}

body.is-card-group-dragging {
  cursor: grabbing;
  user-select: none;
}

body.is-card-group-dragging .card-tile {
  cursor: grabbing;
}

/* ---- folders (Cards tab, Drive-style) --------------------------------------------------- */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 1.75rem;
  font-size: var(--text-md);
}

.crumbs__link {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.crumbs__link:hover {
  background: var(--color-hover);
  color: var(--color-ink);
}

.crumbs__link.is-drop-target {
  background: var(--color-focus-ring);
  box-shadow: inset 0 0 0 1px var(--color-accent);
  color: var(--color-ink);
}

.crumbs__current {
  padding: var(--space-1) var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.crumbs__current-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
}

.crumbs__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.crumbs__sep {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink-faint);
}

.folder-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin-top: 1rem;
}

.folder-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.folder-tile:hover {
  background: var(--color-hover);
}

.folder-tile.is-drop-target {
  background: var(--color-focus-ring);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* "Shared with you" and the per-sharer nodes are synthesized client-side, not
   card_groups rows -- dashed to read as a section rather than a folder. */
.folder-tile--virtual {
  border-style: dashed;
}

.folder-tile--shared-root .folder-tile__icon,
.folder-tile--shared .folder-tile__icon {
  color: var(--color-accent);
}

.folder-tile--sharer .folder-tile__icon {
  color: inherit;
}

/* a real folder on someone else's board */
.folder-tile--shared {
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
}

.card-list__folder.folder-tile--virtual .dtable__expander,
.card-list__folder.folder-tile--shared .dtable__expander {
  color: var(--color-accent);
}

.folder-tile__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.folder-tile__icon {
  display: inline-flex;
  color: var(--color-ink-faint);
  flex-shrink: 0;
}

.folder-tile__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.folder-tile__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-tile__path {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-tile__count {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  flex-shrink: 0;
  margin-right: 0.7rem;
}

.folder-tile__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-1);
  min-height: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}

.folder-tile:hover .folder-tile__actions,
.folder-tile__actions:focus-within,
.folder-tile__actions:has(.folder-tile__share.is-public) {
  opacity: 1;
  pointer-events: auto;
}

body.is-card-group-dragging .folder-tile {
  cursor: grabbing;
}

.folder-empty {
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.folder-empty.is-drop-target,
.folder-empty:has(.card-insert-marker) {
  background: var(--color-focus-ring);
  border-color: var(--color-accent);
}

.card-tiles.is-drop-target,
[data-cards-drop].is-drop-target {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
  background: var(--color-focus-ring);
}

/* search results: location heading above each card bucket */
.search-loc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  transition: background var(--dur-fast) var(--ease);
}

.search-loc:hover {
  background: var(--color-hover);
}

/* ---- cards list view (folders + expandable card rows) ----------------------------------- */

.card-list .card-list__name {
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-align: left;
  padding: 0;
}

.card-list .card-list__name:hover {
  text-decoration: underline;
}

.card-list .card-list__name.is-untitled {
  color: var(--color-ink-faint);
}

.card-list__meta {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.card-list__badges {
  margin-left: var(--space-2);
}

.card-list__end {
  text-align: right;
}

.card-list__loc {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.card-list__actions {
  display: inline-flex;
  gap: var(--space-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}

.card-list__folder {
  cursor: pointer;
}

.card-list__folder:hover .card-list__actions,
.card-list__actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.card-list__folder.is-drop-target {
  background: var(--color-focus-ring);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.card-list__folder.is-dragging {
  opacity: 0.4;
}

.card-list__folder .dtable__expander {
  color: var(--color-ink-faint);
}

/* ---- card tiles ------------------------------------------------------------------------ */

.card-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-3);
}

.card-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  /* Skip layout/paint for off-screen tiles in long folders */
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    translate var(--dur-fast) var(--ease);
}

/* Thin left border differentiates entity types in shared folders */
.card-tile--kind-card {
  border-left: 3px solid var(--entity-card);
}

.card-tile--kind-highlight {
  border-left: 3px solid var(--entity-highlight);
}

.card-tile--kind-view {
  border-left: 3px solid var(--entity-view);
}

.card-tile--kind-app {
  border-left: 3px solid var(--entity-app);
}

.card-list__entity--card td:first-child {
  box-shadow: inset 3px 0 0 0 var(--entity-card);
}

.card-list__entity--highlight td:first-child {
  box-shadow: inset 3px 0 0 0 var(--entity-highlight);
}

.card-list__entity--view td:first-child {
  box-shadow: inset 3px 0 0 0 var(--entity-view);
}

.card-list__entity--app td:first-child {
  box-shadow: inset 3px 0 0 0 var(--entity-app);
}

.card-tile:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-2);
  translate: 0 -1px;
}

.card-tile.is-selected {
  border-color: var(--color-accent);
  /* box-shadow: 0 0 0 1px var(--color-focus-ring); */
}

.card-tile__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) 0;
  min-width: 0;
}

/* leave room for the absolute multi-select checkbox on card tiles */
.card-tile--kind-card .card-tile__title-row {
  padding-right: calc(var(--space-3) + 28px);
}

.card-tile__title {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-tile__title-row .card-tile__title {
  padding-right: 0;
}

/* standalone title (no menu row) keeps checkbox clearance */
.card-tile > .card-tile__title {
  padding: var(--space-3) var(--space-5) 0 var(--space-3);
}

.card-tile__title-menu {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-ink-secondary);
  opacity: 1; /* always visible — mobile has no hover */
}

.card-tile__title-menu:hover,
.card-tile__title-menu:focus-visible {
  color: var(--color-ink);
  background: var(--color-hover);
}

.card-tile__title.is-untitled {
  color: var(--color-ink-faint);
  font-weight: var(--weight-regular);
}

.card-tile__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2);
  text-align: left;
}

.card-tile__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #0a0a0a;
}

.card-tile__thumb img,
.card-tile__thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.card-tile__thumb--svg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: var(--border-hairline);
}

.card-tile__svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}

.card-tile__thumb--html {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: var(--border-hairline);
}

.card-tile__html-badge {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink-secondary);
  letter-spacing: 0.02em;
  user-select: none;
}

.card-tile__html-scale {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  pointer-events: none;
  overflow: hidden;
}

.card-tile__html-frame {
  display: block;
  border: 0;
  background: #fff;
  pointer-events: none;
}

.card-tile__thumb--palette {
  background: transparent;
  border: var(--border-hairline);
}

.card-tile__palette {
  display: flex;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.card-tile__swatch {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.card-tile__thumb--audio {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(94, 169, 80, 0.18), transparent 55%),
    linear-gradient(160deg, #1c1b19 0%, #2a2824 55%, #1c1b19 100%);
  border: var(--border-hairline);
}

.card-tile__audio {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  color: #faf9f6;
  pointer-events: none;
  overflow: hidden;
}

.card-tile__audio-glow {
  position: absolute;
  inset: auto -20% -40% 30%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 169, 80, 0.28), transparent 65%);
  pointer-events: none;
}

.card-tile__audio-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  z-index: 1;
}

.card-tile__audio-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: rgba(250, 249, 246, 0.12);
  color: #faf9f6;
  box-shadow: inset 0 0 0 1px rgba(250, 249, 246, 0.08);
}

.card-tile__audio-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.card-tile__audio-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #faf9f6;
}

.card-tile__audio-size {
  font-size: var(--text-xs);
  color: rgba(250, 249, 246, 0.62);
}

.card-tile__wave {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44%;
  min-height: 36px;
  padding-bottom: 2px;
}

.card-tile__wave-bar {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(
    to top,
    rgba(94, 169, 80, 0.95),
    rgba(250, 249, 246, 0.55)
  );
  opacity: 0.9;
}

.card-tile__thumb--file,
.card-tile__thumb--pdf,
.card-tile__thumb--csv,
.card-tile__thumb--code,
.card-tile__thumb--markdown,
.card-tile__thumb--plain,
.card-tile__thumb--office,
.card-tile__thumb--archive {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(180, 80, 70, 0.16), transparent 55%),
    linear-gradient(165deg, #1a1917 0%, #262420 50%, #181716 100%);
  border: var(--border-hairline);
}

.card-tile__thumb--file,
.card-tile__thumb--archive {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(140, 150, 170, 0.14), transparent 55%),
    linear-gradient(165deg, #1a1917 0%, #262420 50%, #181716 100%);
}

.card-tile__thumb--csv {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(60, 140, 90, 0.18), transparent 55%),
    linear-gradient(165deg, #1a1917 0%, #262420 50%, #181716 100%);
}

.card-tile__thumb--code {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(80, 120, 200, 0.18), transparent 55%),
    linear-gradient(165deg, #1a1917 0%, #262420 50%, #181716 100%);
}

.card-tile__thumb--markdown,
.card-tile__thumb--plain {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(160, 140, 70, 0.16), transparent 55%),
    linear-gradient(165deg, #1a1917 0%, #262420 50%, #181716 100%);
}

.card-tile__thumb--office {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(70, 110, 180, 0.18), transparent 55%),
    linear-gradient(165deg, #1a1917 0%, #262420 50%, #181716 100%);
}

.card-tile__file {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  color: #faf9f6;
  pointer-events: none;
  overflow: hidden;
}

.card-tile__file-doc {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 66px;
  border-radius: 4px 10px 4px 4px;
  background: linear-gradient(160deg, #f7f4ee 0%, #ebe6dc 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.card-tile__file--pdf .card-tile__file-doc {
  background: linear-gradient(160deg, #fff8f6 0%, #f3e4e0 100%);
}

.card-tile__file--csv .card-tile__file-doc {
  background: linear-gradient(160deg, #f4faf6 0%, #dfeee4 100%);
}

.card-tile__file--code .card-tile__file-doc {
  background: linear-gradient(160deg, #f4f6fb 0%, #dfe4f0 100%);
}

.card-tile__file--markdown .card-tile__file-doc,
.card-tile__file--plain .card-tile__file-doc {
  background: linear-gradient(160deg, #faf8f0 0%, #efe8d4 100%);
}

.card-tile__file--office .card-tile__file-doc {
  background: linear-gradient(160deg, #f2f6fc 0%, #d9e4f4 100%);
}

.card-tile__file--archive .card-tile__file-doc {
  background: linear-gradient(160deg, #f5f5f4 0%, #e4e4e2 100%);
}

.card-tile__file-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(225deg, transparent 50%, rgba(0, 0, 0, 0.08) 50%),
    linear-gradient(225deg, #d8d2c6 50%, transparent 50%);
  border-radius: 0 10px 0 0;
}

.card-tile__file--pdf .card-tile__file-fold {
  background:
    linear-gradient(225deg, transparent 50%, rgba(160, 50, 40, 0.12) 50%),
    linear-gradient(225deg, #e8c8c2 50%, transparent 50%);
}

.card-tile__file-badge {
  position: absolute;
  left: 50%;
  top: 38%;
  translate: -50% -50%;
  padding: 2px 6px;
  border-radius: 3px;
  background: #3a3a38;
  color: #faf9f6;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.card-tile__file--pdf .card-tile__file-badge {
  background: #c23b2e;
}

.card-tile__file--csv .card-tile__file-badge {
  background: #2f7d4a;
}

.card-tile__file--code .card-tile__file-badge {
  background: #3b5bdb;
}

.card-tile__file--markdown .card-tile__file-badge,
.card-tile__file--plain .card-tile__file-badge {
  background: #8a6d1d;
}

.card-tile__file--office .card-tile__file-badge {
  background: #2b579a;
}

.card-tile__file--archive .card-tile__file-badge {
  background: #5c5c5a;
}

.card-tile__file-lines {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card-tile__file-lines > span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: rgba(40, 36, 30, 0.14);
}

.card-tile__file-lines > span:nth-child(2) {
  width: 78%;
}

.card-tile__file-lines > span:nth-child(3) {
  width: 55%;
}

.card-tile__file-meta {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.card-tile__file-icon {
  display: none;
}

.card-tile__file-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card-tile__file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #faf9f6;
}

.card-tile__file-size {
  font-size: var(--text-xs);
  color: rgba(250, 249, 246, 0.62);
}

.card-tile__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 40px;
}

.card-tile__field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.card-tile__field-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-tile__field-value {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-tile__field-value.is-multiline {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Compact GFM inside tiles (parent is a button — no nested interactives).
   Avoid -webkit-box clamp here: it breaks table/list layout. */
.card-tile__field-value.is-markdown {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  min-width: 0;
  max-height: 8rem;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.card-tile__field-value.is-markdown > :first-child {
  margin-top: 0;
}

.card-tile__field-value.is-markdown > :last-child {
  margin-bottom: 0;
}

.card-tile__field-value.is-markdown p,
.card-tile__field-value.is-markdown ul,
.card-tile__field-value.is-markdown ol,
.card-tile__field-value.is-markdown blockquote,
.card-tile__field-value.is-markdown pre,
.card-tile__field-value.is-markdown table {
  margin: 0 0 0.35em;
}

.card-tile__field-value.is-markdown p:last-child,
.card-tile__field-value.is-markdown ul:last-child,
.card-tile__field-value.is-markdown ol:last-child,
.card-tile__field-value.is-markdown blockquote:last-child,
.card-tile__field-value.is-markdown pre:last-child,
.card-tile__field-value.is-markdown table:last-child {
  margin-bottom: 0;
}

.card-tile__field-value.is-markdown ul,
.card-tile__field-value.is-markdown ol {
  padding-left: 1.2em;
}

.card-tile__field-value.is-markdown li + li {
  margin-top: 0.1em;
}

.card-tile__field-value.is-markdown h1,
.card-tile__field-value.is-markdown h2,
.card-tile__field-value.is-markdown h3,
.card-tile__field-value.is-markdown h4,
.card-tile__field-value.is-markdown h5,
.card-tile__field-value.is-markdown h6 {
  margin: 0.4em 0 0.2em;
  font-weight: 600;
  font-size: 1em;
  line-height: var(--leading-tight, 1.25);
  color: inherit;
}

.card-tile__field-value.is-markdown h1:first-child,
.card-tile__field-value.is-markdown h2:first-child,
.card-tile__field-value.is-markdown h3:first-child {
  margin-top: 0;
}

.card-tile__field-value.is-markdown strong {
  font-weight: 600;
}

.card-tile__field-value.is-markdown code {
  font-size: 0.9em;
  padding: 0.05em 0.25em;
  border-radius: 3px;
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.06));
}

.card-tile__field-value.is-markdown pre {
  padding: 0.35em 0.5em;
  overflow-x: auto;
  border-radius: 4px;
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.06));
  font-size: 0.85em;
}

.card-tile__field-value.is-markdown pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.card-tile__field-value.is-markdown table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  table-layout: fixed;
}

.card-tile__field-value.is-markdown thead {
  display: table-header-group;
}

.card-tile__field-value.is-markdown tbody {
  display: table-row-group;
}

.card-tile__field-value.is-markdown tr {
  display: table-row;
}

.card-tile__field-value.is-markdown th,
.card-tile__field-value.is-markdown td {
  display: table-cell;
  padding: 0.15em 0.35em;
  border: var(--border-hairline);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-tile__field-value.is-markdown th {
  font-weight: 600;
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.04));
}

.card-tile__field-value.is-markdown a,
.card-tile__field-value.is-markdown input,
.card-tile__field-value.is-markdown button {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
}

.card-tile__field-value.is-markdown img {
  max-height: 1.2em;
  width: auto;
  vertical-align: middle;
}

.card-tile__blank {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

.card-tile__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-1);
  border-top: var(--border-hairline);
}

.card-tile__bp {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-tile__badges {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-shrink: 0;
}

.folder-tile.is-dragging {
  opacity: 0.4;
}

.card-tile.is-dragging {
  opacity: 0.4;
}

.card-tile.is-insert-before {
  box-shadow: inset 3px 0 0 0 var(--color-accent);
}

.card-tile.is-insert-after {
  box-shadow: inset -3px 0 0 0 var(--color-accent);
}

.card-insert-marker {
  height: 3px;
  margin: var(--space-1) 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.card-drag-ghost {
  position: fixed;
  /* Pointer position is written to `transform` (ui/cardsTab.js buildDragGhost /
     flushMove) so the ghost moves on the compositor instead of re-laying out on
     every pointermove. left/top pinned to 0 because `position: fixed` with auto
     offsets would otherwise resolve to the clone's static position in <body>.
     `translate` keeps the centering offset; per CSS Transforms L2 it is applied
     before `transform`, and both are pure translations, so they simply add. */
  left: 0;
  top: 0;
  translate: -50% -40%;
  z-index: var(--z-toast);
  pointer-events: none;
  opacity: 0.9;
  box-shadow: var(--shadow-3);
  will-change: transform;
}

/* Stand-in for an iframe/video/canvas that buildDragGhost stripped out. */
.card-drag-ghost__embed {
  min-height: 64px;
  border-radius: var(--radius-sm);
  background: var(--color-hover);
}

.card-drag-ghost__count {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-1);
}

.card-tile__check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.card-tile:hover .card-tile__check,
.card-tile__check:checked,
.card-tile__check:focus-visible {
  opacity: 1;
}

/* ---- public-form origin badge ------------------------------------------------ */

.card-badge {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.card-badge--public {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.board__bar > .card-badge {
  flex-shrink: 0;
}

/* ---- card detail (view / edit / create) -------------------------------------------------- */

.card-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card-detail__blueprint {
  flex: 1;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.card-detail__heading,
.card-detail__title {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-bottom: none;
  font-weight: 700;
  height: 50px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card-detail__heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.card-detail__title {
  font-size: var(--text-xl);
}

/* Summary chrome strip between title and grid */
.card-detail__summary {
  margin: 0;
  margin-top: calc(-1 * var(--space-3));
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-top: none;
  border-bottom: none;
}

.card-detail__summary-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  user-select: none;
}

.card-detail__summary-toggle::-webkit-details-marker {
  display: none;
}

.card-detail__summary-toggle::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.12s ease;
  flex-shrink: 0;
  opacity: 0.7;
}

.card-detail__summary[open] > .card-detail__summary-toggle::before {
  transform: rotate(45deg);
}

.card-detail__summary-label {
  font-weight: var(--weight-medium);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.card-detail__summary-hint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink-faint);
}

.card-detail__summary.is-scanning .card-detail__summary-hint {
  color: var(--color-ink-muted);
  font-style: italic;
}

.card-detail__summary-body {
  padding: 0 var(--space-4) var(--space-3);
}

.card-detail__summary-text {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink);
  white-space: pre-wrap;
}

.card-detail__summary-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  font-style: italic;
}

.card-detail__summary-input {
  width: 100%;
  min-height: 5.5rem;
  resize: vertical;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.card-detail__heading + .card-detail__grid,
.card-detail__title + .card-detail__grid,
.card-detail__summary + .card-detail__grid {
  margin-top: calc(-1 * var(--space-3));
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-1);
}

/* When summary sits between title and grid, title keeps top radius only */
.card-detail__heading:has(+ .card-detail__summary),
.card-detail__title:has(+ .card-detail__summary) {
  border-bottom: none;
}

.card-detail__summary:not([open]) {
  border-bottom: var(--border-hairline);
}

.card-detail__heading:not(:has(+ .card-detail__summary)):not(:has(+ .card-detail__grid)) {
  border-bottom: var(--border-hairline);
}

.card-detail__group {
  /* flex: 1; */
  display: flex;
  gap: var(--space-3);
  min-width: 0;
  max-width: 200px;
}

/* ---- card grid (rendered blueprint) --------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--space-2);
  grid-auto-rows: auto;
  --card-row-min: 56px;
}

.card-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: calc(
    var(--row-span, 1) * var(--card-row-min) + (var(--row-span, 1) - 1) * var(--space-2)
  );
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

/* ---- autosaving cells: "Saving… / Saved" ------------------------------------- */

/* Text cells persist themselves on a 2s idle, so the card's Save button no longer
   governs them and the field has to say so. Bottom-right rather than the
   top-right corner the .cell-annot rack occupies. */
.card-cell__save-status {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-faint);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.card-cell__save-status[data-state="idle"] {
  opacity: 0;
}

.card-cell__save-status[data-state="saved"] {
  color: var(--color-ink-faint);
  opacity: 0.9;
}

.card-cell__save-status[data-state="error"] {
  color: var(--color-danger);
  opacity: 1;
}

/* ---- document surface (a card that is nothing but one text cell) ------------- */

/* A blueprint whose only cell is a textarea is a document, not a form. Drop the
   grid's cell chrome so the editor reads as a page: no label, no box, a measure
   that stays comfortable, and room below the last paragraph to click into. */
.card-grid--document {
  gap: 0;
}

.card-grid--document > .card-cell {
  padding: 0;
  border: none;
  background: transparent;
  min-height: 60vh;
}

.card-grid--document > .card-cell > .card-cell__label {
  display: none;
}

.card-grid--document .card-cell__value--markdown,
.card-grid--document .cell-editor--text {
  margin: 0 auto;
  width: 100%;
  font-size: var(--text-md);
}

.card-grid--document .cell-editor__shell-preview {
  min-height: 50vh;
}

.card-grid--document .card-cell__save-status {
  right: 0;
  bottom: calc(-1 * var(--space-4));
}

.card-cell--heading {
  padding: var(--space-2) 0 0;
  background: transparent;
  border: none;
}

.card-cell__heading {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.card-cell__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  border-bottom: var(--border-hairline);
}

.card-cell__header .card-cell__label {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: none;
}

.card-cell__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-secondary);
  border-bottom: var(--border-hairline);
}

.card-cell__download,
.card-cell__action {
  flex: 0 0 auto;
  opacity: 0.65;
}

.card-cell__download:hover,
.card-cell__download:focus-visible,
.card-cell__action:hover,
.card-cell__action:focus-visible {
  opacity: 1;
}

.card-cell__action--text {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-1);
  border: none;
  background: transparent;
  color: var(--color-ink-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.card-cell__action--text:hover,
.card-cell__action--text:focus-visible {
  color: var(--color-ink);
  background: var(--color-fill-quiet, transparent);
}

.card-cell__value {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.card-cell__value--empty {
  color: var(--color-ink-faint);
}

.card-cell__value--multiline {
  white-space: pre-wrap;
}

.card-cell__value--annot-wrap {
  min-width: 0;
}

.card-cell__value--markdown {
  min-width: 0;
  overflow-wrap: anywhere;
}

.card-cell__value--markdown > :first-child {
  margin-top: 0;
}

.card-cell__value--markdown > :last-child {
  margin-bottom: 0;
}

.card-cell__value--markdown p,
.card-cell__value--markdown ul,
.card-cell__value--markdown ol,
.card-cell__value--markdown blockquote,
.card-cell__value--markdown pre,
.card-cell__value--markdown table {
  margin: 0 0 0.6em;
}

.card-cell__value--markdown p:last-child,
.card-cell__value--markdown ul:last-child,
.card-cell__value--markdown ol:last-child,
.card-cell__value--markdown blockquote:last-child,
.card-cell__value--markdown pre:last-child,
.card-cell__value--markdown table:last-child {
  margin-bottom: 0;
}

.card-cell__value--markdown h1,
.card-cell__value--markdown h2,
.card-cell__value--markdown h3,
.card-cell__value--markdown h4,
.card-cell__value--markdown h5,
.card-cell__value--markdown h6 {
  margin: 0.75em 0 0.35em;
  font-weight: 600;
  line-height: var(--leading-tight, 1.25);
  color: var(--color-ink);
}

.card-cell__value--markdown h1 {
  font-size: 1.25em;
}
.card-cell__value--markdown h2 {
  font-size: 1.15em;
}
.card-cell__value--markdown h3 {
  font-size: 1.05em;
}
.card-cell__value--markdown h4,
.card-cell__value--markdown h5,
.card-cell__value--markdown h6 {
  font-size: 1em;
}

.card-cell__value--markdown h1:first-child,
.card-cell__value--markdown h2:first-child,
.card-cell__value--markdown h3:first-child {
  margin-top: 0;
}

.card-cell__value--markdown ul,
.card-cell__value--markdown ol {
  padding-left: 1.35em;
}

.card-cell__value--markdown li + li {
  margin-top: 0.2em;
}

.card-cell__value--markdown li > ul,
.card-cell__value--markdown li > ol {
  margin: 0.25em 0 0;
}

.card-cell__value--markdown input[type="checkbox"] {
  margin-right: 0.4em;
  vertical-align: middle;
}

.card-cell__value--markdown blockquote {
  padding: 0.15em 0 0.15em 0.75em;
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-ink-secondary);
}

.card-cell__value--markdown code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.06));
}

.card-cell__value--markdown pre {
  padding: 0.65em 0.75em;
  overflow-x: auto;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.06));
}

.card-cell__value--markdown pre code {
  padding: 0;
  background: none;
  font-size: 0.85em;
}

.card-cell__value--markdown hr {
  margin: 0.75em 0;
  border: none;
  border-top: var(--border-hairline);
}

.card-cell__value--markdown table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.card-cell__value--markdown th,
.card-cell__value--markdown td {
  padding: 0.3em 0.5em;
  border: var(--border-hairline);
  text-align: left;
}

.card-cell__value--markdown th {
  font-weight: 600;
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.04));
}

.card-cell__value--markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm, 4px);
}

.card-cell__value--markdown del {
  color: var(--color-ink-secondary);
}

.card-cell__value--formula {
  font-family: var(--font-mono);
  color: var(--color-ink);
}

.card-cell__value--formula.is-error {
  color: var(--color-danger);
}

.card-cell__value a {
  color: var(--color-accent);
}

.card-cell .input {
  border: none;
  background: transparent;
  padding: 0;
  height: auto;
  min-height: 24px;
}

.card-cell .input:focus-visible {
  box-shadow: none;
}

.card-cell:focus-within {
  border-color: var(--color-border-strong);
}

/* auto-grows to its content (JS sets height); never scrolls */
.card-cell__textarea {
  flex: 0 0 auto;
  width: 100%;
  min-height: 24px;
  resize: none;
  overflow: hidden;
  line-height: var(--leading-normal);
  field-sizing: content;
}

.card-cell__checkbox {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.chip {
  padding: 2px var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip:hover {
  background: var(--color-hover);
}

.chip.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);
}

/* assistant-suggested alternative values (tool.fill_card) under a field */
.alt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.alt-pill {
  max-width: 100%;
  overflow: hidden;
  padding: 2px var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.alt-pill:hover {
  background: var(--color-hover);
}

.alt-pill.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  border-style: solid;
  color: var(--color-bg);
}

/* ---- asset cells (image / video / audio / file / font) ---------------------------------------- */

.card-cell__asset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.asset-image {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
}

.asset-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.asset-image.is-annotatable img {
  cursor: crosshair;
}

.asset-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid var(--color-surface-raised);
  border-radius: var(--radius-round);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.asset-pin:hover {
  background: var(--color-accent-hover);
}

.asset-pin--draft {
  background: var(--color-ink);
  pointer-events: none;
}

.asset-rect {
  position: absolute;
  padding: 0;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--color-accent) 14%, transparent);
  cursor: pointer;
}

.asset-rect:hover {
  background: color-mix(in oklab, var(--color-accent) 26%, transparent);
}

.asset-rect--draft {
  border-color: var(--color-ink);
  border-style: dashed;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.asset-media {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
}

video.asset-media {
  background: #000;
  max-height: 70vh;
}

.asset-media--audio {
  height: 36px;
}

.asset-audio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.asset-audio__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.asset-audio__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--color-hover);
  color: var(--color-ink-secondary);
}

.asset-audio__meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.asset-audio__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.asset-audio__size {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.asset-audio .asset-media--audio {
  width: 100%;
}

.asset-font {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-height: 100%;
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.asset-font__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.asset-font__sample {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-hover);
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1;
}

.asset-font__meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.asset-font__face {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.asset-font__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.asset-font__size {
  font-size: var(--text-xs);
  color: var(--color-ink-tertiary, var(--color-ink-secondary));
}

.asset-font__specimen {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-ink);
}

.asset-font.is-ready .asset-font__specimen {
  display: flex;
}

.asset-font__pangram {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
}

.asset-font__alpha {
  margin: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
  color: var(--color-ink-secondary);
}

.asset-font__sizes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  line-height: 1.2;
}

.asset-font__loading {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.asset-font.is-broken .asset-font__loading {
  color: var(--color-danger, #b33);
}

.card-tile__thumb--font {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--color-surface);
}

.card-tile__font {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 0;
  padding: var(--space-3);
  color: var(--color-ink);
}

.card-tile__font-aa {
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.card-tile__font-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.asset-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.asset-file:hover {
  background: var(--color-hover);
}

.asset-file--compact {
  margin-top: var(--space-2);
}

.asset-file__icon,
.asset-file__dl {
  display: inline-flex;
  color: var(--color-ink-secondary);
}

.asset-file__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.asset-file__size {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.asset-error {
  font-size: var(--text-sm);
  color: var(--color-danger);
}

/* File-kind previews (Phase 3 registry) */

.asset-doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.asset-doc__loading {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  padding: var(--space-2) 0;
}

.asset-doc__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.asset-doc__poster {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.asset-doc__poster:hover {
  background: var(--color-hover);
}

.asset-doc__poster--static,
.asset-doc__poster--static:hover {
  cursor: default;
  background: var(--color-surface);
}

.asset-doc__sheet {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 60px;
  border-radius: 3px 8px 3px 3px;
  background: linear-gradient(160deg, #fff8f6 0%, #f3e4e0 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.asset-doc__fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(225deg, transparent 50%, rgba(160, 50, 40, 0.12) 50%),
    linear-gradient(225deg, #e8c8c2 50%, transparent 50%);
  border-radius: 0 8px 0 0;
}

.asset-doc__badge {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  padding: 2px 5px;
  border-radius: 3px;
  background: #c23b2e;
  color: #faf9f6;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
}

.asset-doc__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.asset-doc__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-doc__sub {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.asset-doc__office-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.asset-doc__convert {
  flex-shrink: 0;
}

.asset-code {
  margin: 0;
  padding: var(--space-3);
  max-height: 280px;
  overflow: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2, var(--color-surface));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-xs);
  line-height: 1.45;
  white-space: pre;
  tab-size: 2;
}

.asset-code--plain {
  white-space: pre-wrap;
  word-break: break-word;
}

.asset-csv {
  width: 100%;
  max-height: 280px;
  overflow: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.asset-csv__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.asset-csv__table th,
.asset-csv__table td {
  padding: 4px 8px;
  border-bottom: var(--border-hairline);
  text-align: left;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-csv__table th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  font-weight: var(--weight-semibold);
}

.asset-doc__markdown {
  max-height: 320px;
  overflow: auto;
  padding: var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

/* asset edit mode: upload / replace / remove */

.asset-edit {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
}

.asset-upload {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 72px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.asset-upload:hover {
  background: var(--color-hover);
  color: var(--color-ink);
}

.asset-edit__busy {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

.asset-edit__error {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-danger);
}

.asset-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.asset-chip__icon {
  display: inline-flex;
  color: var(--color-ink-secondary);
}

.asset-chip__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.asset-chip__size {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.asset-chip__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.asset-edit__editor-host {
  width: 100%;
  min-width: 0;
}

.asset-edit__preview--clickable {
  cursor: pointer;
}

.asset-edit__preview--clickable:hover {
  outline: 1px solid var(--color-border-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.asset-edit__editor-host--expanded {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 560px);
}

/* Image/video/audio editor open: let the cell grow past blueprint row span */
.card-cell.is-media-editing {
  min-height: min(75vh, 640px);
  height: auto;
  z-index: 2;
}

/* One save path while a media editor is open: hide card-level Cancel/Save */
.card-detail:has(.is-media-editing) .board__bar-group > [data-save],
.card-detail:has(.is-media-editing) .board__bar-group > [data-cancel],
.dtable-reader:has(.is-media-editing) .board__bar-group > [data-save],
.dtable-reader:has(.is-media-editing) .board__bar-group > [data-cancel],
.dtable__card:has(.is-media-editing) .board__bar-group > [data-save],
.dtable__card:has(.is-media-editing) .board__bar-group > [data-cancel] {
  display: none;
}

/* Hide Jodit Save / Save as if the library still paints them */
.media-editor--image .jie-topbar__save {
  display: none !important;
}

/* Hide ephemeral color-replace filters from the Filters strip */
.media-editor--image .jie-thumb:has([data-jie-filter-thumb^="geist-recolor"]) {
  display: none !important;
}

.media-editor__stage--eyedropper,
.media-editor__stage--eyedropper .jie-canvas-wrap,
.media-editor__stage--eyedropper canvas.jie-canvas {
  cursor: crosshair !important;
}

.geist-recolor__pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.geist-recolor__arrow {
  opacity: 0.55;
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

.geist-recolor__swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.geist-recolor__swatch--empty {
  outline: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
}

.geist-recolor__swatch--clear {
  background:
    linear-gradient(45deg, #bbb 25%, transparent 25%),
    linear-gradient(-45deg, #bbb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #bbb 75%),
    linear-gradient(-45deg, transparent 75%, #bbb 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-color: #fff;
}

.card-cell.is-media-editing > .asset-edit {
  flex: 1 1 auto;
  min-height: 0;
}

.card-cell.is-media-editing .asset-edit__editor-host--expanded,
.card-cell.is-media-editing .media-editor {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- cell editors (lazy text / media) -------------------------------------------------------- */

.cell-editor-shell {
  outline: none;
  min-width: 0;
  width: 100%;
}

.cell-editor--text {
  width: 100%;
  min-width: 0;
}

.cell-editor__shell-preview {
  cursor: text;
  min-height: 48px;
  padding: 2px 0;
}

.cell-editor__hint {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-bottom: 2px;
}

.cell-editor__md-preview {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  max-height: 12em;
  overflow: hidden;
}

.cell-editor__md-preview.is-empty {
  color: var(--color-ink-faint);
}

.cell-editor__loading,
.cell-editor__error {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  padding: var(--space-3) 0;
}

.cell-editor__error {
  color: var(--color-danger);
}

.cell-editor__retry {
  margin-top: var(--space-1);
}

.md-editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

/* Crepe owns the editing surface itself: the top formatting bar, the selection
   toolbar, the code block. Its stylesheet and the Geist token mapping in
   css/crepe.css both load lazily on first edit, and therefore land AFTER this
   file in the document — so rules for .milkdown / .ProseMirror belong in
   crepe.css, where they can win. Nothing about the editor's interior is
   described here on purpose. */

.media-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  padding: var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}

.media-editor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.media-editor__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.media-editor__actions {
  display: flex;
  gap: var(--space-1);
}

.media-editor__preview {
  display: block;
  width: 100%;
  max-height: 280px;
  border-radius: var(--radius-sm);
  background: #000;
}

.media-editor__wave {
  width: 100%;
  min-height: 88px;
  border-radius: var(--radius-sm);
  background: var(--color-hover);
}

.media-editor__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.media-editor__field {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.media-editor__field--inline {
  grid-template-columns: 64px 1fr 40px;
}

.media-editor__field input[type="range"] {
  width: 100%;
}

.media-editor__time {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-align: right;
}

.media-editor__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

.media-editor__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.media-editor__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.media-editor__progress.is-hidden {
  display: none;
}

.media-editor__progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--color-accent);
  transition: width 0.15s linear;
}

.media-editor--image {
  flex: 1 1 auto;
  min-height: min(70vh, 560px);
}

.media-editor--image .media-editor__stage {
  flex: 1 1 auto;
  width: 100%;
  min-height: min(60vh, 480px);
  height: min(60vh, 480px);
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.media-editor--image .media-editor__stage .jie,
.media-editor--image .media-editor__stage > * {
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
}

.media-editor--pdf {
  flex: 1 1 auto;
  min-height: min(75vh, 640px);
}

.media-editor--pdf .media-editor__stage {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  min-height: min(65vh, 520px);
  height: min(65vh, 520px);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-hover);
}

.media-editor--pdf .media-editor__stage > * {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  border: 0;
}

/* ---- svg cells ------------------------------------------------------------------------------- */

.card-cell--svg {
  min-height: calc(
    var(--row-span, 1) * var(--card-row-min) + (var(--row-span, 1) - 1) * var(--space-2)
  );
}

.svg-cell {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 0;
}

.svg-cell--view {
  align-items: center;
  justify-content: center;
}

.svg-cell__code {
  flex: 0 0 auto;
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: pre;
  overflow: auto;
}

.svg-cell__preview {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}

.svg-cell__graphic {
  display: block;
  max-width: 100%;
  max-height: min(420px, 100%);
  width: 100%;
  height: auto;
}

.svg-cell__invalid {
  font-size: var(--text-xs);
  color: var(--color-danger);
}

/* svg node highlights (lines targets on source) */

.svg-cell--annotatable .svg-cell__graphic * {
  cursor: crosshair;
}

.svg-cell--annotatable
  .svg-cell__graphic
  :is(path, rect, circle, ellipse, line, polyline, polygon, text, g, image, use):hover {
  opacity: 0.75;
}

.svg-annot--picked {
  opacity: 0.6;
  outline: 2px dashed var(--color-accent);
}

.svg-annot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.svg-annot__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-accent) 10%, var(--color-surface));
  font-size: var(--text-xs);
  color: var(--color-ink);
  cursor: pointer;
}

.svg-annot__chip:hover {
  background: color-mix(in oklab, var(--color-accent) 20%, var(--color-surface));
}

.svg-annot__chip span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- html cells ------------------------------------------------------------------------------ */

.card-cell--html {
  display: flex;
  flex-direction: column;
  min-height: calc(
    var(--row-span, 1) * var(--card-row-min) + (var(--row-span, 1) - 1) * var(--space-2)
  );
}

.card-cell--html > .html-cell {
  flex: 1;
  min-height: 0;
}

.html-cell {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 0;
}

.html-cell__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.html-cell__label {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: none;
}

.html-cell__header-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
}

.html-cell__viewports {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}

.html-cell__vp {
  appearance: none;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 0;
  border-right: var(--border-hairline);
  background: transparent;
  color: var(--color-ink-secondary);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.4;
}

.html-cell__vp:last-child {
  border-right: 0;
}

.html-cell__vp:hover {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
}

.html-cell__vp.is-active {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-ink) 10%, transparent);
  font-weight: var(--weight-semibold);
}

.html-cell__annotate {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 0.2rem 0.55rem;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.4;
}

.html-cell__annotate:hover {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
}

.html-cell__annotate.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 10%, var(--color-surface));
  font-weight: var(--weight-semibold);
}

.html-cell__code {
  flex: 0 0 auto;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: pre;
  overflow: auto;
}

.html-cell__stage {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  min-height: 1000px;
  padding: var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-ink) 4%, var(--color-surface));
  overflow: auto;
}

.html-cell__window {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 1000px;
  height: 1000px;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
  overflow: hidden;
}

.html-cell__window.is-resizing {
  user-select: none;
}

.html-cell__frame-host {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.html-cell__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 1000px;
}

.html-cell__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.html-cell__resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 10px;
  cursor: ns-resize;
  touch-action: none;
}

.html-cell__resize::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-ink) 28%, transparent);
  transform: translateX(-50%);
}

.html-cell__resize:hover::after,
.html-cell__window.is-resizing .html-cell__resize::after {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
}

/* ---- color palette cells --------------------------------------------------------------------- */

.card-cell--color_palette {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.card-cell--color_palette > .card-cell__label {
  display: none;
}

.card-cell--color_palette > .card-cell__header {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 2;
  border-bottom: none;
  background: transparent;
  gap: 0;
}

.card-cell--color_palette > .card-cell__header .card-cell__label {
  display: none;
}

.card-cell--color_palette > .card-cell__header .card-cell__download {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
  opacity: 0.9;
}

.palette {
  display: flex;
  flex: 1;
  align-items: stretch;
  width: 100%;
  min-height: calc(
    var(--row-span, 1) * var(--card-row-min) + (var(--row-span, 1) - 1) * var(--space-2)
  );
  border-radius: inherit;
  overflow: hidden;
}

.palette__slice {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  transition: flex var(--dur-fast) var(--ease);
}

.palette--edit .palette__slice:hover {
  flex: 1.15 1 0;
}

.palette__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.palette__name {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input.palette__name {
  height: auto;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

input.palette__name:focus-visible {
  outline: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.palette__hex {
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  opacity: 0.85;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette__hex:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.palette__tools {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.palette__swatch {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-round);
  opacity: 0.85;
  cursor: pointer;
  overflow: hidden;
}

.palette__swatch:hover {
  opacity: 1;
}

.palette__swatch input[type="color"] {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  padding: 0;
  border: none;
  cursor: pointer;
  opacity: 0;
}

.palette__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-round);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.palette__remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
}

.palette__add {
  display: flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: var(--border-hairline);
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.palette__add:hover {
  background: var(--color-hover);
  color: var(--color-ink);
}

/* per-slice highlights (color targets) */

.palette__annots {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.palette__annot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: var(--radius-round);
  background: transparent;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
}

.palette__annot:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
}

.palette__annot-add {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-round);
  background: transparent;
  color: inherit;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  transition: opacity var(--dur-fast) var(--ease);
}

.palette__slice:hover .palette__annot-add,
.palette__annot-add:focus-visible {
  opacity: 0.85;
}

.palette__annot-add:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
}

/* ---- annotations (comment popovers, a/v timelines, text highlights) ---------------------------- */

.popover--annot {
  min-width: 220px;
  padding: var(--space-2) var(--space-3);
}

.popover--annot-pill {
  min-width: 0;
  padding: var(--space-1);
}

.annot-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.annot--composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.annot__title-input {
  font-weight: var(--weight-semibold);
}

.annot__input {
  min-height: 56px;
  resize: vertical;
}

.annot__title {
  margin: 0 0 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.annot__show {
  font-size: var(--text-xs);
  padding: 0 var(--space-1);
  margin-left: auto;
}

.annot__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-direction: column;
}

.annot__folder {
  margin-right: auto;
  max-width: 60%;
  font-size: var(--text-xs);
  gap: 4px;
}

.annot__folder [data-folder-name] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.annot__entry + .annot__entry {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-hairline);
}

.annot__comment {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.annot__comment b {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.annot__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.annot__meta {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.annot__delete {
  width: 24px;
  height: 24px;
}

.annot__prompt {
  font-size: var(--text-xs);
  gap: 4px;
}

/* whole-cell highlights: corner badges + hover action */

.cell-annot {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
}

/* dodge the download button on header cells */
.card-cell:has(> .card-cell__header .card-cell__download) > .cell-annot {
  right: 32px;
}

.cell-annot__badge,
.cell-annot__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-round);
  background: var(--color-surface-raised);
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.cell-annot__badge {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cell-annot__badge:hover {
  background: color-mix(in oklab, var(--color-accent) 12%, var(--color-surface-raised));
}

.cell-annot__btn {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.card-cell:hover .cell-annot__btn,
.cell-annot__btn:focus-visible {
  opacity: 1;
}

.cell-annot__btn:hover {
  color: var(--color-ink);
  background: var(--color-hover);
}

/* ephemeral prompt targets: pending chat-pill markers (dashed + pulsing);
   GC'd server-side, hidden from tiles/folders */

@keyframes annot-ephemeral-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.asset-pin.annot--ephemeral,
.asset-rect.annot--ephemeral,
.av-annot__marker.annot--ephemeral,
.av-annot__band.annot--ephemeral,
.palette__annot.annot--ephemeral,
.svg-annot__chip.annot--ephemeral,
.cell-annot__badge.annot--ephemeral {
  outline: 1.5px dashed var(--color-accent);
  outline-offset: 2px;
  animation: annot-ephemeral-pulse 1.6s ease-in-out infinite;
}

mark.annot-mark.annot--ephemeral {
  background: #ffe566;
  border-bottom: 2px solid #f5c400;
  border-bottom-style: solid;
  box-shadow: 0 0 0 1px rgba(245, 196, 0, 0.35);
  animation: annot-ephemeral-pulse 1.6s ease-in-out infinite;
}

/* audio / video timestamped comments */

.av-annot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.av-annot__rail {
  position: relative;
  height: 8px;
  margin: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-active);
}

.av-annot__marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--color-surface-raised);
  border-radius: var(--radius-round);
  background: var(--color-accent);
  cursor: pointer;
}

.av-annot__marker:hover {
  background: var(--color-accent-hover);
}

.av-annot__band {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 4px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-accent) 55%, transparent);
  cursor: pointer;
}

.av-annot__band:hover {
  background: color-mix(in oklab, var(--color-accent) 75%, transparent);
}

.av-annot__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.av-annot__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.av-annot__time {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  cursor: pointer;
}

.av-annot__time:hover {
  color: var(--color-accent-hover);
}

.av-annot__comment {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.av-annot__side {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.av-annot__add {
  align-self: flex-start;
}

.av-annot__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.av-annot__range-cancel {
  color: var(--color-ink-secondary);
}

/* text highlights */

.card-cell__value--annotated {
  cursor: text;
}

.annot-mark {
  border-bottom: 1px solid var(--color-accent);
  border-radius: 2px;
  background: rgba(94, 169, 80, 0.22);
  color: inherit;
  cursor: pointer;
}

.annot-mark:hover {
  background: rgba(94, 169, 80, 0.38);
}

.annot-orphans {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
  white-space: normal;
}

/* `display: flex` above outranks the UA's `[hidden] { display: none }`, so the
   in-editor container (which toggles the attribute rather than being rebuilt)
   would stay visible and empty without this. */
.annot-orphans[hidden] {
  display: none;
}

/* ---- highlight tiles + focus flash ----------------------------------------- */

.hl-tile {
  position: relative;
}

.hl-tile .card-tile__main {
  border-radius: inherit;
}

.hl-tile__menu {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  opacity: 0;
  z-index: 1;
}

.hl-tile:hover .hl-tile__menu,
.hl-tile__menu:focus-visible {
  opacity: 1;
}

.hl-tile__preview {
  position: relative;
  margin: 0 0 var(--space-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-2, rgba(0, 0, 0, 0.04));
  min-height: 72px;
}

.hl-tile__preview--orphan {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  color: var(--color-ink-secondary);
}

.hl-tile__orphan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.hl-tile__img {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #111;
}

.hl-tile__img img,
.hl-tile__img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hl-tile__pin {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.hl-tile__rect {
  position: absolute;
  border: 2px solid var(--color-accent);
  border-radius: 2px;
  background: color-mix(in oklab, var(--color-accent) 20%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.hl-tile__time {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.hl-tile__preview--time:not(:has(.hl-tile__img)) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  min-height: 56px;
}

.hl-tile__preview--time:not(:has(.hl-tile__img)) .hl-tile__time {
  position: static;
  background: var(--color-ink);
}

.hl-tile__audio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.hl-tile__audio-name {
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hl-tile__quote {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  max-height: 7.5em;
  overflow: hidden;
}

.hl-tile__quote-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-ink);
}

.hl-tile__quote-text .annot-mark {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hl-tile__color {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  min-height: 56px;
}

.hl-tile__color-swatch {
  width: 36px;
  height: 36px;
  flex: none;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.hl-tile__color-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hl-tile__color-name {
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hl-tile__color-hex {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-transform: lowercase;
}

.hl-tile__dom {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  max-height: 7.5em;
  overflow: hidden;
}

.hl-tile__dom-snippet {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-ink);
}

.hl-tile__dom-selector {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hl-tile__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
}

.hl-tile__cell-label {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.hl-tile__cell-value {
  font-size: var(--text-sm);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.hl-tile__comment {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hl-tile--orphan {
  opacity: 0.72;
}

.hl-focus-ring {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 35%, transparent);
  pointer-events: none;
  z-index: 2;
}

.hl-focus-ring--rect {
  margin: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--color-accent) 20%, transparent);
}

/* Hold peak long enough that smooth scroll-into-view finishes before fade. */
@keyframes hl-flash {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-accent) 0%, transparent);
  }
  8% {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent) 55%, transparent);
  }
  75% {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent) 40%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-accent) 0%, transparent);
  }
}

.hl-flash {
  animation: hl-flash 3.2s ease-out forwards;
  border-radius: 4px;
}

mark.hl-flash,
.asset-pin.hl-flash,
.av-annot__marker.hl-flash {
  border-radius: 2px;
}

.annot-orphan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 2px var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.annot-orphan span {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- blueprint list ---------------------------------------------------------------------------- */

.bp-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  text-align: left;
}

.bp-row__name {
  font-weight: var(--weight-medium);
}

.bp-row__meta {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.bp-row__actions {
  display: flex;
  gap: var(--space-1);
}

/* ---- memory list ------------------------------------------------------------------------------- */

.memory-list {
  margin-top: var(--space-2);
  min-height: 0;
  overflow: auto;
}

.memory-row__main {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.memory-row__text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

.memory-row__keywords {
  margin-top: 2px;
}

.memory-row--editing {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2);
}

.memory-row__edit {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
}

.memory-row__edit-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ---- blueprint editor ----------------------------------------------------------------------------- */

.bp-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bp-editor__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bp-editor__name {
  flex: 1;
  min-width: 0;
  font-weight: var(--weight-medium);
}

.bp-editor__dims {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-faint);
  white-space: nowrap;
}

.bp-editor__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
}

.bp-editor__hint {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.bp-editor__instructions > summary {
  cursor: pointer;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-faint);
  user-select: none;
}

.bp-editor__instructions[open] > summary {
  margin-bottom: var(--space-2);
}

.bp-editor__instructions-text {
  width: 100%;
  resize: vertical;
  font-size: var(--text-sm);
}

/* board = corner + column gutter + row gutter + grid + grow buttons */

.bp-editor__board {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 26px;
  grid-template-rows: 22px auto 26px;
  gap: 6px;
}

.bp-editor__corner {
  grid-area: 1 / 1;
}

.bp-editor__gutter {
  display: grid;
  gap: 6px;
}

.bp-editor__gutter--cols {
  grid-area: 1 / 2;
}

.bp-editor__gutter--rows {
  grid-area: 2 / 1;
}

.bp-editor__line {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-faint);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bp-editor__line-x {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.bp-editor__line:not([disabled]):hover {
  background: var(--color-hover);
  color: var(--color-danger);
}

.bp-editor__line:not([disabled]):hover .bp-editor__line-n,
.bp-editor__line:not([disabled]):focus-visible .bp-editor__line-n {
  opacity: 0;
}

.bp-editor__line:not([disabled]):hover .bp-editor__line-x,
.bp-editor__line:not([disabled]):focus-visible .bp-editor__line-x {
  opacity: 1;
}

.bp-editor__line[disabled] {
  cursor: default;
}

.bp-editor__grow {
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink-faint);
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.bp-editor__grow:not([disabled]):hover {
  border-color: var(--color-border-strong);
  background: var(--color-hover);
  color: var(--color-ink);
}

.bp-editor__grow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.bp-editor__grow--col {
  grid-area: 2 / 3;
}

.bp-editor__grow--row {
  grid-area: 3 / 2;
}

.bp-editor__grid {
  grid-area: 2 / 2;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.bp-editor__grid.is-dragging {
  cursor: grabbing;
}

.bp-editor__slot {
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink-faint);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.bp-editor__slot svg {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.bp-editor__slot:hover {
  border-color: var(--color-border-strong);
  background: var(--color-hover);
}

.bp-editor__slot:hover svg {
  opacity: 1;
}

/* live drop feedback while dragging a cell */

.bp-editor__slot.is-drop-ok {
  border: 1px solid var(--color-accent);
  background: var(--color-focus-ring);
}

.bp-editor__slot.is-drop-no {
  border: 1px solid var(--color-danger);
  background: rgba(179, 38, 30, 0.08);
  cursor: not-allowed;
}

.bp-editor__grid.is-dragging .bp-editor__slot svg {
  opacity: 0;
}

.bp-editor__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.bp-editor__cell:active {
  cursor: grabbing;
}

.bp-editor__cell.is-ghost {
  opacity: 0.45;
  pointer-events: none;
  border-style: dashed;
}

.bp-editor__cell.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.bp-editor__cell-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-editor__cell-type {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

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

.bp-inspector {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}

.bp-inspector__row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.bp-inspector__field {
  min-width: 120px;
  flex: 1;
}

.bp-inspector__span {
  flex: 0 0 auto;
}

.bp-inspector__steppers {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.bp-inspector__steppers .icon-btn {
  width: 28px;
  height: 28px;
}

.bp-inspector__delete {
  flex: 0 0 auto;
  color: var(--color-danger);
}

.bp-inspector__delete[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.bp-inspector__formula {
  font-family: var(--font-mono);
}

.bp-inspector__formula-status {
  min-height: 1em;
  font-size: var(--text-xs);
  color: var(--color-danger);
}

.bp-inspector__key {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.bp-inspector__key code {
  font-family: var(--font-mono);
}

/* ---- tables ------------------------------------------------------------------------------------------ */

/* Group drill-down (L1 group cards / L2 table cards / breadcrumb above L3) */
.table-groups-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.table-groups-slot:empty {
  display: none;
}

.table-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: var(--space-3);
  align-content: start;
}

.table-group-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  min-height: 5.5rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.table-group-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-1);
}

/* Group cards: left accent strip so containers scan apart from leaf tables. */
.table-group-card--group {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
}

.table-group-card--group:hover {
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--color-accent) 70%, var(--color-border)),
    var(--shadow-1);
}

.table-group-card--group.is-drop-target {
  border-color: var(--color-accent);
  box-shadow:
    inset 3px 0 0 var(--color-accent),
    0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.table-group-card__icon {
  display: inline-flex;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--color-ink-faint);
}

.table-group-card--group .table-group-card__icon {
  color: var(--color-ink-secondary);
}

.table-group-card--table.is-dragging {
  opacity: 0.45;
}

.table-group-card--table[data-table-drag] {
  cursor: grab;
  touch-action: none;
}

.table-group-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: var(--shadow-2);
}

body.is-table-group-dragging {
  cursor: grabbing;
  user-select: none;
}

.table-group-card__open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  flex: 1;
  padding: var(--space-3);
  padding-right: calc(var(--space-3) + 1.75rem);
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  border-radius: inherit;
}

.table-group-card__name {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-weight: 600;
  color: var(--color-ink);
  word-break: break-word;
}

.table-group-card__stats,
.table-group-card__updated,
.table-group-card__muted {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.table-group-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-1);
}

.table-group-card__chip {
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  border: var(--border-hairline);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-group-card__actions {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  display: none;
  align-items: center;
  gap: 2px;
}

.table-group-card:hover .table-group-card__actions,
.table-group-card__actions:focus-within {
  display: inline-flex;
}

.table-groups-bc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 0;
}

.table-groups-bc__back {
  flex-shrink: 0;
}

.table-groups-bc__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

.table-groups-bc__trail > li:not(:first-child)::before {
  content: "/";
  margin-right: 0.35rem;
  color: var(--color-ink-faint);
}

.table-groups-bc__part.is-current {
  color: var(--color-ink);
  font-weight: 600;
}

.dtable-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
}

.dtable-toolbar__search {
  width: min(260px, 100%);
}

.dtable-toolbar__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.dtable-toolbar__count {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-faint);
  white-space: nowrap;
}

.dtable-toolbar__modes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.dtable-toolbar__mode {
  width: 28px;
  height: 28px;
  color: var(--color-ink-faint);
}

.dtable-toolbar__mode.is-active {
  background: var(--color-surface-raised);
  color: var(--color-ink);
  box-shadow: var(--shadow-1);
}

.dtable-wrap {
  overflow: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  flex: 1;
  min-height: 0;
}

.dtable-wrap--reader {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
}

.dtable-toolbar__delete {
  color: var(--color-ink-faint);
}

.dtable-toolbar__delete:hover {
  color: var(--color-danger);
}

.dtable-reader__tab--more {
  opacity: 0.55;
  min-width: 2em;
  max-width: none;
  letter-spacing: 0.08em;
}

.dtable-reader__tab--more:hover {
  opacity: 1;
}

/* ---- reader view -------------------------------------------------------------- */

.dtable-reader {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
  padding: var(--space-1) 0;
}

/* Community detail flows inside the page-scrolling .board__view rather than a
   height-bounded .dtable-wrap--reader. Drop the flex-fill / inner scroll so the
   card grows with its grid and the page scrolls instead. */
.dtable-reader--flow,
.dtable-reader--flow .dtable-reader__card {
  flex: none;
  overflow: visible;
  min-height: 0;
}

.dtable-reader__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.dtable-reader__pos {
  min-width: 4.5em;
  text-align: center;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-faint);
}

.dtable-reader__nav-spacer {
  flex: 1;
}

.dtable-reader__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
}

.dtable-reader__tab {
  flex-shrink: 0;
  max-width: 160px;
  padding: var(--space-1) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.dtable-reader__tab:hover {
  background: var(--color-hover);
  color: var(--color-ink);
}

.dtable-reader__tab.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);
}

.dtable-reader__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.dtable-reader__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-shrink: 0;
}

.dtable-reader__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.dtable-reader__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtable-reader__title-input {
  flex: 1;
  min-width: 0;
}

.dtable-reader__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.dtable-reader__grid {
  min-width: 0;
}

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.dtable th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  background: var(--color-surface-raised);
  border-bottom: var(--border-hairline);
  text-align: left;
  white-space: nowrap;
}

.dtable th.dtable__expander-h {
  padding: 0;
}

.dtable__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-ink-secondary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.dtable__sort:hover {
  background: var(--color-hover);
  color: var(--color-ink);
}

.dtable__sort.is-active {
  color: var(--color-ink);
}

.dtable__sort-arrow {
  display: inline-block;
  min-width: 1em;
  color: var(--color-accent);
}

.dtable td {
  padding: var(--space-1) var(--space-3);
  border-bottom: var(--border-hairline);
  min-width: 110px;
  vertical-align: middle;
}

.dtable__expander-h,
.dtable td.dtable__expander {
  width: 36px;
  min-width: 36px;
  padding: 0 0 0 var(--space-1);
}

.dtable__chevron {
  width: 28px;
  height: 28px;
  color: var(--color-ink-faint);
}

.dtable__chevron svg {
  transition: rotate var(--dur-fast) var(--ease);
}

.dtable__chevron.is-open svg {
  rotate: 90deg;
}

.dtable__row:hover td {
  background: var(--color-hover);
}

.dtable__input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
}

.dtable__input:focus-visible {
  box-shadow: none;
  outline: none;
}

.dtable__value {
  display: block;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-ink-secondary);
}

.dtable__value--formula {
  font-family: var(--font-mono);
  color: var(--color-ink);
}

/* expanded row: the card rendered in blueprint view */
.dtable__expand td {
  padding: 0;
  background: var(--color-surface);
}

.dtable__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.dtable__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.dtable__card-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.dtable__card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtable__card-title-input {
  flex: 1;
  min-width: 0;
}

.dtable__card-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.dtable__title-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.dtable__title-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.dtable__group-btn {
  height: 1.5rem;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
}

.dtable__group-hint {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.dtable__title-cell {
  vertical-align: top;
}

.dtable__add td {
  border-bottom: none;
  padding: var(--space-1);
}

.dtable__empty {
  padding: var(--space-3);
}

/* ---- sharing (publish buttons) --------------------------------------------------------------- */

/* published items keep their globe visible and tinted */
.group__share.is-public,
.folder-tile__share.is-public,
.dtable-toolbar__share.is-public {
  color: var(--color-accent);
}

.group__header .group__actions:has(.group__share.is-public) {
  opacity: 1;
}

/* ---- public pages (collections / forms) ------------------------------------------------------ */

.public-page {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4) var(--space-7);
  background: var(--color-bg);
}

.public-page__main {
  width: min(920px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.public-page__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-5);
}

.public-page__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

.public-page__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.public-page__meta {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.public-page__tank {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  outline: none;
}

.public-page__tank-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-secondary);
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(4px);
  transition: max-width 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.public-page__tank:hover .public-page__tank-name,
.public-page__tank:focus-within .public-page__tank-name {
  max-width: 16rem;
  opacity: 1;
  transform: translateX(0);
}

.public-page__loading {
  padding-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  text-align: center;
}

.public-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-7);
  text-align: center;
}

.public-page__tiles {
  padding-top: 0;
}

.public-page__foot {
  width: min(920px, 100%);
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.public-page__foot-logo {
  display: block;
  height: 60px;
  width: auto;
  max-width: min(220px, 50vw);
  object-fit: contain;
}

/* public form: title + grid read like the card create view, plus a submit row */
.public-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.public-form__actions {
  display: flex;
  justify-content: flex-end;
}

.public-form__instructions {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  white-space: pre-wrap;
}

.public-form__done .btn {
  margin-top: var(--space-2);
}

/* ---- card badges: subscription mirrors and shared cards ---------------------------------------- */

.card-badge--subscription {
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  color: var(--color-ink-secondary);
  border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent);
}

/* ---- cross-org folder sharing (receiver side) ------------------------------------------------ */

.card-badge--shared {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* the fixed destination shown instead of a folder picker, where a card has only
   one legal home (creating in, or viewing, a shared folder) */
.card-detail__shared-dest {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* card detail: in-folders toggle */

.card-detail__in-folders {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  white-space: nowrap;
  cursor: pointer;
}

/* ---- views (dashboard widgets) --------------------------------------------- */

.view-tile__preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 96px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--entity-view) 8%, var(--color-surface));
  color: var(--entity-view);
  overflow: hidden;
}

.view-tile__preview--empty {
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
}

.view-tile__preview--live {
  background: var(--color-surface);
  /* height set in JS from scaled content; keep a floor until first measure */
  height: 112px;
}

.view-tile__preview--live::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-surface));
}

.view-tile__scale {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  pointer-events: none;
  will-change: transform;
}

.view-tile__scale .view-grid {
  pointer-events: none;
  gap: 6px;
}

.view-grid--preview .view-widget {
  box-shadow: none;
  border-radius: var(--radius-sm);
}

.view-grid--preview .view-widget__head {
  padding: 4px 6px 0;
}

.view-grid--preview .view-widget__title {
  font-size: 10px;
}

.view-grid--preview .view-widget__body {
  padding: 4px 6px 6px;
  overflow: hidden;
}

.view-grid--preview .view-chart {
  min-height: 72px;
}

.view-grid--preview .view-metric {
  min-height: 40px;
}

.view-grid--preview .view-metric__value {
  font-size: var(--text-md);
}

.view-grid--preview .view-table {
  font-size: 9px;
}

.view-grid--preview .view-table th,
.view-grid--preview .view-table td {
  padding: 2px 4px;
}

.view-table__more td {
  color: var(--color-ink-faint);
  font-style: italic;
}

.view-tile__icon {
  display: flex;
  opacity: 0.85;
}

.view-tile__count {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.view-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  flex: 1;
}

.view-detail__body {
  min-height: 0;
  overflow: auto;
  padding-bottom: var(--space-4);
}

.view-grid {
  display: grid;
  grid-template-columns: repeat(var(--view-cols, 12), minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.view-grid__empty {
  grid-column: 1 / -1;
}

.view-widget {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.view-widget__head {
  padding: var(--space-2) var(--space-3) 0;
}

.view-widget__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.view-widget__body {
  flex: 1;
  min-height: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  overflow: auto;
}

.view-table-wrap {
  overflow: auto;
  max-height: 100%;
}

.view-table {
  width: 100%;
  font-size: var(--text-xs);
}

.view-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1);
  min-height: 64px;
  height: 100%;
}

.view-metric__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  line-height: var(--leading-tight);
}

.view-metric__sub {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.view-chart {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 140px;
}

.view-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 160px;
  border-radius: var(--radius-2);
  overflow: hidden;
}

.view-map__host {
  width: 100%;
  height: 100%;
  min-height: 160px;
}

.view-map--preview {
  min-height: 80px;
  display: grid;
  place-items: center;
  background: var(--color-surface-sunken, #f4f3f0);
}

.view-map__tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.view-map__badge {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  background: var(--color-ink);
  color: var(--color-surface-raised, #fff);
  font-size: var(--font-size-sm);
  padding: 2px 8px;
  border-radius: 999px;
}

.view-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: auto;
  height: 100%;
  min-height: 0;
}

.view-timeline__axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-ink-faint);
  padding-left: 96px;
}

.view-timeline--gantt .view-timeline__axis {
  padding-left: 96px;
}

.view-timeline__group {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-ink-secondary);
  margin-top: var(--space-1);
}

.view-timeline__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 22px;
}

.view-timeline__label {
  flex: 0 0 88px;
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-timeline__track {
  flex: 1;
  position: relative;
  height: 14px;
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.04));
  border-radius: 4px;
  overflow: hidden;
}

.view-timeline__bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: var(--color-accent, #5ea950);
  border-radius: 3px;
  min-width: 4px;
}

.view-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.view-calendar__head {
  font-size: var(--font-size-sm);
}

.view-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.view-calendar__dow {
  text-align: center;
  font-size: 10px;
  color: var(--color-ink-faint);
  padding: 2px 0;
}

.view-calendar__day {
  aspect-ratio: 1;
  border: none;
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.03));
  border-radius: 4px;
  font-size: 11px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  color: var(--color-ink);
  cursor: default;
}

.view-calendar__day:not([disabled]).has-items {
  cursor: pointer;
}

.view-calendar__day.is-empty {
  background: transparent;
}

.view-calendar__day.has-items {
  background: color-mix(in srgb, var(--color-accent, #5ea950) 18%, transparent);
}

.view-calendar__dot {
  font-size: 9px;
  line-height: 1;
  background: var(--color-accent, #5ea950);
  color: #fff;
  border-radius: 999px;
  min-width: 14px;
  padding: 1px 4px;
  text-align: center;
}

.view-calendar__list {
  border-top: var(--border-hairline);
  padding-top: var(--space-2);
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.view-calendar__list-title {
  margin-bottom: 4px;
}

.view-pivot-wrap {
  overflow: auto;
  height: 100%;
  min-height: 0;
}

.view-pivot th,
.view-pivot td {
  white-space: nowrap;
}

.view-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* view editor */

.view-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  flex: 1;
}

.view-editor__bar {
  flex-wrap: wrap;
}

.view-editor__name {
  flex: 1;
  min-width: 140px;
  max-width: 280px;
}

.view-editor__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: var(--space-3);
  min-height: 0;
  flex: 1;
}

.view-editor__canvas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.view-editor__add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.view-editor__grid {
  display: grid;
  grid-template-columns: repeat(var(--view-cols, 12), minmax(0, 1fr));
  gap: var(--space-2);
  min-height: 200px;
  padding: var(--space-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
}

.view-editor__chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-left: 3px solid var(--entity-view);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  color: inherit;
}

.view-editor__chip:hover {
  border-color: var(--color-border-strong);
}

.view-editor__chip.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.view-editor__chip-type {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-faint);
}

.view-editor__chip-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.view-editor__inspector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  overflow: auto;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.view-editor__insp-title {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.view-editor__insp-title:first-child {
  margin-top: 0;
}

.view-editor__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.view-editor__label {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.view-editor__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

.view-editor__filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-1) 0;
  border-bottom: var(--border-hairline);
}

.view-editor__filter .input {
  grid-column: 1 / -1;
}

.view-editor__checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.view-editor__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.view-editor__insp-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border-hairline);
}

.view-editor__preview {
  min-height: 0;
  overflow: auto;
  flex: 1;
}

.view-editor__series-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.view-editor__series-head .view-editor__insp-title {
  margin: 0;
}

.view-editor__series {
  border: var(--border-hairline);
  border-radius: var(--radius-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.view-editor__series-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.view-editor__series-actions {
  display: flex;
  gap: var(--space-1);
}

.view-editor__align-warn {
  color: var(--color-danger, #b91c1c);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
}

.type-filter-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* ---- no think tank ---------------------------------------------------------
   The other reason `state.board` is null: there is no active tank, so nothing is
   loading and the skeleton below would shimmer forever. Deliberately looks like
   a message and not like content in flight.
   -------------------------------------------------------------------------- */

.board-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 46ch;
  padding: var(--space-6) 0;
}

.board-empty__title {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.board-empty__text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-secondary);
}

/* ---- loading skeleton ------------------------------------------------------
   Shown by ui/boardView.js while `state.board` is still null AND a tank is
   active. Mirrors the .card-tiles grid so the real tiles land without a layout
   jump.
   -------------------------------------------------------------------------- */

.board-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}

.board-skeleton__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.board-skeleton__thumb,
.board-skeleton__line {
  border-radius: var(--radius-sm);
  /* Animating background-position on a gradient keeps the shimmer off the
     layout path entirely. */
  background: linear-gradient(
    90deg,
    var(--color-hover) 25%,
    var(--color-active) 37%,
    var(--color-hover) 63%
  );
  background-size: 400% 100%;
  animation: board-skeleton-shimmer 1.4s ease-in-out infinite;
}

.board-skeleton__thumb {
  aspect-ratio: 16 / 10;
}

.board-skeleton__line {
  height: 10px;
}

.board-skeleton__line--title {
  height: 13px;
  width: 70%;
}

/* Stagger so the grid breathes instead of pulsing as one block. */
.board-skeleton__tile:nth-child(2n) .board-skeleton__thumb,
.board-skeleton__tile:nth-child(2n) .board-skeleton__line {
  animation-delay: 0.12s;
}

.board-skeleton__tile:nth-child(3n) .board-skeleton__thumb,
.board-skeleton__tile:nth-child(3n) .board-skeleton__line {
  animation-delay: 0.24s;
}

@keyframes board-skeleton-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-skeleton__thumb,
  .board-skeleton__line {
    animation: none;
    background: var(--color-hover);
  }
}

/* ---- signature / drawing cells -------------------------------------------- */

.card-cell--signature,
.card-cell--drawing {
  min-height: calc(
    var(--row-span, 1) * var(--card-row-min) + (var(--row-span, 1) - 1) * var(--space-2)
  );
}

.ink-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.ink-cell__frame,
.ink-cell--thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4rem;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ink-cell__svg,
.ink-cell--thumb svg,
.ink-cell__frame svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 12rem;
}

.signature-caption {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.stroke-pad {
  position: relative;
  width: 100%;
  aspect-ratio: var(--stroke-pad-w, 480) / var(--stroke-pad-h, 140);
  background: #faf9f7;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  touch-action: none;
}

.stroke-pad__svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.ink-cell__name.is-invalid {
  border-color: var(--color-danger, #c45a6a);
}

.ink-cell__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.ink-cell__clear {
  align-self: flex-start;
}

/* ---- location cells ------------------------------------------------------- */

.card-cell--location {
  min-height: calc(
    var(--row-span, 1) * var(--card-row-min) + (var(--row-span, 1) - 1) * var(--space-2)
  );
}

.location-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.location-cell__static {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 16rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.location-cell__static.is-interactive {
  cursor: pointer;
}

.location-cell__static.is-interactive:focus-visible {
  outline: 2px solid var(--color-accent, #3d6bf3);
  outline-offset: 2px;
}

.location-cell__tile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.location-cell__marker {
  position: absolute;
  width: 14px;
  height: 14px;
  /* tip of the pin sits on the lat/lng pixel (left/top are %) */
  transform: translate(-50%, -100%) rotate(-45deg);
  transform-origin: center bottom;
  border-radius: 50% 50% 50% 0;
  background: var(--color-danger, #c45a6a);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.location-cell__label {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 2px 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.location-cell__attr {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 4px;
  font-size: 9px;
  line-height: 1.2;
  color: var(--color-muted);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  pointer-events: none;
}

.location-cell--thumb .location-cell__static {
  max-height: none;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 0;
}

.location-cell--thumb .location-cell__label,
.location-cell--thumb .location-cell__attr {
  display: none;
}

.card-tile__thumb--location {
  overflow: hidden;
}

.location-cell__map {
  width: 100%;
  height: 14rem;
  min-height: 12rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  z-index: 0;
  background: var(--color-surface);
}

.location-cell__search,
.location-cell__name,
.location-cell__address {
  width: 100%;
}

.location-cell__results {
  display: flex;
  flex-direction: column;
  max-height: 10rem;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg, #fff);
}

.location-cell__result {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.location-cell__result:last-child {
  border-bottom: 0;
}

.location-cell__result:hover,
.location-cell__result:focus-visible {
  background: var(--color-hover);
}

.location-cell__result.is-empty {
  color: var(--color-muted);
  cursor: default;
}

.location-cell__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.location-cell__err {
  margin: 0;
  padding: var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.location-map-overlay {
  z-index: 1200;
}

.location-map-dialog {
  display: flex;
  flex-direction: column;
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100vh - 2rem));
  background: var(--color-bg, #fff);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.location-map-dialog__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.location-map-dialog__title {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-md, 1rem);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-map-dialog__map {
  width: 100%;
  height: min(24rem, 55vh);
  min-height: 16rem;
  background: var(--color-surface);
  z-index: 0;
}

.location-map-dialog__meta {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.location-map-dialog__err {
  margin: var(--space-4);
  color: var(--color-muted);
}

/* ---- number display + temporal scalars ------------------------------------ */

.number-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
}

.number-cell--rating {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}

.number-cell__star {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 1px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
}

.number-cell__star.is-on {
  color: #e0a100;
}

.number-cell__star:disabled {
  cursor: default;
}

.number-cell--progress {
  gap: var(--space-1);
}

.number-cell__bar {
  position: relative;
  height: 0.55rem;
  width: 100%;
  background: var(--color-hover);
  border-radius: 999px;
  overflow: hidden;
}

.number-cell__bar-fill {
  display: block;
  height: 100%;
  background: var(--color-accent, #3d6bf3);
  border-radius: inherit;
}

.number-cell__bar-label,
.number-cell__slider-label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.number-cell--slider {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.number-cell__range {
  flex: 1;
  min-width: 0;
}

.daterange-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.daterange-cell__start,
.daterange-cell__end {
  flex: 1;
  min-width: 7rem;
}

.daterange-cell__sep {
  color: var(--color-muted);
}

.daterange-cell__hint {
  flex-basis: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-danger, #c45a6a);
}

.dtable__cell-edit {
  min-width: 0;
  width: 100%;
}

.dtable__cell-edit .input,
.dtable__cell-edit .number-cell,
.dtable__cell-edit .daterange-cell {
  width: 100%;
}

.input.is-invalid {
  border-color: var(--color-danger, #c45a6a);
}

/* ---- tags / checklist / person -------------------------------------------- */

.tags-cell,
.checklist-cell,
.person-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.tags-cell__chips,
.person-cell__chips,
.tags-cell--view,
.person-cell--view {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.tags-cell__chip,
.person-cell__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--font-size-sm);
  background: var(--color-hover);
  border-radius: 999px;
  max-width: 100%;
}

.tags-cell__x,
.person-cell__x {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 2px;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
}

.tags-cell__input,
.person-cell__search {
  width: 100%;
}

.tags-cell__suggest,
.person-cell__results {
  display: flex;
  flex-direction: column;
  max-height: 10rem;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg, #fff);
}

.tags-cell__suggest-item,
.person-cell__result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.tags-cell__suggest-item:last-child,
.person-cell__result:last-child {
  border-bottom: 0;
}

.tags-cell__suggest-item:hover,
.person-cell__result:hover {
  background: var(--color-hover);
}

.checklist-cell__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checklist-cell__progress-label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.checklist-cell__bar {
  height: 0.4rem;
  background: var(--color-hover);
  border-radius: 999px;
  overflow: hidden;
}

.checklist-cell__bar-fill {
  display: block;
  height: 100%;
  background: var(--color-accent, #3d6bf3);
}

.checklist-cell__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.checklist-cell__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
}

.checklist-cell__item.is-done .checklist-cell__text,
.checklist-cell__item.is-done .checklist-cell__text-input {
  text-decoration: line-through;
  color: var(--color-muted);
}

.checklist-cell__item.is-dragging {
  opacity: 0.5;
}

.checklist-cell__item.is-drop {
  outline: 1px dashed var(--color-accent, #3d6bf3);
}

.checklist-cell__box {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.checklist-cell__text {
  flex: 1;
  min-width: 0;
}

.checklist-cell__text-input {
  flex: 1;
  min-width: 0;
}

.checklist-cell__check {
  flex-shrink: 0;
}

.person-cell__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-cell__avatar {
  display: inline-flex;
  flex-shrink: 0;
}

.card-cell--checklist {
  min-height: calc(
    var(--row-span, 1) * var(--card-row-min) + (var(--row-span, 1) - 1) * var(--space-2)
  );
}

.records-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.records-cell--view,
.records-cell__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.records-cell__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font: inherit;
  font-size: var(--font-size-sm);
  color: inherit;
  background: var(--color-hover);
  border: 0;
  border-radius: 999px;
  max-width: 100%;
  cursor: pointer;
  text-align: left;
}

.records-cell__chip--deleted {
  color: var(--color-muted);
  font-style: italic;
  cursor: default;
}

.records-cell__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.records-cell__x {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 2px;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
}

.records-cell__more {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.records-cell--count {
  font-variant-numeric: tabular-nums;
}

.records-cell--list,
.records-cell--table {
  gap: 0;
}

.records-cell__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.records-cell__row--head {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  cursor: default;
  border-bottom-color: var(--color-border);
}

.records-cell__row--deleted {
  color: var(--color-muted);
  font-style: italic;
  cursor: default;
}

.records-cell__col {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.records-picker__list {
  display: flex;
  flex-direction: column;
  max-height: 16rem;
  overflow: auto;
  margin: var(--space-3) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.records-picker__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.records-picker__row:last-child {
  border-bottom: 0;
}

.records-picker__empty {
  padding: var(--space-3);
  color: var(--color-muted);
  margin: 0;
}

.records-backlinks {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.records-backlinks__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.records-backlinks__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.records-backlinks__item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-1) 0;
  font: inherit;
  color: var(--color-link, inherit);
  text-align: left;
  cursor: pointer;
}

.records-backlinks__item:hover {
  text-decoration: underline;
}

/* ---- repeater (composite section) ---------------------------------------- */

.repeater-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
}

.repeater-cell__empty {
  margin: 0;
  font-size: 0.85rem;
}

.repeater-cell__rows,
.repeater-cell__table-wrap {
  overflow-x: auto;
  min-width: 0;
  width: 100%;
}

.repeater-cell__table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 85%, transparent);
  border-radius: 6px;
}

.repeater-cell__table th,
.repeater-cell__table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent);
  vertical-align: top;
  min-width: 8rem;
  box-sizing: border-box;
}

.repeater-cell__table th {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--muted, #666);
  background: color-mix(in srgb, var(--border, #e5e5e5) 22%, transparent);
}

.repeater-cell__table .repeater-cell__num-col {
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.25rem;
  text-align: center;
  color: var(--muted, #666);
  font-variant-numeric: tabular-nums;
}

.repeater-cell__table .repeater-cell__row-actions {
  width: 5.5rem;
  min-width: 5.5rem;
  max-width: 5.5rem;
  padding: 0.2rem 0.3rem;
  vertical-align: middle;
}

.repeater-cell__actions {
  display: flex;
  gap: 0.15rem;
  align-items: center;
  justify-content: flex-end;
}

.repeater-cell__card {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.repeater-cell__field-label {
  font-size: 0.75rem;
  color: var(--muted, #666);
  font-weight: 600;
}

.repeater-cell__field {
  background-color: var(--color-bg);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
}

.repeater-cell__sub > * {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.repeater-cell__textarea {
  width: 100%;
  min-height: 3.5rem;
  resize: vertical;
}

.repeater-schema {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.repeater-schema__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.repeater-schema__row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.25rem;
  border-radius: 4px;
}

.repeater-schema__row.is-selected {
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
}

.repeater-schema__label {
  flex: 1 1 8rem;
  min-width: 6rem;
}

.repeater-schema__width {
  width: 3.5rem;
}

.repeater-schema__sub-opts {
  border-top: 1px solid var(--border, #e5e5e5);
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ============================================================================
   Cards tab calendar mode (ui/cardsCalendar.js) + entity schedules
   (ui/scheduleEditor.js). Distinct from .view-calendar — the dashboard
   widget's count-dot month grid — because this one holds titled pills.
   ========================================================================== */

.cards-cal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
}

.cards-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cards-cal__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-md, var(--font-size-md));
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: -6px;
  cursor: pointer;
}

.cards-cal__title:hover {
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.04));
}

.cards-cal__title svg {
  color: var(--color-ink-faint);
}

/* ---- month/year picker popover (cards-cal title) --------------------------- */

.popover--cal-picker {
  padding: var(--space-2);
}

.cal-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cal-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cal-picker__year {
  font-size: var(--text-md, var(--font-size-md));
  font-variant-numeric: tabular-nums;
}

.cal-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.cal-picker__month {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
  text-align: center;
}

.cal-picker__month:hover {
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.04));
}

.cal-picker__month.is-today {
  border-color: var(--color-accent);
}

.cal-picker__month.is-current {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.cards-cal__today {
  font-size: var(--text-sm);
}

.cards-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cards-cal__dow {
  text-align: center;
  font-size: 11px;
  color: var(--color-ink-faint);
  padding: 2px 0;
}

.cards-cal__day {
  min-height: 96px;
  background: var(--color-surface-sunken, rgba(0, 0, 0, 0.03));
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}

.cards-cal__day.is-expanded {
  overflow: visible;
}

.cards-cal__day.is-empty {
  background: transparent;
}

.cards-cal__day.is-today {
  border-color: var(--color-accent);
}

.cards-cal__num {
  font-size: 11px;
  color: var(--color-ink-faint);
  padding: 0 2px 2px;
}

.cards-cal__day.is-today .cards-cal__num {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.cards-cal__pill {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border: none;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--entity-card) 18%, transparent);
  box-shadow: inset 2px 0 0 0 var(--entity-card);
}

.cards-cal__pill--highlight {
  background: color-mix(in srgb, var(--entity-highlight) 18%, transparent);
  box-shadow: inset 2px 0 0 0 var(--entity-highlight);
}

.cards-cal__pill--view {
  background: color-mix(in srgb, var(--entity-view) 18%, transparent);
  box-shadow: inset 2px 0 0 0 var(--entity-view);
}

.cards-cal__pill:hover {
  filter: brightness(0.96);
}

.cards-cal__pill-time {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-faint);
}

.cards-cal__pill-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-cal__pill-recur {
  flex: none;
  color: var(--color-ink-faint);
}

.cards-cal__more {
  border: none;
  background: transparent;
  color: var(--color-ink-faint);
  font-size: 10px;
  text-align: left;
  padding: 1px 4px;
  cursor: pointer;
}

.cards-cal__more:hover {
  color: var(--color-ink);
}

.cards-cal__empty {
  margin: 0;
}

/* ---- schedule chip (tiles, detail bars, list rows) ------------------------ */

.schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-ink-faint);
  border: var(--border-hairline);
  border-radius: 999px;
  padding: 0 6px;
  white-space: nowrap;
}

.schedule-chip svg {
  flex: none;
}

.schedule-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-btn--set {
  color: var(--color-accent);
}

/* ---- schedule editor popover ---------------------------------------------- */

.popover--schedule {
  max-width: 320px;
}

.schedule-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  font-size: var(--text-sm);
}

.schedule-editor__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.schedule-editor__label {
  flex: none;
  width: 52px;
  color: var(--color-ink-faint);
}

.schedule-editor__row .input {
  flex: 1;
  min-width: 0;
}

.schedule-editor__allday {
  cursor: pointer;
}

.schedule-editor__num {
  max-width: 72px;
}

.schedule-editor__unit {
  color: var(--color-ink-faint);
}

.schedule-editor__recurrence {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: var(--border-hairline);
  padding-top: var(--space-2);
}

.schedule-editor__weekdays {
  display: inline-flex;
  gap: 3px;
}

.schedule-editor__wd {
  width: 26px;
  height: 26px;
  border: var(--border-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink-faint);
  font-size: 11px;
  cursor: pointer;
}

.schedule-editor__wd.is-on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.schedule-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}