@layer surfaces {

/* Storyboard lens: Prose/Board toggle + board view */
/* Prose/board heads the lens rail (punch list 2026-08-06) — a vertical mini-segmented
   sized to the 52px rail. */
.document-view-toggle {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--c-gray-300);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}

.document-view-button {
  border: 0;
  background: var(--c-white);
  color: var(--c-gray-500);
  cursor: pointer;
  font: inherit;
  font-size: 0.6875rem;
  padding: 0.3rem 0.4rem;
}

.document-view-button + .document-view-button {
  border-top: 1px solid var(--c-gray-300);
}

.document-view-button:hover {
  color: var(--c-gray-900);
}

.editor-surface[data-view-mode="prose"] .document-view-button.is-prose,
.editor-surface[data-view-mode="board"] .document-view-button.is-board {
  background: var(--c-ink);
  color: var(--c-white);
}

/* View switching: prose shows the workspace, board shows the board surface. */
.document-board {
  display: none;
}

.editor-surface[data-view-mode="board"] .editor-workspace {
  display: none;
}

/* The board is a full-bleed lens: no annotation gutter, so the drawer goes, and the rail
   keeps only the one control that gets the writer back. Hiding the whole rail here (as this
   did before the toggle moved onto it, 2026-08-06) stranded them on the board with no way
   back to prose — the annotation lenses have nothing to act on, but the view switch is the
   exit, not a lens. */
.editor-surface[data-view-mode="board"] .editor-lens-drawer,
.editor-surface[data-view-mode="board"] .editor-lens-rail > *:not(.document-view-toggle) {
  display: none;
}

.editor-surface[data-view-mode="board"] .editor-lens-rail {
  border-left: 0;
  background: transparent;
}

.editor-surface[data-view-mode="board"] .document-board {
  display: block;
}

.document-board-empty {
  color: var(--c-gray-500);
  font-size: 0.95rem;
}

.document-board-columns {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.document-board-column {
  flex: 0 0 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 1px solid var(--c-gray-200);
  border-radius: 8px;
  background: var(--c-gray-25);
  padding: 0.75rem;
}

.document-board-column-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.document-board-column-title {
  color: var(--c-gray-700);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

.document-board-column-count {
  color: var(--c-gray-500);
  font-size: 0.75rem;
}

.document-board-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 2.5rem;
}

.document-board-card {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--c-gray-200);
  border-radius: 6px;
  background: var(--c-white);
  padding: 0.6rem 0.7rem;
  cursor: grab;
}

.document-board-card.is-dragging {
  opacity: 0.5;
}

.document-board-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.document-board-card-title {
  border: 0;
  background: transparent;
  color: var(--c-gray-900);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  padding: 0;
}

.document-board-card-title:hover {
  color: var(--c-accent);
}

.document-board-card-status {
  flex: 0 0 auto;
  border: 1px solid var(--c-gray-300);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-gray-500);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
}

.document-board-card-status[data-status] {
  border-color: var(--c-accent);
  color: var(--c-accent);
  font-weight: 600;
}

/* "planned" reads quiet — it is intention, not achievement, so it stays in the
   grays and leaves the accent to the statuses prose has earned. */
.document-board-card-status[data-status="planned"] {
  border-color: var(--c-gray-400);
  color: var(--c-gray-600);
}

/* In-place synopsis: the note-card textarea primitive on the card — quiet until touched. */
.document-board-card-synopsis {
  margin: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--c-gray-600);
  cursor: text;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  padding: 0.15rem 0.25rem;
  resize: none;
  width: 100%;
}

/* An empty card stays empty — the placeholder invitation appears only when the writer
   reaches for the card (hover/focus), so the board reflects rather than prompts. */
.document-board-card-synopsis::placeholder {
  color: transparent;
}

.document-board-card-synopsis:hover::placeholder,
.document-board-card-synopsis:focus::placeholder {
  color: var(--c-gray-400);
}

.document-board-card-synopsis:hover {
  border-color: var(--c-gray-200);
}

.document-board-card-synopsis:focus {
  border-color: var(--c-gray-300);
  background: var(--c-white);
  color: var(--c-gray-900);
  outline: none;
}

