/* 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 *) ─────────── */

/* ── Class progress matrix (Educator) ─────────────────────────────────────────────────────
   Students down, the five fields across; drawn by js/pages/home.js in the slot "Up next" holds
   for every other tier. A real <table> because that is what it is — the two headers name the
   student and the field, and the reader is comparing along both axes.

   .class-matrix-scroll is the same bargain the skill route's rows make: the table scrolls itself
   sideways on a narrow viewport, the document never does. `min-width: 0` is what makes that true —
   a grid child with `overflow-x: auto` still forces its ancestors wide without it. */
body[data-page="home"] .class-matrix-scroll {
  min-width: 0;
  overflow-x: auto;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-tier);
}
body[data-page="home"] .class-matrix {
  border-collapse: collapse;
  width: 100%;
  /* Eight students by five fields is the worst case (SEAT_LIMIT), and every column needs room for
     a bar and a count — below this the table scrolls rather than crushing them. */
  min-width: 520px;
  /* Fixed, so the five field columns are equal whatever their contents: an auto table gave the one
     mapped field a wide column and the four empty ones slivers, which read as a ranking. */
  table-layout: fixed;
}
body[data-page="home"] .class-matrix-corner { width: 34%; }
/* The corner carries the seat count (js/pages/home.js, cornerCell). Brand-toned, not accented: it
   is a fact about the class, and the five accents in this table each mean one field. */
body[data-page="home"] .class-matrix-corner-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
body[data-page="home"] .class-matrix-corner-value {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* "of 8 seats" is the unit, not the number — same weight relationship as the cells' denominator. */
body[data-page="home"] .class-matrix-corner-of {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
body[data-page="home"] .class-matrix th,
body[data-page="home"] .class-matrix td {
  padding: var(--s3);
  text-align: left;
  /* Bottom, not middle: the count sits directly above its bar, and every bar in the row lands on
     one line whether or not the cell above it wrapped. */
  vertical-align: bottom;
}
body[data-page="home"] .class-matrix thead th {
  padding-bottom: var(--s2);
  box-shadow: 0 1px 0 var(--border);
}
/* Field accent, confined to the column that names a field and the cells under it — the
   Chrome-vs-Content rule: this table's furniture is chrome, its columns are content. The accent
   itself and everything derived from it are declared in theme.css, with the four selectors that
   were already there; declaring them here instead would leave the *derived* tokens resolving
   against :root and paint every column brand purple. */
body[data-page="home"] .class-matrix-field { color: var(--accent-text); }
body[data-page="home"] .class-matrix-field .field-glyph {
  width: 26px;
  height: 26px;
  font-size: 13px;
  margin-bottom: 6px;
}
body[data-page="home"] .class-matrix-field-name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-page="home"] .class-matrix-row + .class-matrix-row th,
body[data-page="home"] .class-matrix-row + .class-matrix-row td {
  box-shadow: 0 -1px 0 var(--border);
}
body[data-page="home"] .class-matrix-row:hover th,
body[data-page="home"] .class-matrix-row:hover td { background: var(--raised); }
/* The cell stays a table cell — see js/pages/home.js. `display: flex` here discarded its
   table-cell box, so it aligned on the baseline while every other cell in the row aligned bottom,
   and the student's name sat a few pixels off from the bars beside it. The flex row is the span
   inside it instead. */
body[data-page="home"] .class-matrix-who {
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
}
body[data-page="home"] .class-matrix-who-inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
body[data-page="home"] .class-matrix-count {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* The denominator is context, not the number being read — same weight relationship the timeline's
   lesson/topic pair uses. */
body[data-page="home"] .class-matrix-of { color: var(--faint); font-weight: 400; }
body[data-page="home"] .class-matrix-none {
  font-size: 11.5px;
  color: var(--faint);
}