/* Primer 06 — page-specific components. */

/* ── §2 cluster LOD demo ────────────────────────────────────────────────── */
.nanite { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: center; }
.nanite__stage {
  background: #0e1524; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-300);
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
.nanite__stage canvas { width: 100%; height: auto; }
.nanite__control { margin-bottom: 18px; }
.nanite__row { display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: 14px; margin-bottom: 6px; }
.nanite__en { color: var(--color-neutral-500); font-size: 11px; }
.nanite__val { color: var(--color-accent-700); }
.nanite__stats {
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: 14px;
}
.nanite__stat { display: flex; justify-content: space-between; padding: 4px 0; }
.nanite__stat + .nanite__stat { border-top: 1px solid var(--color-divider); }
.nanite__statlabel { font-size: 13px; color: var(--color-neutral-800); }
.nanite__statlabel--muted { color: var(--color-neutral-600); }
.nanite__statval { font-size: 14px; color: var(--color-neutral-500); }
.nanite__statval--big { font-size: 18px; color: var(--color-accent-700); font-weight: 600; }
.nanite__statval--hot { color: var(--hot); }

/* ── §3 numbered steps ──────────────────────────────────────────────────── */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 0; }
.step3 {
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 18px 16px; background: var(--color-neutral-100);
}
.step3__no { font-family: var(--font-heading); font-size: 26px; color: var(--color-accent-700); }
.step3__name { font-family: var(--font-heading); font-size: 16px; margin: 2px 0 6px; }
.step3__body { font-size: 13px; line-height: 1.6; color: var(--color-neutral-700); }

/* ── §4 good at / bad at ────────────────────────────────────────────────── */
.fitness { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0 0; }
.fitness__card {
  border: 1px solid var(--color-divider); border-left: 3px solid var(--color-accent-500);
  border-radius: var(--radius-md); padding: 16px 18px; background: var(--color-neutral-100);
}
.fitness__card--hot { border-left-color: var(--hot); }
.fitness__title { font-family: var(--font-heading); font-size: 15px; color: var(--color-accent-700); margin-bottom: 4px; }
.fitness__card--hot .fitness__title { color: var(--hot); }
.fitness__body { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-800); }

.cardgrid--3 .tcard__title { font-size: 18px; }

.fig--tall { min-height: 132px; gap: 12px; }
.fig--tall .fig__box { padding: 9px 13px; font-size: 13px; }

@media (max-width: 680px) {
  .nanite, .steps3, .fitness, .cardgrid--3 { grid-template-columns: 1fr; }
}