/*
 * LifeOS — Goals tab + retired-area UX, deprecation banner.
 *
 * Token-driven: every value pulls from css/app.css :root.
 * No hex/px literals introduced.
 *
 * Mounted by:
 *   - js/goals-tab.js (Active list + Completed&Paused <details> + Retired
 *     <details> with per-row Migrate CTAs + Quarterly Review banner)
 *   - js/goals.js (deprecation banner on legacy /goals route)
 */

/* ── Deprecation banner on legacy /goals route ───────────────────────── */
.goals-deprecation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.goals-deprecation-banner .banner-body { flex: 1; }
.goals-deprecation-banner .banner-body strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-1);
}

/* ── Retired-area <details> block on the new Goals tab ───────────────── */
.retired-block {
  margin-top: var(--sp-6);
}
.retired-block summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  color: var(--text-muted);
  list-style: none;
}
.retired-block summary::-webkit-details-marker { display: none; }
.retired-block summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--sp-2);
  transition: transform 120ms ease;
}
.retired-block[open] summary::before { transform: rotate(90deg); }
.retired-block[open] summary { border-bottom: 1px solid var(--border-2); }

.retired-list {
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.retired-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.retired-row:last-child { border-bottom: 0; }
.retired-row-left { flex: 1; min-width: 0; }
.retired-title {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-md);
}
.retired-meta {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.retired-actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── Empty-state for active goals ─────────────────────────────────────── */
.goals-tab-empty {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}

/* ── Responsive: ≤600px column-stack (ac-10) ──────────────────────────── */
@media (max-width: 600px) {
  .goals-deprecation-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .goals-deprecation-banner .btn { width: 100%; }

  .retired-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .retired-actions {
    width: 100%;
  }
  .retired-actions .btn {
    flex: 1;
    justify-content: center;
  }
}