/* ==========================================================================
   IMMERSION — progress & certificate
   Ref: handoff § Phase 6.
   ========================================================================== */

.imm-progress-page {
  max-width: var(--imm-content-max);
  margin-inline: auto;
  padding: var(--imm-s-11) var(--imm-s-12) var(--imm-s-13);
}

/* --- Stat cards ----------------------------------------------------------- */

.imm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--imm-s-4);
  margin-bottom: var(--imm-s-9);
}

.imm-stat {
  padding: var(--imm-s-7);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

.imm-stat__label {
  margin: 0 0 var(--imm-s-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--imm-track-label);
  text-transform: uppercase;
  color: var(--imm-faint);
}

.imm-stat__value {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: var(--imm-track-h1);
  color: var(--imm-ink);
}

.imm-stat__value span {
  margin-left: 2px;
  font-size: 17px;
  font-weight: 600;
  color: var(--imm-faint);
}

/* A word unit ("days") needs a real space; a denominator ("/28") reads better
   tight against the numeral. */
.imm-stat__value .imm-stat__unit { margin-left: var(--imm-s-2); }

/* "3h 12m" is a phrase, not a numeral — it needs less size to sit level. */
.imm-stat__value--text { font-size: 24px; }

/* --- Panels --------------------------------------------------------------- */

.imm-panel {
  margin-bottom: var(--imm-s-9);
  padding: var(--imm-s-8);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

.imm-panel__title {
  margin: 0 0 var(--imm-s-6);
  font-size: 19px;
}

/* --- Day grid -------------------------------------------------------------
   The handoff uses repeat(11) for a 22-day course — two rows. This course
   runs 28, so repeat(14) keeps the same two-row shape.
   -------------------------------------------------------------------------- */

.imm-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: var(--imm-s-2);
  margin: 0 0 var(--imm-s-6);
  padding: 0;
  list-style: none;
}

.imm-grid__cell a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--imm-t-btn), color var(--imm-t-btn);
}

.imm-grid__cell.is-done a       { background: var(--imm-teal); color: #fff; }
.imm-grid__cell.is-today a      { background: var(--imm-paper); border: 2px solid var(--imm-red); color: var(--imm-red); }
.imm-grid__cell.is-future a     { background: var(--imm-line-4); color: var(--imm-faint); }
.imm-grid__cell.is-checkpoint a { background: var(--imm-magenta-wash); color: var(--imm-magenta); }

/* --- Legend --------------------------------------------------------------- */

.imm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--imm-s-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--imm-muted);
}

.imm-legend li {
  display: flex;
  align-items: center;
  gap: var(--imm-s-2);
}

.imm-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.imm-legend__dot.is-done       { background: var(--imm-teal); }
.imm-legend__dot.is-today      { background: var(--imm-paper); border: 2px solid var(--imm-red); }
.imm-legend__dot.is-checkpoint { background: var(--imm-magenta-wash); border: 1px solid var(--imm-magenta-line); }
.imm-legend__dot.is-future     { background: var(--imm-line-4); }

/* --- Badges --------------------------------------------------------------- */

.imm-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--imm-s-4);
}

.imm-badge {
  padding: var(--imm-s-6);
  background: #f9fafb;
  border: 1px dashed var(--imm-line-dashed);
  border-radius: var(--imm-r-card);
}

.imm-badge.is-earned {
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
}

.imm-badge__title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--imm-faint);
}

.imm-badge.is-earned .imm-badge__title { color: var(--imm-ink); }

.imm-badge__note {
  margin: 0;
  font-size: 13px;
  color: var(--imm-faint);
}

.imm-badge.is-earned .imm-badge__note { color: var(--imm-teal); font-weight: 600; }

/* --- Certificate ---------------------------------------------------------- */

.imm-cert {
  padding: var(--imm-s-8);
  background: var(--imm-ink);
  border-radius: var(--imm-r-feature);
}

.imm-cert__inner {
  padding: var(--imm-s-13) var(--imm-s-9);
  background: var(--imm-ink-deep);
  border: 1px solid var(--imm-ink-line);
  border-radius: var(--imm-r-panel);
  text-align: center;
}

/* The mark sits back rather than competing with the award copy. */
.imm-cert__inner .imm-brand__mark,
.imm-cert__inner .imm-brand__fallback {
  margin: 0 auto var(--imm-s-6);
  opacity: .55;
  color: var(--imm-on-dark);
}

.imm-cert .imm-eyebrow { margin-bottom: var(--imm-s-2); }

.imm-cert__title {
  margin: 0 0 var(--imm-s-3);
  color: #fff;
  font-size: 24px;
}

.imm-cert__body {
  max-width: 34em;
  margin: 0 auto var(--imm-s-5);
  color: var(--imm-on-dark-2);
  font-size: 15px;
  line-height: 1.6;
}

.imm-cert__state {
  margin: 0 0 var(--imm-s-5);
  color: var(--imm-faint-dark-2);
  font-size: 13.5px;
}

.imm-cert__state.is-earned { color: var(--imm-teal-light); }

/* Outlined locked state, per the handoff. */
.imm-cert__locked {
  display: inline-block;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--imm-ink-line-3);
  border-radius: var(--imm-r-btn);
  color: var(--imm-faint-dark-2);
  font-size: 13.5px;
  font-weight: 700;
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 900px) {
  .imm-progress-page { padding: var(--imm-s-7) var(--imm-s-5) var(--imm-s-11); }

  .imm-stats { grid-template-columns: repeat(2, 1fr); }

  /* Six across, not seven: at 390px seven cells compute to roughly 38px after
     page padding, panel padding and gaps — under the 44px minimum. Six lands
     at about 46px. aspect-ratio is released so the min-height can win. */
  .imm-grid { grid-template-columns: repeat(6, 1fr); }

  .imm-grid__cell a {
    aspect-ratio: auto;
    min-height: 44px;
  }

  .imm-badges { grid-template-columns: 1fr; }

  .imm-cert__inner { padding: var(--imm-s-9) var(--imm-s-5); }
}