/* css/components/mission-card.css — TinkyTown SDR
 *
 * Wires the mission-card primitive into the Home dashboard's "🎯 Today's
 * Missions" section. Core .mission-card-* visuals live in
 * /css/pages/mission-engine.css (canonical, shared with the AI sub-tab).
 * This file ONLY adds:
 *
 *   1. .home-missions-card section wrapper (border / padding / spacing
 *      consistent with .home-p4-card from /css/pages/home.css).
 *   2. .home-missions-list grid for stacked cards.
 *   3. Empty / error / loading states scoped to the home section.
 *   4. New action states added by the home wire-up:
 *        .mission-card-btn-complete   (positive primary)
 *        .mission-card-status         (terminal-state pill replacing buttons)
 *        .mission-card-pending        (dim during in-flight network action)
 *
 * Brand tokens: --surface-deep #0d0b10 · --amber #e8a33d · --green #22c55e
 * · --green-soft #4ade80. No raw hex outside fallbacks.
 * Fonts: Fraunces (titles) + General Sans (body) — inherit from home.
 */

/* ── Home-section wrapper ─────────────────────────────────────────── */
.home-missions-card {
  /* Match .home-p4-card surface so the section reads as part of the same
   * dashboard family. .home-p4-card already supplies background / border /
   * radius / padding when this section is mounted inside #home-p4-sections,
   * but the missions section is also independently mountable at the top of
   * #home-wrap — give it the same skin in that path. */
  background: var(--surface-card, color-mix(in srgb, var(--surface-deep, #0d0b10) 88%, transparent));
  border: 1px solid color-mix(in srgb, var(--amber, #e8a33d) 24%, transparent);
  border-radius: 14px;
  padding: 18px 22px 16px;
  margin: 16px auto;
  max-width: 880px;
  color: var(--text-primary, #f4f1ea);
  font-family: 'General Sans', system-ui, sans-serif;
}

.home-missions-body {
  /* Tighter vertical rhythm than the generic six-section body. */
  display: block;
}

/* ── Grid of mission cards (home variant) ──────────────────────────── */
.home-missions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

/* Mission count badge — green-soft on green-soft tint (consistent with
 * the XP pill semantic family: operational state). Pairs with the
 * heading; aria-label on the element does the announcement. */
.home-missions-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green-soft, #4ade80) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--green, #22c55e) 50%, transparent);
  color: var(--green-soft, #4ade80);
  font: 700 0.78rem/1 'General Sans', system-ui, sans-serif;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .home-missions-list { grid-template-columns: 1fr; gap: 12px; }
  .home-missions-card { margin: 12px auto; padding: 14px 16px 12px; }
  .home-missions-count { height: 20px; min-width: 22px; font-size: 0.72rem; }
}

/* ── Empty / error states (scoped to home section) ─────────────────── */
.home-missions-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 22px 12px; text-align: center;
  color: var(--text-muted, rgba(255, 255, 255, 0.72));
}
.home-missions-empty-emoji { font-size: 1.8rem; line-height: 1; }
.home-missions-empty-text {
  font-size: 0.95rem; line-height: 1.5; max-width: 36ch;
  color: var(--text-primary, #f4f1ec);
}

.home-missions-empty-sub {
  font-size: 0.85rem; color: var(--text-muted, rgba(255, 255, 255, 0.7));
  max-width: 38ch; line-height: 1.5; margin: -2px 0 6px;
}

/* Collapsible "what is this?" hint — uses native <details>. */
.home-missions-empty-hint {
  margin: 2px 0 4px; font-size: 0.85rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.65)); max-width: 40ch;
}
.home-missions-empty-hint summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; padding: 2px 6px; border-radius: 6px; outline: none;
}
.home-missions-empty-hint summary::-webkit-details-marker { display: none; }
.home-missions-empty-hint summary::before {
  content: '▸'; font-size: 0.75rem; display: inline-block;
  transition: transform 160ms ease;
}
.home-missions-empty-hint[open] summary::before { transform: rotate(90deg); }
.home-missions-empty-hint summary:focus-visible {
  outline: 2px solid var(--amber, #e8a33d); outline-offset: 2px;
}
.home-missions-empty-hint-body {
  margin: 8px 0 0; padding: 0 4px; text-align: left; line-height: 1.5;
}

.home-missions-generate {
  margin-top: 6px;
  min-height: 44px;
  min-width: 140px;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  background: var(--amber, #e8a33d);
  color: var(--surface-deep, #0d0b10);
  border: 1px solid var(--amber, #e8a33d);
  font: 600 0.95rem/1 'General Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.home-missions-generate:hover { filter: brightness(1.06); }
.home-missions-generate:active { transform: translateY(1px); }
.home-missions-generate:focus-visible {
  outline: 2px solid var(--amber, #e8a33d);
  outline-offset: 2px;
}

.home-missions-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--amber, #e8a33d) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--amber, #e8a33d) 40%, transparent);
  border-radius: 10px;
  color: var(--text-primary, #f4f1ec);
  font-size: 0.92rem;
  line-height: 1.45;
}

.home-missions-error-icon {
  font-size: 1.15rem;
  flex: 0 0 auto;
  line-height: 1;
}
.home-missions-error-text { flex: 1 1 240px; min-width: 0; }

.home-missions-retry {
  /* 44px tap target floor (Apple HIG / WCAG 2.5.5). */
  min-height: 44px;
  min-width: 88px;
  padding: 0.4rem 1rem;
  background: var(--amber, #e8a33d);
  color: var(--surface-deep, #0d0b10);
  border: 1px solid var(--amber, #e8a33d);
  border-radius: 8px;
  font: 600 0.92rem/1 'General Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.home-missions-retry:hover { filter: brightness(1.06); }
.home-missions-retry:active { transform: translateY(1px); }
.home-missions-retry:focus-visible {
  outline: 2px solid var(--green-soft, #4ade80);
  outline-offset: 2px;
}

/* ── New mission-card-btn-complete (post-accept action) ────────────── */
/* Green action — completing a mission is an operational success
 * (--green semantic). Pairs visually with the XP-reward badge. */
.mission-card-btn-complete {
  background: var(--green, #22c55e);
  color: var(--surface-deep, #0d0b10);
  border: 1px solid var(--green, #22c55e);
}
.mission-card-btn-complete:hover { filter: brightness(1.06); }

/* ── Terminal status pill (replaces button row) ────────────────────── */
.mission-card-status {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--surface-deep, #0d0b10) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-muted, #ffffff) 18%, transparent);
  color: var(--text-muted, rgba(255, 255, 255, 0.78));
}

.mission-card-status-completed {
  color: var(--green-soft, #4ade80);
  border-color: color-mix(in srgb, var(--green, #22c55e) 50%, transparent);
  background: color-mix(in srgb, var(--green, #22c55e) 12%, transparent);
}

.mission-card-status-snoozed {
  color: var(--amber, #e8a33d);
  border-color: color-mix(in srgb, var(--amber, #e8a33d) 50%, transparent);
  background: color-mix(in srgb, var(--amber, #e8a33d) 10%, transparent);
}

.mission-card-status-abandoned {
  /* Decline / abandon — muted, no semantic colour. */
}

/* ── Pending state during in-flight network action ─────────────────── */
.mission-card-pending {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Skeleton loading state lives in /css/components/mission-card-skeleton.css
 * (linked alongside this file by js/views/home.js — kept separate to
 * keep mission-card.css under the file-size target). */

/* ── Reduced-motion guard (component-scoped) ───────────────────────── */
/* Vestibular safety. Brand celebratory easing on click survives — only
 * idle/hover transitions stop. */
@media (prefers-reduced-motion: reduce) {
  .home-missions-generate,
  .home-missions-retry,
  .mission-card-pending,
  .home-missions-empty-hint summary::before { transition: none; }
}