/* ── PROGRESSION: goals and their steps ───────────────────────
   The step list is the working part of this wing, so it is built to be
   clicked: a real target on the left, and a done step that visibly recedes
   rather than disappearing.
   ------------------------------------------------------------ */

.wing-goal { display: flex; flex-direction: column; }

.wing-goal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.wing-goal-head .wing-row-title { flex: 1; min-width: 0; }

.wing-badge.stage-active  { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.5); color: #38bdf8; }
.wing-badge.stage-paused  { background: rgba(251,146,60,.13); border-color: rgba(251,146,60,.45);color: #fb923c; }
.wing-badge.stage-someday { background: rgba(148,163,184,.14);border-color: rgba(148,163,184,.4);color: #94a3b8; }
.wing-badge.stage-reached { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.5);  color: #4ade80; }

/* ── The tickable steps ───────────────────────────────────── */
.wing-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }

.wing-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-primary);
}
/* Done, not gone — a finished step is still evidence of the ground covered. */
.wing-step.done { opacity: 0.6; }
.wing-step.done span { text-decoration: line-through; }

.wing-step-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wing-step-box:hover { border-color: var(--color-primary); color: var(--color-primary); }
.wing-step.done .wing-step-box { background: #4ade80; border-color: #4ade80; color: #0b1220; }

/* ── The next steps, on the card ──────────────────────────── */
.wing-goal-next {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.wing-goal-next .wing-step {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.wing-goal-next .wing-step-box {
  flex-shrink: 0;
  /* A tick target on a card you can also click to open: it has to be big
     enough to hit deliberately and small enough not to look like the card's
     main action. */
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  color: var(--wing-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.wing-goal-next .wing-step-box:hover {
  color: var(--color-success);
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}
.wing-goal-more { font-size: 0.72rem; color: var(--wing-muted); padding-left: 1.65rem; }
.wing-goal-alldone {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-success);
}
.wing-goal-alldone i, .wing-goal-alldone svg { width: 14px; height: 14px; }

/* ── A target date that carries its own state ─────────────────
   Overdue, today, this week and someday all looked identical before, which
   made the field decorative.
   ------------------------------------------------------------ */
.wing-target {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--wing-muted);
}
.wing-target.is-soon { color: var(--color-warning); font-weight: 700; }
.wing-target.is-today { color: var(--color-warning); font-weight: 800; }
.wing-target.is-overdue { color: var(--color-danger); font-weight: 800; }