/*
 * The board's own vocabulary, built on css-zero's components and color scales.
 * Everything here is a component class used by a partial in app/views -- feature
 * views never assemble these effects out of utilities (app CLAUDE.md, UI rules).
 */

/* One tint per Stage value, so the status reads at a glance and survives dark mode. */
.stage-badge {
  --badge-background: light-dark(var(--zinc-100), var(--zinc-800));
  --badge-border-color: transparent;
  --badge-color: light-dark(var(--zinc-900), var(--zinc-100));
}

.stage-badge--gathering {
  --badge-background: light-dark(var(--sky-100), var(--sky-900));
  --badge-color: light-dark(var(--sky-800), var(--sky-100));
}

.stage-badge--gate {
  --badge-background: light-dark(var(--amber-100), var(--amber-900));
  --badge-color: light-dark(var(--amber-800), var(--amber-100));
}

.stage-badge--building {
  --badge-background: light-dark(var(--violet-100), var(--violet-900));
  --badge-color: light-dark(var(--violet-800), var(--violet-100));
}

.stage-badge--client_review {
  --badge-background: light-dark(var(--orange-100), var(--orange-900));
  --badge-color: light-dark(var(--orange-800), var(--orange-100));
}

.stage-badge--launch {
  --badge-background: light-dark(var(--teal-100), var(--teal-900));
  --badge-color: light-dark(var(--teal-800), var(--teal-100));
}

.stage-badge--live {
  --badge-background: light-dark(var(--emerald-100), var(--emerald-900));
  --badge-color: light-dark(var(--emerald-800), var(--emerald-100));
}

.stage-badge--on_hold {
  --badge-background: light-dark(var(--red-100), var(--red-900));
  --badge-color: light-dark(var(--red-800), var(--red-100));
}

/* A board section: the template heading, then its task rows. */
.board-section {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}

.board-section__heading {
  align-items: center;
  column-gap: var(--size-2);
  display: flex;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* A task row on the board: toggle, name, then its markers. */
.task-row {
  align-items: center;
  column-gap: var(--size-2);
  display: flex;
  flex-wrap: wrap;
}

.task-row--completed .task-row__name {
  color: var(--color-text-subtle);
  text-decoration: line-through;
}

.task-row__name {
  flex-grow: 1;
}

.task-row__markers {
  align-items: center;
  column-gap: var(--size-1);
  display: flex;
  flex-wrap: wrap;
}

/* Subtasks hang off their parent and are visually subordinate to it. */
.subtask-list {
  display: flex;
  flex-direction: column;
  margin-inline-start: var(--size-6);
  row-gap: var(--size-1);
}

/* The definition list used for the client's 11 template fields. */
.field-grid {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}

.field-grid__row {
  column-gap: var(--size-4);
  display: flex;
  flex-wrap: wrap;
}

.field-grid__label {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  min-inline-size: 12rem;
}

/* A comment: who said it and when, then the body exactly as it was pasted. */
.comment__meta {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.comment__body {
  font-family: inherit;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}