/* ============================================================
   The Path — cert mastery-ladder engine styles
   Ported from the AI/ML roadmap's learn pages, remapped to the
   cert's coral-dark tokens. Loaded only by /architect/learn/*.
   Base tokens + topbar/hero/buttons come from illustrated/assets/style.css.
   ============================================================ */

.wrap { max-width: 920px; }

/* hero progress line (namespaced to avoid clashing with explainer bars) */
.lprog { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.lprog .track { flex: 1; height: 9px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.lprog .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--clay), var(--clay-deep)); transition: width .6s; }
.lprog .pct { font-family: var(--mono); font-size: 13px; color: var(--clay); min-width: 120px; }

/* rung legend on the hero */
.rungs-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 18px 0 6px; }
.rl { border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.03); padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.rl b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }

/* module block */
.mod { border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.03); padding: 22px 24px; margin: 26px 0; }
.mod > h2 { margin-top: 0; }

/* mastery-ladder rungs */
.ladder { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.rung { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted); }
.rung.done { color: var(--green); border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.10); }

/* topic list */
.topics { list-style: none; margin: 10px 0; padding: 0; }
.topics li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 8px 2px; border-bottom: 1px dashed var(--border); font-size: 14px; }
.topics .tn { color: var(--ink); font-weight: 600; }
.topics .lk { font-size: 12.5px; white-space: nowrap; text-decoration: none; }
.topics .lk.ours { color: var(--clay); font-weight: 700; }
.topics .lk.ours.seen::before { content: "✓ "; color: var(--green); }
.topics .lk.ext { color: var(--muted); }

/* action buttons row */
.rowbtns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 4px; }
.scbox { display: none; margin-top: 8px; }
.scbox.on { display: block; }

/* exercise checklist */
.exl { list-style: none; margin: 8px 0; padding: 0; }
.exl li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px dashed var(--border); }
.exl input[type=checkbox] { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--green); flex: none; }
.exl .xt { flex: 1; font-size: 14px; }
.exl .hintbtn { flex: none; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--clay); background: none; border: 1px solid rgba(255,138,92,.45); border-radius: 999px; padding: 2px 10px; box-shadow: none; }
.exl .hint2 { display: none; font-size: 13px; color: var(--muted); background: rgba(255,138,92,.07); border-left: 3px solid var(--clay); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-top: 7px; }
.exl li.open .hint2 { display: block; }
.exl li.ck .xt { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(74,222,128,.6); }

/* scenario mission engine */
.trust { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.trust .bar2 { flex: 1; height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.trust .fill2 { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--clay), var(--clay-deep)); transition: width .4s; }
.trust .lbl2 { font-family: var(--mono); font-size: 12.5px; color: var(--green); min-width: 110px; }
.term { font-family: var(--mono); font-size: 13px; background: #120d08; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-top: 14px; min-height: 100px; line-height: 1.75; }
.term .sys { color: var(--muted); } .term .warn { color: var(--amber); } .term .okx { color: var(--green); } .term .badx { color: var(--red); }
.choices { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.choice { cursor: pointer; text-align: left; border-radius: 10px; padding: 10px 13px; font-size: 14px; font-weight: 500; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--ink); box-shadow: none; }
.choice:hover { border-color: var(--clay); }
.choice.good { border-color: var(--green); background: rgba(74,222,128,.12); }
.choice.bad { border-color: var(--red); background: rgba(255,122,110,.12); }
.choice:disabled { cursor: default; opacity: .78; }

/* production lens */
.lens { background: rgba(192,162,255,.08); border: 1px solid rgba(192,162,255,.35); border-radius: 12px; padding: 13px 16px; margin: 16px 0 4px; font-size: .94rem; color: #d9ccf7; }
.lens b { color: #ece3ff; }
.lens .lt { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--violet); margin-bottom: 5px; }

/* capstone + prev/next nav */
.capstone { border: 1px solid rgba(255,138,92,.4); border-radius: 18px; background: rgba(255,138,92,.06); padding: 22px 24px; margin: 30px 0; }
.capstone h2 { margin-top: 0; }
.pnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; }
.pnav a { flex: 1; border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.03); }
.pnav a:hover { border-color: var(--clay); }
.pnav .r { text-align: right; }