/* Bounty Challenges
 * Usage: Bounty program cards, detail views, and forms.
 *
 * Cards:   <article class="bounty-card" data-state="active|proposed|completed|...">
 * Status:  <span class="bounty-card__status" data-state="active|proposed|...">
 * Detail:  <div class="bounty-detail">
 * Form:    <div class="bounty-form-page">
 */

/* ==================== PROGRAM LAYOUT ==================== */

.bounty-program {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.bounty-program__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.bounty-program__header h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.bounty-list {
  display: grid;
  gap: var(--space-md);
}

.bounty-empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text-subtle);
}

/* ==================== CARD ==================== */

.bounty-card {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-surface);
  transition: border-color 150ms ease;
}

.bounty-card:hover {
  border-color: var(--color-border-hover, var(--color-primary));
}

.bounty-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.bounty-card__title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.bounty-card__title a {
  color: inherit;
  text-decoration: none;
}

.bounty-card__title a:hover {
  text-decoration: underline;
}

/* ==================== STATUS BADGE ==================== */

.bounty-card__status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  line-height: 1;
}

.bounty-card__status[data-state="proposed"] {
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent);
  color: var(--color-warning, #f59e0b);
}

.bounty-card__status[data-state="active"] {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
}

.bounty-card__status[data-state="verification_requested"] {
  background: color-mix(in srgb, var(--color-accent, var(--color-primary)) 15%, transparent);
  color: var(--color-accent, var(--color-primary));
}

.bounty-card__status[data-state="completed"] {
  background: color-mix(in srgb, var(--color-success, #22c55e) 15%, transparent);
  color: var(--color-success, #22c55e);
}

.bounty-card__status[data-state="fulfilled"] {
  background: color-mix(in srgb, var(--color-success, #22c55e) 15%, transparent);
  color: var(--color-success, #22c55e);
}

.bounty-card__status[data-state="cancelled"],
.bounty-card__status[data-state="expired"] {
  background: color-mix(in srgb, var(--color-text-subtle) 15%, transparent);
  color: var(--color-text-subtle);
}

/* ==================== CARD DETAILS ==================== */

.bounty-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bounty-card__meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-sm);
}

.bounty-card__target {
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

/* ==================== PROGRESS BAR ==================== */

.bounty-card__progress {
  block-size: 6px;
  background: var(--theme-border);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.bounty-card__progress-bar {
  block-size: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full, 9999px);
  transition: width 300ms ease;
  min-inline-size: 0;
}

.bounty-card__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* ==================== DETAIL VIEW ==================== */

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

.bounty-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.bounty-detail__header h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.bounty-detail h2 {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  margin-block-end: var(--space-sm);
}

.bounty-detail__progress-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bounty-detail__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ==================== AGREEMENT GRID ==================== */

.bounty-agreement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-md);
}

.bounty-agreement-party {
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.bounty-agreement-party[data-state="accepted"] {
  border-color: var(--color-success, #22c55e);
  background: color-mix(in srgb, var(--color-success, #22c55e) 5%, transparent);
}

.bounty-agreement-party__role {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
}

.bounty-agreement-party__name {
  font-weight: var(--font-semibold);
  margin-block: var(--space-xs);
}

.bounty-agreement-party__status {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.bounty-agreement-party[data-state="accepted"] .bounty-agreement-party__status {
  color: var(--color-success, #22c55e);
}

/* ==================== FORM ==================== */

.bounty-form-page {
  max-inline-size: 40rem;
}

.bounty-form-page h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-block-end: var(--space-xs);
}

.bounty-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.bounty-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.bounty-form .form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 48rem) {
  .bounty-program__header {
    flex-direction: column;
    align-items: stretch;
  }

  .bounty-form .form-row {
    grid-template-columns: 1fr;
  }

  .bounty-detail__header {
    flex-direction: column;
  }
}