/* Climate Literacy: a reading path that fills in lime. Built 2026-11-08. Behaviour in path.js; reading progress itself stays in learn.js. */
.lp-rail{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 0 34px;padding:0 4px;list-style:none}
.lp-rail::before,.lp-rail .lp-fill{content:'';position:absolute;left:22px;right:22px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--line)}
.lp-rail .lp-fill{right:auto;width:calc((100% - 44px) * var(--p,0));background:linear-gradient(90deg,#c4e27f,#d5ec9d);transition:width .8s cubic-bezier(.2,.8,.2,1);z-index:0}
.lp-rail li{position:relative;z-index:1;margin:0;padding:0}
.lp-node{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);border:2px solid var(--line);font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums;transition:background .35s,border-color .35s,color .35s}
.lp-node:hover{border-color:var(--green);color:var(--ink)}
.lp-node:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lp-node.is-read{background:var(--lime);border-color:#a9cf62;color:var(--ink)}
.lp-node.is-read .n{display:none}
.lp-node .ok{display:none;width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lp-node.is-read .ok{display:block}
.lp-node.pop{animation:lpPop .55s cubic-bezier(.3,1.6,.5,1)}
.lp-goal{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--paper);border:2px dashed var(--line);font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .4s,border-color .4s,color .4s}
.lp-goal:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lp-rail.is-done .lp-goal{background:var(--ink);border:2px solid var(--ink);color:var(--paper);animation:lpPop .6s .55s cubic-bezier(.3,1.6,.5,1) both}
.lp-ready{margin:-18px 0 30px!important;font-size:15px;color:var(--ink);min-height:1.6em}
.lp-ready a{font-weight:600}
.lp-ready span{background:linear-gradient(transparent 62%,#d5ec9d 62%,#d5ec9d 92%,transparent 92%) no-repeat 0 0/0 100%;animation:lpMark .6s .7s cubic-bezier(.6,0,.2,1) both}
.learn-card{transition:background .5s,border-color .5s}
.learn-card.is-read{background:#f4f8ea;border-color:#c9de9c}
.learn-card .learn-step{transition:color .3s}
.learn-card.is-read .learn-step{color:#416748;font-weight:600}
.learn-card.is-read .learn-step::after{content:' · Read';font-weight:600}
.learn-card.pop{animation:lpLift .6s cubic-bezier(.2,.8,.2,1)}
.has-rail .learn-progress progress{display:none}
@keyframes lpPop{0%{transform:scale(.9)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes lpLift{0%{transform:none}40%{transform:translateY(-4px)}100%{transform:none}}
@keyframes lpMark{to{background-size:100% 100%}}
@media(max-width:640px){.lp-rail{padding:0}.lp-rail::before,.lp-rail .lp-fill{left:16px;right:16px}.lp-rail .lp-fill{width:calc((100% - 32px) * var(--p,0))}.lp-node{width:32px;height:32px;font-size:11px}.lp-goal{height:36px;padding:0 12px}}
@media(max-width:360px){.lp-node{width:30px;height:30px}.lp-goal{padding:0 10px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.lp-rail .lp-fill,.lp-node,.learn-card{transition:none}.lp-node.pop,.learn-card.pop,.lp-rail.is-done .lp-goal,.lp-ready span{animation:none}.lp-ready span{background-size:100% 100%}}
@media print{.lp-rail,.lp-ready{display:none}}

/* Keep every reading-path stop reachable by touch and keyboard. */
.lp-node{width:40px;height:40px}
.lp-goal{min-height:40px}
@media(prefers-reduced-motion:reduce){.lp-goal,.lp-ready span,.learn-card .learn-step{transition:none}}
@media print{.learn-tick{display:none}}