/* v2 additions: icon set and motion. Everything here is progressive: without JS or with
   reduced motion every element is simply visible. No inline styles anywhere. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprite .dt{fill:currentColor;stroke:none}
.ico{display:block;flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.itile{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--sage);color:var(--green);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.itile.sm{width:28px;height:28px}
.itile.sm .ico{width:18px;height:18px}
.rail .body{position:relative}
.rail .body .itile{position:absolute;right:12px;top:10px;width:40px;height:40px}
.rail .body.hasico h3{padding-right:52px}
.rail .body:hover .itile{transform:scale(1.08) rotate(-4deg)}
.chip.hasico{padding-left:4px;gap:8px}
.chip.hasico:before{display:none}
.chip.hasico .itile{background:var(--sage)}
.vals .chip.hasico .itile,.h-intro .kit .chip.hasico .itile{background:var(--sage)}
.loc2.hasico{display:flex;align-items:center;gap:10px}
.loc.hasico:before{display:none}
.deep .itile.deepicon{width:34px;height:34px;background:var(--deepb);color:var(--paper);box-shadow:inset 0 0 0 2px var(--sage)}
.deep .itile.deepicon .ico{width:20px;height:20px}
.blab{display:inline-flex;align-items:center;gap:10px}
.dbtn .bico{width:20px;height:20px}
.h-exp .rail li.study .itile{background:var(--paper)}
.rail li{animation:none!important}
.dbtn{transition:background .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.chip{transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .25s}
@media (hover:hover) and (pointer:fine){
 .dbtn:hover{transform:translateY(-2px)}
 .dbtn:active{transform:translateY(0)}
 .chip:hover{transform:translateY(-1px)}
 .kit,.glance{transition:box-shadow .3s}
}
/* motion (only when the script has added html.motion-capable) */
:root{--rv-dur:560ms;--rv-ease:cubic-bezier(.16,1,.3,1);--rv-dist:22px}
html.motion-capable [data-rv]{opacity:0;transform:translate3d(0,var(--rv-dist),0);transition:opacity var(--rv-dur) var(--rv-ease),transform var(--rv-dur) var(--rv-ease);transition-delay:var(--rv-delay,0ms);will-change:opacity,transform}
html.motion-capable [data-rv="right"]{transform:translate3d(28px,0,0)}
html.motion-capable [data-rv].rv-in,html.motion-capable [data-rv]:focus-within{opacity:1;transform:none}
html.motion-capable [data-rv].rv-done{will-change:auto;transition-delay:0ms}
.rv-d1{--rv-delay:70ms}.rv-d2{--rv-delay:140ms}.rv-d3{--rv-delay:210ms}.rv-d4{--rv-delay:280ms}.rv-d5{--rv-delay:350ms}.rv-d6{--rv-delay:420ms}
/* day-rail line draws in; node dots pop in. transform/opacity only, no layout change */
html.motion-capable .rail li:before{transform:scaleY(0);transform-origin:50% 0;transition:transform 700ms var(--rv-ease);transition-delay:calc(var(--rv-delay,0ms) + 120ms)}
html.motion-capable .rail li.rv-in:before{transform:scaleY(1)}
html.motion-capable .rail li:after{transform:scale(.3);opacity:0;transition:transform 500ms var(--rv-ease),opacity 400ms var(--rv-ease);transition-delay:var(--rv-delay,0ms)}
html.motion-capable .rail li.rv-in:after{transform:scale(1);opacity:1}
html.motion-capable .rail li.rv-done:before,html.motion-capable .rail li.rv-done:after{transition-delay:0ms}
html.motion-capable .rail li:focus-within:before{transform:scaleY(1)}
html.motion-capable .rail li:focus-within:after{transform:scale(1);opacity:1}
@media (prefers-reduced-motion:reduce){
 html.motion-capable [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
 html.motion-capable .rail li:before{transform:none!important;transition:none!important}
 html.motion-capable .rail li:after{transform:none!important;opacity:1!important;transition:none!important}
 .itile,.dbtn,.chip{transition:none!important}
}
@media (max-width:820px){.rail .body .itile{right:10px;top:10px}.rail .body.hasico h3{padding-right:48px}}