/* --- Badges ---
   Flat, paper-ink palette driven by the design tokens' tint variables.
   Shared .badge rules keep the pill geometry consistent; per-status rules
   supply the surface/ink pair. No more hard-coded hex colors. */
.badge {
  padding: 1px 7px;
  border-radius: var(--r-sm);
  font-size: var(--fs-9);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.6;
}
.badge-backlog {
  background: var(--tint-neutral);
  color: var(--tint-neutral-ink);
}
.badge-in_progress {
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
}
.badge-waiting,
.badge-committing {
  background: var(--tint-amber);
  color: var(--tint-amber-ink);
}
.badge-done {
  background: var(--tint-green);
  color: var(--tint-green-ink);
}
.badge-failed {
  background: var(--tint-red);
  color: var(--tint-red-ink);
}
.badge-archived {
  background: var(--tint-neutral);
  color: var(--tint-neutral-ink);
  font-style: italic;
}
.badge-cancelled {
  background: var(--tint-plum);
  color: var(--tint-plum-ink);
}
.badge-cancelling {
  background: var(--tint-amber);
  color: var(--tint-amber-ink);
}
.badge-priority {
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  min-width: 20px;
  text-align: center;
}
.badge-testing {
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
}
.badge-test-pass {
  background: var(--tint-green);
  color: var(--tint-green-ink);
}
.badge-test-fail {
  background: var(--tint-red);
  color: var(--tint-red-ink);
}
.badge-test-none {
  background: var(--tint-neutral);
  color: var(--tint-neutral-ink);
}
.badge-blocked,
.badge-dep-cancelled,
.badge-deps-met,
.badge-deps-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-blocked,
.badge-dep-cancelled {
  background: var(--tint-amber);
  color: var(--tint-amber-ink);
}
.badge-deps-met,
.badge-deps-ok {
  background: var(--tint-green);
  color: var(--tint-green-ink);
}
.badge-scheduled {
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
}
/* Brainstorm / idea-agent tag badge */
.badge-idea-agent {
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
  font-style: italic;
}

/* Brainstorm category badge (topic domain of a brainstorm-generated task) */
.badge-category {
  background: var(--tint-plum);
  color: var(--tint-plum-ink);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-9);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.7;
  padding: 1px 7px;
  margin: 1px 2px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  vertical-align: middle;
}
.tag-chip-overflow {
  background: var(--bg-sunk);
  color: var(--ink-3);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.tag-chip-overflow:hover {
  color: var(--ink);
}
.tag-chip-extra {
  display: none;
}
.tag-chip-row.expanded .tag-chip-extra {
  display: inline-block;
}
.tag-chip-row.expanded .tag-chip-overflow {
  display: none;
}
.tag-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 2px 0 3px;
  min-height: 0;
}
.tag-chip-edit {
  position: relative;
  padding-right: 18px;
  max-width: 100px;
}
.tag-chip-remove {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.tag-chip-remove:hover {
  color: #fff;
}
.tag-chip-input-row {
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  background: var(--bg-input);
  min-height: 28px;
}
.tag-chip-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  min-width: 80px;
  flex: 1;
  padding: 0;
}
.tag-chip-input::placeholder {
  color: var(--text-muted);
}

/* Brainstorm metadata tag badges (generated by idea-agent tasks) */
.badge-tag {
  background: #e4e0d8;
  color: #5c5750;
}
.badge-impact {
  background: linear-gradient(180deg, #efe7ff 0%, #d9c7ff 100%);
  color: #39216f;
  border: 1px solid #c6a7fb;
}
[data-theme="dark"] .badge-tag {
  background: #292522;
  color: #8f8780;
}
[data-theme="dark"] .badge-priority {
  background: linear-gradient(180deg, #242f4a 0%, #1d273f 100%);
  border-color: #2d4a82;
  color: #7fa2dd;
}
[data-theme="dark"] .badge-impact {
  background: linear-gradient(180deg, #2b2345 0%, #211638 100%);
  border-color: #4b3c74;
  color: #ccb0ff;
}

/* --- Max Parallel Tag --- */
.max-parallel-tag {
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 500;
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  line-height: 1.3;
}
.max-parallel-tag:hover {
  filter: brightness(0.95);
}
.badge-spec {
  background: #ede5f7;
  color: #5a3d8a;
  border-left-color: #5a3d8a40;
}
[data-theme="dark"] .badge-spec {
  background: #2a1f3d;
  color: #b89ee0;
  border-left-color: #b89ee040;
}
