/* Recertification lifecycle — simple stepper + detail panel */
.rl{max-width:1040px;margin:0 auto}
.rl-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.rl-steps::before{content:'';position:absolute;left:calc(100%/12);right:calc(100%/12);top:23px;height:2px;border-radius:999px;background:var(--border)}
.rl-fill{position:absolute;left:calc(100%/12);top:23px;height:2px;width:0;border-radius:999px;background:#6EE7B7;opacity:1}
.rl-step button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.rl-dot{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 1px 2px rgba(33,26,46,.06);display:grid;place-items:center;color:var(--fg-muted);transition:all .4s var(--ease-out)}
.rl-dot svg{width:18px;height:18px}
.rl-dot .ck{display:none}
.rl-step button:hover .rl-dot{border-color:var(--ac-200);color:var(--ac-700)}
.rl-step.done .rl-dot{background:var(--ac-50);border-color:var(--ac-200);color:var(--ac-700)}
.rl-step.done .rl-dot svg{display:none}.rl-step.done .rl-dot .ck{display:block}
.rl-step.on .rl-dot{background:var(--ac);border-color:var(--ac);color:#fff;transform:scale(1.08);box-shadow:0 0 0 6px rgba(var(--ac-rgb),.14),0 10px 24px -10px rgba(var(--ac-rgb),.65)}
.rl-step b{font-family:var(--font-display);font-size:14px;font-weight:650;color:var(--fg-muted);letter-spacing:-.005em;text-align:center;line-height:1.25;transition:color .3s;text-wrap:balance}
.rl-step.on b,.rl-step.done b{color:var(--fg)}
.rl-detail{position:relative;margin:40px auto 0;max-width:760px;background:#fff;border:1px solid var(--border);border-radius:24px;padding:34px 40px 28px;box-shadow:0 30px 70px -50px rgba(33,26,46,.35);overflow:hidden;text-align:center}
.rl-body.swap{animation:rl-in .45s var(--ease-out)}
@keyframes rl-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rl-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;background:#ECFDF5;color:#047857;white-space:nowrap}
.rl-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.rl-chip.warn{background:#FFFBEB;color:#B45309}
.rl-chip.info{background:#F5F3FF;color:#6D28D9}
.rl-detail h3{margin:14px 0 10px;font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--fg);line-height:1.15}
.rl-detail p{margin:0 auto;max-width:560px;font-size:16px;line-height:1.6;color:var(--fg-body);text-wrap:pretty;min-height:calc(1.6em * 2)}
.rl-meta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--fg-muted)}
.rl-meta .n{font-family:var(--font-mono);letter-spacing:.06em}
.rl-loop{display:inline-flex;align-items:center;gap:7px}
.rl-loop svg{width:13px;height:13px;color:var(--ac)}
@media (max-width:760px){.rl-steps{grid-template-columns:repeat(3,1fr);gap:20px 8px}.rl-steps::before,.rl-fill{display:none}.rl-step b{font-size:13px}.rl-detail{margin-top:28px;padding:26px 22px 24px;border-radius:20px}.rl-detail p{font-size:15px;min-height:calc(1.6em * 3)}}
@media (prefers-reduced-motion:reduce){.rl-body.swap{animation:none}}