/* ============================================================
   MODULE CURRICULUM
   ------------------------------------------------------------
   Eleven modules (nine lesson chapters + Coding + Trading), each a
   ~46-problem working set ordered easy -> hard. js/modules.js
   renders ONE component -- the vertical module journey (.mj) --
   on modules.html AND inside "Your plan" on explore.html, so the
   curriculum reads the same wherever you meet it. The visual
   grammar (crest, connector stem, progress fill) mirrors the
   lesson path in css/learn.css .lp__*.

   All colour comes from css/variables.css tokens, so light/dark
   both work with no per-theme overrides here.
   ============================================================ */

/* ---- index hero ---- */
.mod-hero { padding: var(--space-10) 0 var(--space-6); }
.mod-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-xs); font-weight: var(--font-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.mod-hero__title {
  font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: var(--font-extrabold);
  color: var(--text-bright); margin: 0 0 10px; line-height: 1.15;
}
.mod-hero__sub {
  font-size: var(--text-base); line-height: 1.65; color: var(--text-secondary);
  max-width: 780px; margin: 0;
}
.mod-hero__note {
  margin-top: 14px; font-size: var(--text-xs); line-height: 1.6; color: var(--text-muted);
  max-width: 780px;
}
.mod-hero__note b { color: var(--text-secondary); }

/* ============================================================
   THE MODULE JOURNEY  (.mj)
   ------------------------------------------------------------
   Eleven boxes stacked into a path you move through: a numbered
   crest joined by a connector stem, a progress fill, and one
   expanded module at a time. Same grammar as the lesson path in
   css/learn.css, so learn.html and the curriculum read as one
   product. Tokens only -> light + dark both work unmodified.
   ============================================================ */
.mj {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mj__m { position: relative; padding-left: 46px; }

/* Connector stem: runs from the crest above down to this crest. */
.mj__stem {
  position: absolute;
  left: 17px;
  top: -10px;
  width: 2px;
  height: 34px;
  border-radius: 2px;
  background: var(--border-color);
}
.mj__m:first-child .mj__stem { display: none; }
.mj__m--done .mj__stem,
.mj__m--now .mj__stem { background: color-mix(in srgb, var(--color-easy) 55%, transparent); }

/* ---- the box ---- */
.mj__box {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.mj__box:hover { border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: var(--bg-card-hover); }
.mj__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mj__m--now > .mj__box { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.mj__m--open > .mj__box { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mj__m--ahead > .mj__box { background: transparent; }

/* Crest — hexagon, echoing .lp__unit-crest on the lesson path. */
.mj__crest {
  position: absolute;
  left: -46px;
  top: 12px;
  flex: none;
  width: 34px; height: 38px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: var(--font-extrabold);
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background .2s ease, color .2s ease;
}
.mj__m--done > .mj__box .mj__crest {
  color: #fff; border-color: transparent;
  background: linear-gradient(160deg, #22c55e, #059669);
}
.mj__m--now > .mj__box .mj__crest {
  color: #fff; border-color: transparent;
  background: linear-gradient(160deg, var(--accent), #7c3aed);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent);
}

.mj__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mj__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.mj__title {
  font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--text-bright); line-height: 1.3;
}
.mj__m--ahead .mj__title { color: var(--text-secondary); }
.mj__flag {
  font-size: 10px; font-weight: var(--font-bold); letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 999px; padding: 2px 8px;
}
.mj__count {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: var(--font-bold);
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.mj__blurb {
  font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mj__bar {
  display: block; height: 5px; margin-top: 3px;
  border-radius: 999px; background: var(--bg-elevated); overflow: hidden;
}
.mj__bar i {
  display: block; height: 100%; width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
}
.mj__m--done .mj__bar i { background: linear-gradient(90deg, #22c55e, #059669); }

.mj__chev {
  flex: none; margin-top: 3px; color: var(--text-muted);
  display: inline-flex; transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.mj__m--open > .mj__box .mj__chev { transform: rotate(180deg); }

/* ---- expanding panel (grid-rows 0fr -> 1fr animates cleanly at any height) ---- */
.mj__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.22,1,.36,1);
}
.mj__m--open > .mj__panel { grid-template-rows: 1fr; }
.mj__panel-in { overflow: hidden; min-height: 0; }
.mj__m--open > .mj__panel > .mj__panel-in {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 4px 14px 13px;
  background: var(--bg-card);
}
.mj__m--done.mj__m--open > .mj__panel > .mj__panel-in,
.mj__m--ahead.mj__m--open > .mj__panel > .mj__panel-in { border-color: var(--border-color); }

.mj__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-muted); padding: 8px 0 7px;
}
.mj__lesson { color: var(--accent); font-weight: var(--font-bold); text-decoration: none; }
.mj__lesson:hover { text-decoration: underline; }

.mj__probs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mj__prob-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.mj__prob-link:hover { background: var(--bg-card-hover); border-color: var(--border-color); }
.mj__prob-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--font-bold);
  color: var(--text-muted); background: var(--bg-elevated);
  border: 1px solid var(--border-light);
}
.mj__prob--done .mj__prob-tick { color: #fff; background: var(--color-easy); border-color: var(--color-easy); }
.mj__prob-t {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mj__prob-link:hover .mj__prob-t { color: var(--accent); }
.mj__prob--done .mj__prob-t { color: var(--text-muted); }
.mj__prob-d { flex: none; text-transform: capitalize; }

.mj__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.mj__all { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-muted); text-decoration: none; }
.mj__all:hover { color: var(--accent); text-decoration: underline; }

/* ---- animation: entrance stagger + progress fill, FIRST paint only ----
   .mj--intro is set by js/modules.js once per page load, so the wholesale
   re-render that happens when auth settles never replays (and never flashes). */
@keyframes mjrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mjfill { from { width: 0; } to { width: var(--w, 0%); } }
.mj--intro .mj__m { animation: mjrise .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 42ms); }
.mj--intro .mj__bar i { animation: mjfill .85s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 42ms + 120ms); }

/* ---- loading placeholder: same rhythm, so nothing jumps when modules.json lands ---- */
.mj--skel .mj__m { padding-left: 46px; }
.mj--skel .mj__m--skelopen .mj__box { height: 470px; }
.mj--skel .mj__box {
  display: block; height: 78px; cursor: default;
  background: var(--bg-card); border: 1px solid var(--border-color);
  animation: mjpulse 1.4s ease-in-out infinite;
}
@keyframes mjpulse { 0%, 100% { opacity: .45; } 50% { opacity: .75; } }

@media (prefers-reduced-motion: reduce) {
  .mj--intro .mj__m, .mj--intro .mj__bar i, .mj--skel .mj__box { animation: none; }
  .mj__panel, .mj__chev { transition: none; }
  .mj--intro .mj__bar i { width: var(--w, 0%); }
}

@media (max-width: 640px) {
  .mj__m { padding-left: 38px; }
  .mj__crest { left: -38px; width: 29px; height: 33px; font-size: 12px; top: 11px; }
  .mj__stem { left: 14px; }
  .mj__box { padding: 11px 12px; gap: 10px; }
  .mj__blurb { white-space: normal; }
  .mj__count { margin-left: 0; }
  .mj__m--open > .mj__panel > .mj__panel-in { padding: 4px 11px 12px; }
  .mj__foot .mod-card__cta { min-height: 40px; }
}

.mod-empty { text-align: center; padding: var(--space-10) 0; color: var(--text-muted); }

/* ---- shared bits (journey panel + module detail page) ---- */
.mod-mix {
  display: flex; height: 5px; border-radius: 999px; overflow: hidden;
  background: var(--bg-elevated);
}
.mod-mix__seg--easy   { background: var(--color-easy); }
.mod-mix__seg--medium { background: var(--color-medium); }
.mod-mix__seg--hard   { background: var(--color-hard); }
.mod-card__bar {
  display: block; flex: 1 1 60px; min-width: 54px; height: 6px;
  border-radius: 999px; background: var(--bg-elevated); overflow: hidden;
}
.mod-card__bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.mod-card__cta {
  position: relative; z-index: 1; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font-size: var(--text-xs); font-weight: var(--font-bold);
  color: var(--accent); background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mod-card__cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- module detail ---- */
.mod-detail__back {
  display: inline-block; margin: var(--space-8) 0 var(--space-4);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  color: var(--text-muted); text-decoration: none;
}
.mod-detail__back:hover { color: var(--accent); }
.mod-detail__hero {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 20px; margin-bottom: var(--space-6);
}
.mod-detail__title {
  font-size: clamp(1.45rem, 3.4vw, 2rem); font-weight: var(--font-extrabold);
  color: var(--text-bright); margin: 0 0 8px; line-height: 1.18;
}
.mod-detail__blurb {
  font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary);
  margin: 0; max-width: 720px;
}
.mod-detail__stats {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; font-size: var(--text-xs); color: var(--text-muted);
}
.mod-detail__stat b { color: var(--text-bright); font-weight: var(--font-bold); }
.mod-detail__lessons { color: var(--accent); font-weight: var(--font-bold); text-decoration: none; }
.mod-detail__lessons:hover { text-decoration: underline; }
.mod-detail__barrow { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

.mod-group { margin-bottom: var(--space-8); }
.mod-group__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--text-muted);
}
.mod-group__badge { text-transform: none; }
.mod-group__done { margin-left: auto; }

.mod-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: modrow; }
.mod-row { counter-increment: modrow; }
.mod-row__link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-color);
  transition: border-color .13s ease, background .13s ease;
}
.mod-row__link:hover { border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: var(--bg-card-hover); }
.mod-row__tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--font-bold);
  color: var(--text-muted); background: var(--bg-elevated);
  border: 1px solid var(--border-light);
}
.mod-row__tick::before { content: counter(modrow); font-size: 10px; }
.mod-row--done .mod-row__tick {
  color: #fff; background: var(--color-easy); border-color: var(--color-easy);
}
.mod-row--done .mod-row__tick::before { content: none; }
.mod-row__title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary);
  line-height: 1.35;
}
.mod-row__link:hover .mod-row__title { color: var(--accent); }
.mod-row--done .mod-row__title { color: var(--text-muted); }
.mod-row__cat {
  flex: none; font-size: 10px; font-weight: var(--font-bold);
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
.mod-row__id { flex: none; font-size: 11px; color: var(--text-muted); opacity: .75; }

@media (max-width: 640px) {
  .mod-card__cta { min-height: 40px; }
  .mod-detail__barrow { flex-wrap: wrap; }
  .mod-row__cat { display: none; }
  .mod-group__done { margin-left: 0; }
}