.document-board-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.document-board-card-tag {
  border: 1px solid var(--c-gray-300);
  border-radius: 999px;
  background: var(--c-gray-50);
  color: var(--c-gray-700);
  font-size: 0.75rem;
  padding: 0.05rem 0.45rem;
}

/* Structure-template overlay: picker, spine of beats, per-card beat assignment */
.document-board-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.document-board-template-label {
  color: var(--c-gray-500);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

.document-board-template-select,
.document-board-card-beat {
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  background: var(--c-white);
  color: var(--c-gray-900);
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.25rem 0.4rem;
}

.document-board-spine {
  margin-bottom: 1rem;
  border: 1px solid var(--c-gray-200);
  border-radius: 8px;
  background: var(--c-white);
  padding: 0.75rem;
}

.document-board-spine-summary {
  margin: 0 0 0.6rem;
  color: var(--c-gray-700);
  font-size: 0.8125rem;
  font-weight: 600;
}

.document-board-beats {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

.document-board-beat {
  flex: 0 0 auto;
  display: grid;
  gap: 0.1rem;
  min-width: 6.5rem;
  border: 1px solid var(--c-gray-200);
  border-left: 3px solid var(--c-gray-300);
  border-radius: 4px;
  background: var(--c-gray-25);
  padding: 0.4rem 0.5rem;
}

.document-board-beat-name {
  color: var(--c-gray-900);
  font-size: 0.8125rem;
  font-weight: 600;
}

.document-board-beat-band {
  color: var(--c-gray-500);
  font-size: 0.7rem;
}

.document-board-beat-actual {
  color: var(--c-warning-700);
  font-size: 0.7rem;
  font-weight: 600;
}

.document-board-beat[data-beat-state="placed"] {
  border-left-color: var(--c-success);
  background: var(--c-success-50);
}

.document-board-beat[data-beat-state="misplaced"] {
  border-left-color: var(--c-warning);
  background: var(--c-warning-50);
}

.document-board-beat[data-beat-state="missing"] {
  border-left-color: var(--c-danger);
  background: var(--c-danger-50);
}

/* Below the planning-phase word floor a tagged beat is a declared fact, not a judgment —
   it reads as "tagged", in the accent, never in a verdict color. */
.document-board-beat[data-beat-state="assigned"] {
  border-left-color: var(--c-accent);
}

.document-board-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.document-board-card-beat {
  flex: 1 1 auto;
  min-width: 0;
}

.document-board-card-position {
  flex: 0 0 auto;
  color: var(--c-gray-500);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.document-versions-empty {
  color: var(--c-gray-500);
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

.document-version {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid var(--c-gray-200);
  border-radius: 6px;
  background: var(--c-white);
  padding: 0.5rem;
}

.document-version.is-active {
  border-color: var(--c-gray-400);
  background: var(--c-gray-50);
}

.document-version-main {
  min-width: 0;
}

.document-version-label {
  overflow: hidden;
  color: var(--c-gray-900);
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-version-meta {
  overflow: hidden;
  color: var(--c-gray-500);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-version-preview-button {
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
}

.document-version-preview {
  margin-top: 0.75rem;
}

.document-version-preview-empty {
  border-top: 1px solid var(--c-gray-200);
  color: var(--c-gray-500);
  font-size: 0.875rem;
  padding: 0.75rem 0 0;
}

.document-version-preview-panel {
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid var(--c-gray-200);
  padding-top: 0.75rem;
}

.document-version-preview-label {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--c-gray-300);
  border-radius: 4px;
  color: var(--c-gray-900);
  font: inherit;
  padding: 0.4rem 0.5rem;
}

.document-version-preview-meta {
  color: var(--c-gray-500);
  font-size: 0.75rem;
}

.document-version-preview-text {
  overflow: auto;
  max-height: 16rem;
  margin: 0;
  border: 1px solid var(--c-gray-200);
  border-radius: 6px;
  background: var(--c-gray-50);
  color: var(--c-gray-800);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  padding: 0.5rem;
  white-space: pre-wrap;
}

}