/* ═══════════════════════════════════════════════════════════════════
   roadmaps.css — Roadmaps index page (Phase 4.1 multiple roadmaps).
   Self-contained: defines its own .btn variants (no global .btn exists),
   grid, cards, empty state, and skeleton, all on design-system tokens.
   ─────────────────────────────────────────────────────────────── */

.roadmaps-page {
  min-height: 100vh;
  padding: var(--space-8) var(--space-6) var(--space-12);
}
.roadmaps-page__container {
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────────── */
.roadmaps-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.roadmaps-header__title {
  font-size: var(--font-size-3xl, 1.875rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}
.roadmaps-header__subtitle {
  font-size: var(--font-size-md, 1rem);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 56ch;
  line-height: 1.6;
}
.roadmaps-header__cta { flex: 0 0 auto; }

.roadmaps-tip {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  /* Was `var(--space-7)` — doesn't exist in the token scale, so this whole margin declaration
     was invalid and silently dropped; the tip sat with zero space before the grid below it. */
  margin: 0 0 var(--space-6);
}

/* ── Grid ───────────────────────────────────────────────────────── */
.roadmaps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

/* ── Card ───────────────────────────────────────────────────────── */
.roadmaps-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.roadmaps-card:hover {
  border-color: var(--color-border-strong, var(--color-primary));
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.08));
}
.roadmaps-card--removing {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.roadmaps-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.roadmaps-card__status {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid transparent;
}
.roadmaps-card__status--active    { color: var(--color-band-competitive, #ca8a04); background: color-mix(in srgb, #ca8a04 12%, transparent); }
.roadmaps-card__status--completed { color: var(--color-band-leading, #16a34a);    background: color-mix(in srgb, #16a34a 12%, transparent); }
.roadmaps-card__status--paused    { color: var(--color-text-tertiary, #94a3b8);   background: var(--color-surface-inset); }
.roadmaps-card__focus {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-primary);
}

.roadmaps-card__title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 650;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.35;
}

.roadmaps-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.roadmaps-card__chip {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: 2px 8px;
}

.roadmaps-card__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.roadmaps-card__progress-bar {
  flex: 1;
  height: 8px;
  background: var(--color-surface-inset);
  border-radius: var(--radius-full, 999px);
  overflow: hidden;
}
.roadmaps-card__progress-bar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
  transition: width 0.4s ease;
}
.roadmaps-card__progress-val {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 3ch;
  text-align: right;
}

.roadmaps-card__meta {
  display: flex;
  gap: var(--space-6);
  margin: 0;
}
.roadmaps-card__meta dt {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #94a3b8);
  margin: 0;
}
.roadmaps-card__meta dd {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 500;
  margin: 2px 0 0;
}

.roadmaps-card__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
.roadmaps-card__open { flex: 1; text-align: center; }

/* Inline delete confirm */
.roadmaps-card__confirm {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.roadmaps-card__confirm-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.roadmaps-card__confirm-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Skeleton card */
.roadmaps-card--skeleton {
  gap: var(--space-4);
  min-height: 200px;
}

/* ── Empty / auth states ────────────────────────────────────────── */
.roadmaps-empty {
  text-align: center;
  max-width: 480px;
  margin: var(--space-10) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.roadmaps-empty__art { color: var(--color-primary); opacity: 0.85; }
.roadmaps-empty__title {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: var(--space-2) 0 0;
}
.roadmaps-empty__text {
  font-size: var(--font-size-md, 1rem);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}

/* ── Buttons (self-contained; no global .btn exists) ────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.btn:disabled { opacity: 0.6; cursor: default; }
.btn--sm { padding: 7px 12px; font-size: var(--font-size-xs, 0.75rem); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover, var(--color-primary)); }
.btn--secondary {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-surface-inset); }
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-subtle); color: var(--color-text-primary); }
.btn--danger { background: var(--color-error, #dc2626); color: #fff; }
.btn--danger:hover:not(:disabled) { background: var(--color-error-hover, #b91c1c); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .roadmaps-page { padding: var(--space-6) var(--space-4) var(--space-10); }
  .roadmaps-header__cta { width: 100%; justify-content: center; }
  .roadmaps-grid { grid-template-columns: 1fr; }
}