/* Chemlingo — home dashboard pilot: Duolingo-adjacent mascot energy.
   Scoped entirely under body[data-page="home"] so it never leaks into .field-card, .stat-pill,
   .list-row etc. as reused on other pages (field tree, friends, profile). See index.html's
   opening HTML comment for the direction contract this file builds. */

/* ── Mascot — base .mascot/.mascot-* rules and the mascot-bob keyframe now live in
   components.css (shared with signin.html's auth card). Home just sizes it bigger, as the
   hero's lead illustration. ─────────────────────────────────────────────────────────── */

body[data-page="home"] .home-hero {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
body[data-page="home"] .home-hero .mascot {
  width: 64px;
  height: 64px;
}

/* ── Stat pills → reward tiles ─────────────────────────────────────────────────────────── */

body[data-page="home"] .stat-pill {
  background: var(--brand-faint);
  border: 2.5px solid var(--brand);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 0 var(--brand-ridge);
  animation: tile-in 420ms var(--ease) backwards;
}
body[data-page="home"] .stat-pill:nth-child(1) { animation-delay: 0ms; }
body[data-page="home"] .stat-pill:nth-child(2) { animation-delay: 70ms; }
body[data-page="home"] .stat-pill:nth-child(3) { animation-delay: 140ms; }
body[data-page="home"] .stat-value { font-size: 22px; }
body[data-page="home"] .stat-pill-icon.is-flame {
  animation: flame-flicker 1.6s ease-in-out infinite;
}

/* tile-in and flame-flicker both live in components.css — see the shared-motion block there. */
/* ── Up next → quest card ──────────────────────────────────────────────────────────────── */

body[data-page="home"] .timeline-next.field-card {
  border-radius: 24px;
  border-width: 2.5px;
  box-shadow: 0 4px 0 var(--accent-dim);
}
body[data-page="home"] .timeline-next .field-glyph {
  width: 54px;
  height: 54px;
  font-size: 24px;
}
body[data-page="home"] .timeline-next-cta {
  animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* ── Recent activity rows ──────────────────────────────────────────────────────────────── */

/* The radius belongs on the resting rule, not the hover one: set only on :hover, and absent from
   the transition list, it snapped 8px -> 10px the instant the pointer landed. */
body[data-page="home"] .list-row {
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body[data-page="home"] a.list-row:hover {
  transform: scale(1.015);
}

/* ── Fields → the page's lead navigational grid ──────────────────────────────────────────
   Promoted from a compact bottom-of-page chip strip to full-size cards, since picking a field
   is this page's core action. Same "prominent tier" idiom the quest card (.timeline-next)
   already carries — resting ridge shadow, not just a hover-only one. All five sit on one row
   at desktop width, so the card itself is compacted into a centred "bubble": glyph stacked
   above name rather than side-by-side, tighter padding, no room-hungry blurb. ─────────────── */

body[data-page="home"] #fields.field-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s3);
}
body[data-page="home"] #fields.field-grid .field-card {
  padding: var(--s4);
  gap: var(--s3);
  align-items: center;
  text-align: center;
  border-width: 2.5px;
  box-shadow: 0 4px 0 var(--accent-dim);
  animation: tile-in 420ms var(--ease) backwards;
}
body[data-page="home"] #fields.field-grid .field-card-head {
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
body[data-page="home"] #fields.field-grid .field-glyph {
  width: 40px;
  height: 40px;
  font-size: 18px;
}
body[data-page="home"] #fields.field-grid .field-name {
  font-size: 13.5px;
  line-height: 1.25;
}
body[data-page="home"] #fields.field-grid .bar { width: 100%; }
body[data-page="home"] #fields.field-grid .field-card:nth-child(1) { animation-delay: 0ms; }
body[data-page="home"] #fields.field-grid .field-card:nth-child(2) { animation-delay: 60ms; }
body[data-page="home"] #fields.field-grid .field-card:nth-child(3) { animation-delay: 120ms; }
body[data-page="home"] #fields.field-grid .field-card:nth-child(4) { animation-delay: 180ms; }
body[data-page="home"] #fields.field-grid .field-card:nth-child(5) { animation-delay: 240ms; }
/* .field-card:hover already lifts and glows (components.css) — the resting ridge above needs
   to collapse out of the way rather than stack a second shadow on top of the hover glow. */
body[data-page="home"] #fields.field-grid .field-card:hover {
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (max-width: 900px) {
  body[data-page="home"] #fields.field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body[data-page="home"] #fields.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Empty state — the mascot again, shrugging ─────────────────────────────────────────── */

body[data-page="home"] .empty.is-inline .empty-mark {
  font-size: 0;
  border-style: none;
  background: var(--brand-faint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,3 58,17.5 58,46.5 32,61 6,46.5 6,17.5' fill='%23a78bfa' stroke='%237c3aed' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='31' r='3.4' fill='%23191428'/%3E%3Ccircle cx='40' cy='31' r='3.4' fill='%23191428'/%3E%3Cpath d='M24 41 Q32 37 40 41' fill='none' stroke='%23191428' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}

/* ── Motion respects the app-wide reduced-motion rule in theme.css (targets *) ─────────── */