/* A design's decoration (src/decoration.rs; the 20 Oct handoff's *Edit design* and *Add an item*):
   a row of method, place and words, or a pill folding the same. Every value is a token. */

.decoration-row {
  display: grid;
  grid-template-columns: var(--decoration-method-column) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line);
  font-size: var(--text-quiet);
}

.decoration-row-staged .decoration-said {
  background: var(--color-flag);
  color: var(--color-flag-ink);
}

.decoration-method,
.decoration-chip-method {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-display);
}

.decoration-note {
  color: var(--color-muted);
}

.decoration-actions {
  display: flex;
  gap: var(--space-3);
  white-space: nowrap;
}

/* Folded into a pill, as the *Add an item* row lists them: rests on the shell, so round. */
.decoration-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-1) 1px var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-shell);
  font-size: var(--text-meta);
  white-space: nowrap;
}

.decoration-chip-quiet {
  border-color: var(--color-field-line);
  color: var(--color-meta);
  padding-right: var(--space-3);
}

.decoration-chip-x {
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: var(--text-quiet);
  cursor: pointer;
}