/* ==========================================================================
   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-7);
}

/* Karel: the page "takes up a lot of space with blocks without information".
   Four short numbers do not need four deep cards. */
.imm-stat {
  padding: var(--imm-s-5) var(--imm-s-6);
  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: 26px;
  font-weight: 800;
  letter-spacing: var(--imm-track-h1);
  color: var(--imm-text);
}

.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: 20px; }

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

.imm-panel {
  margin-bottom: var(--imm-s-7);
  padding: var(--imm-s-6);
  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.
   -------------------------------------------------------------------------- */

/* --- The days, by week -----------------------------------------------------
   Karel: "28 days = 4 weeks. It would be good to see the 28 days broken down
   in weeks somehow… It makes the 28 blocks less daunting."

   Fourteen columns split every week across two rows, so the shape carried no
   meaning. Seven columns per row, one row per week, each labelled and counted:
   four short weeks instead of twenty-eight loose squares.
   -------------------------------------------------------------------------- */

/* Karel, twice: the page is "big blocks without relevant info". Measured, the
   four week boxes were 905px of a 2015px page — half of it — to show four rows
   of seven small squares. Each week is now ONE row: its label sits beside the
   cells instead of above them, and the card chrome is gone in favour of a
   divider. */
.imm-weeks {
  display: grid;
  margin: 0 0 var(--imm-s-6);
  border-top: 1px solid var(--imm-line-3);
}

.imm-week {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--imm-s-5);
  padding: var(--imm-s-3) 0;
  border-bottom: 1px solid var(--imm-line-3);
}

/* A finished week is worth seeing at a glance. */
/* A finished week is marked on its label, not by tinting the whole row. */
.imm-week.is-complete .imm-week__count { color: var(--imm-teal); font-weight: 700; }

.imm-week__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--imm-s-3);
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--imm-track-label);
  text-transform: uppercase;
  color: var(--imm-muted);
}

.imm-week__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--imm-faint);
  font-variant-numeric: tabular-nums;
}

.imm-week.is-complete .imm-week__label,
.imm-week.is-complete .imm-week__count { color: var(--imm-link-hover); }

.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;
}

/* Seven across, but the cells are SIZED rather than stretched. They carry
   aspect-ratio: 1, so `1fr` across a wide column made each one ~130px square
   and a single week 165px tall. Capping the track is what actually shortened
   the page. */
.imm-grid--week {
  grid-template-columns: repeat(7, minmax(0, 38px));
  justify-content: start;
  margin-bottom: 0;
}

.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(auto-fill, minmax(190px, 1fr));
  gap: var(--imm-s-3);
}

/* Was `background: #f9fafb` — a raw hex, so in dark mode an unearned badge
   stayed near-white with pale text on it. */
.imm-badge {
  padding: var(--imm-s-4) var(--imm-s-5);
  background: var(--imm-canvas);
  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-text); }

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

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

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

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

/* Locked, this was a full-height dark hero saying only "not yet". It keeps the
   ceremony for the moment it is actually earned. */
.imm-cert:not(.is-unlocked) { padding: var(--imm-s-4); }

.imm-cert:not(.is-unlocked) .imm-cert__inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--imm-s-2) var(--imm-s-4);
  padding: var(--imm-s-4) var(--imm-s-6);
  text-align: left;
}

.imm-cert:not(.is-unlocked) .imm-cert__body { display: none; }
.imm-cert:not(.is-unlocked) .imm-cert__title { font-size: 15px; margin: 0; }
.imm-cert:not(.is-unlocked) .imm-cert__state,
.imm-cert:not(.is-unlocked) .imm-cert__locked { margin: 0; }

.imm-cert:not(.is-unlocked) .imm-cert__inner .imm-brand__mark,
.imm-cert:not(.is-unlocked) .imm-cert__inner .imm-brand__fallback { display: none; }

.imm-cert:not(.is-unlocked) .imm-cert__title { font-size: 18px; }

.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); }

  /* Seven still fits a phone at this cell size, and breaking it would undo
     the whole point of the grouping. */
  .imm-grid--week { grid-template-columns: repeat(7, 1fr); }
  .imm-week { padding: var(--imm-s-3); }

  .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); }
}