/* ============================================================
   Experience — method/modules explorer, rank ladder, agents
   ============================================================ */

/* --- Method / module explorer --- */
.method__top { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }

.progress-rail {
  margin-top: 2.6rem; position: relative;
  height: 4px; border-radius: var(--r-pill);
  background: var(--surface-2);
}
.progress-rail__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, var(--arcane));
  transition: width 1.2s var(--ease-out);
}
.progress-rail__mark {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
}
.progress-rail__mark[data-done] { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px oklch(0.66 0.15 62 / 0.2); }

.modules { display: grid; gap: 0.9rem; margin-top: 3rem; }

.module {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, oklch(1 0 0 / 0.02), transparent 30%), var(--surface);
  overflow: clip;
  transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}
.module.is-open { border-color: oklch(0.66 0.15 62 / 0.4); }
.module.is-heart { border-color: oklch(0.66 0.15 62 / 0.35); box-shadow: 0 0 0 1px oklch(0.66 0.15 62 / 0.15); }

.module__head {
  width: 100%; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(0.9rem, 2vw, 1.5rem);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.8rem);
  text-align: left;
}
.module__idx {
  display: grid; place-items: center; width: 54px; height: 54px; flex: none;
  border-radius: 16px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--gold);
  background: radial-gradient(120% 120% at 30% 20%, oklch(0.66 0.15 62 / 0.2), transparent 70%), var(--bg-2);
  border: 1px solid oklch(0.66 0.15 62 / 0.3);
}
.module__titles { min-width: 0; }
.module__kicker { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.module__title { font-size: var(--step-2); color: var(--ink); margin-top: 0.15rem; }
.module__title .rank { color: var(--gold); }
.module__aside { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.module__rank-badge { text-align: right; }
.module__rank-badge .lbl { font-size: 0.7rem; color: var(--faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.module__rank-badge .val { font-family: var(--font-display); color: var(--ink); font-size: 1.05rem; }
.module__chev { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: transform var(--dur-3) var(--ease-out), color var(--dur-2), border-color var(--dur-2); }
.module__chev svg { width: 18px; height: 18px; }
.module.is-open .module__chev { transform: rotate(180deg); color: var(--gold); border-color: var(--gold); }
.module__head:hover .module__chev { color: var(--ink); }

.module__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-4) var(--ease-out);
}
.module.is-open .module__body { grid-template-rows: 1fr; }
.module__body-inner { overflow: hidden; }
.module__body-pad { padding: 0 clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.4vw, 1.8rem); }

.module__victory {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.9rem 1.1rem; margin-bottom: 1.3rem;
  border-radius: var(--r-2);
  background: oklch(0.66 0.15 62 / 0.08);
  border: 1px solid oklch(0.66 0.15 62 / 0.22);
}
.module__victory svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }
.module__victory p { font-size: 0.92rem; color: var(--ink-2); }
.module__victory strong { color: var(--gold); }

.lessons { display: grid; gap: 0.55rem; }
.lesson {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
  padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--hair);
}
.lesson:last-child { border-bottom: 0; }
.lesson__id { font-family: var(--font-mono); font-size: 0.82rem; color: var(--gold); padding-top: 0.1rem; }
.lesson__title { color: var(--ink); font-weight: 600; font-size: 0.98rem; }
.lesson__desc { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.lesson__deliverable { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.84rem; color: var(--arcane); }
.lesson__deliverable svg { width: 14px; height: 14px; flex: none; }
.lesson__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

/* --- Rank ladder --- */
.ranks-wrap { margin-top: 3rem; }
.ranks {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6rem;
  counter-reset: rank;
}
.rank {
  position: relative; text-align: center;
  padding: 1.3rem 0.7rem 1.15rem;
  border-radius: var(--r-3);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3), background-color var(--dur-3);
}
.rank__medal {
  width: 52px; height: 52px; margin: 0 auto 0.8rem;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--faint); background: var(--bg-2); border: 1px solid var(--line);
  transition: color var(--dur-3), border-color var(--dur-3), box-shadow var(--dur-3), transform var(--dur-3) var(--ease-out);
}
.rank__medal svg { width: 24px; height: 24px; }
.rank__step { font-family: var(--font-mono); font-size: 0.68rem; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
.rank__name { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); margin-top: 0.2rem; line-height: 1.1; }
.rank__hito { font-size: 0.76rem; color: var(--muted); margin-top: 0.3rem; }
.rank[data-final] { border-color: oklch(0.66 0.15 62 / 0.4); background: radial-gradient(120% 120% at 50% 0%, oklch(0.66 0.15 62 / 0.14), transparent 60%), var(--surface); }
.rank[data-final] .rank__medal { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 26px -6px var(--gold-glow); }
.rank[data-final] .rank__name { color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .rank:hover { transform: translateY(-4px); border-color: var(--line); }
  .rank:hover .rank__medal { color: var(--gold); border-color: var(--gold); transform: scale(1.06); }
}
.rank.is-lit .rank__medal { color: var(--gold); border-color: oklch(0.66 0.15 62 / 0.6); }

.badges-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; align-items: center; }
.badges-row .label { font-size: 0.85rem; color: var(--faint); margin-right: 0.3rem; }

/* --- Agents --- */
.agents-intro { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.chain-note { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--muted); font-family: var(--font-mono); }
.chain-note svg { width: 18px; height: 18px; color: var(--arcane); }

.agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.6vw, 1.2rem); margin-top: 3rem; }
.agent {
  position: relative; padding: 1.5rem; border-radius: var(--r-3);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, oklch(1 0 0 / 0.02), transparent 40%), var(--surface);
  display: flex; flex-direction: column; gap: 0.9rem;
  overflow: clip;
}
.agent::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 100% 0%, oklch(0.6 0.13 230 / 0.12), transparent 60%);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .agent:hover::after { opacity: 1; } }
.agent__top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.agent__chain-idx { font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); letter-spacing: 0.1em; }
.agent__avatar { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--gold); background: radial-gradient(120% 120% at 30% 20%, oklch(0.66 0.15 62 / 0.2), transparent 70%), var(--bg-2); border: 1px solid oklch(0.66 0.15 62 / 0.32); }
.agent__avatar svg { width: 26px; height: 26px; }
.agent--claude .agent__avatar { color: var(--arcane); border-color: oklch(0.6 0.13 230 / 0.35); background: radial-gradient(120% 120% at 30% 20%, oklch(0.6 0.13 230 / 0.2), transparent 70%), var(--bg-2); }
.agent__name { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.agent__role { color: var(--muted); font-size: 0.92rem; flex: 1; }
.agent__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--hair); margin-top: auto; }
.agent__delivers { font-size: 0.8rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.45rem; }
.agent__delivers svg { width: 14px; height: 14px; color: var(--arcane); }

.agent--locked { border-style: dashed; opacity: 0.92; }
.agent--locked .agent__avatar { color: var(--muted); border-color: var(--line); background: var(--bg-2); }

.auditors { margin-top: 2.4rem; }
.auditors__label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--faint); margin-bottom: 1.2rem; }
.auditors__label svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .ranks { grid-template-columns: repeat(3, 1fr); }
  .agents { grid-template-columns: 1fr 1fr; }
  .agents-intro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ranks { grid-template-columns: 1fr 1fr; }
  .agents { grid-template-columns: 1fr; }
  .module__aside .module__rank-badge { display: none; }
  .module__head { grid-template-columns: auto 1fr auto; }
}