/* roadmap.html: a timeline of milestone cards. Right to left: finished on the right, coming on the left. */
.rm{width:min(1400px,100%);margin:0 auto;padding:18px 0 40px;color:var(--ms-ink)}
.rm-note{margin:24px 16px;padding:18px;border:1px solid var(--ms-line);border-radius:16px;background:#fff;text-align:center;line-height:2}
.rm-bad{border-color:#f1c7c2;color:var(--ms-red)}
.rm-head{display:grid;gap:10px;padding:0 16px}
.rm-head h1{margin:0;font-size:26px;color:var(--ms-navy)}
.rm-lead{margin:0;color:var(--ms-muted);font-size:14px;line-height:1.9}
.rm-sum p{margin:6px 0 0;font-size:14px;color:var(--ms-muted)}
.rm-sum b{color:var(--ms-navy)}
.rm-sum span{display:inline-block;width:1px;height:14px;margin:0 8px;background:var(--ms-line);vertical-align:middle}
.rm-bar{height:10px;border-radius:999px;background:#e5ebf4;overflow:hidden}
.rm-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#14804a,#2eb872);transform-origin:right center;animation:rm-grow 1s cubic-bezier(.2,.8,.2,1) both}
.rm-link{padding:0;border:0;background:none;color:#1746b5;font:800 14px/1.6 Estedad,Tahoma,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rm-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rm-btn{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border:1px solid var(--ms-line);border-radius:999px;background:#fff;color:var(--ms-navy);font:800 13px/1 Estedad,Tahoma,sans-serif;cursor:pointer;transition:transform .15s,box-shadow .15s}
.rm-btn svg{width:16px;height:16px}
.rm-btn[data-dir="-1"] svg{transform:scaleX(-1)}
.rm-btn:active{transform:scale(.95)}
.rm-btn.now{border-color:var(--ms-gold);background:var(--ms-gold);box-shadow:0 6px 16px rgba(255,204,42,.4)}
.rm-nav .now{margin-inline:auto}

/* the lane: snap to cards, no scroll bar noise, room on both sides so any card can sit in the middle */
.rm-lane{margin-top:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:6px 0 22px;cursor:grab;overscroll-behavior-x:contain}
.rm-lane.drag{cursor:grabbing;scroll-snap-type:none}
.rm-lane:focus-visible{outline:2px solid #90adff;outline-offset:-2px;border-radius:12px}
.rm-track{display:flex;gap:16px;margin:0;padding:0 calc(50% - 165px);list-style:none;width:max-content;min-width:100%;box-sizing:border-box}
@media(max-width:420px){.rm-track{padding:0 calc(50% - 41vw)}}
.rm-card{position:relative;flex:none;width:min(82vw,330px);padding-top:30px;scroll-snap-align:center;animation:rm-in .6s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i)*55ms)}
/* the line of the timeline runs through every node, into the gap, to the next card */
.rm-card:before{content:"";position:absolute;top:11px;right:-16px;left:-16px;height:4px;border-radius:4px;background:#d7dfeb}
.rm-card:first-child:before{right:50%}
.rm-card:last-child:before{left:50%}
.rm-card.st-done:before{background:linear-gradient(90deg,#2eb872,#14804a)}
.rm-card.st-now:before{background:linear-gradient(90deg,#d7dfeb,var(--ms-gold) 40%,#14804a)}
.rm-card.st-next:before{background:repeating-linear-gradient(90deg,#c7d1e0 0 10px,transparent 10px 16px)}
.rm-card.st-later:before{background:repeating-linear-gradient(90deg,#d7dfeb 0 6px,transparent 6px 14px)}
.rm-node{position:absolute;top:0;left:50%;width:26px;height:26px;margin-left:-13px;display:grid;place-items:center;z-index:1}
.rm-node i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:4px solid #c7d1e0;background:#fff;color:#fff;box-sizing:border-box}
.rm-node svg{width:14px;height:14px}
.st-done .rm-node i{border-color:#14804a;background:#14804a}
.st-now .rm-node i{border-color:var(--ms-gold);background:#fff;box-shadow:0 0 0 0 rgba(255,204,42,.7);animation:rm-ping 1.8s ease-out infinite}
.st-next .rm-node i{border-color:#6f8fe0}
.rm-card article{display:grid;gap:8px;align-content:start;height:100%;padding:14px 14px 12px;border:1px solid var(--ms-line);border-radius:20px;background:#fff;box-shadow:var(--ms-shadow);transition:transform .25s,box-shadow .25s,border-color .25s}
.rm-card:hover article{transform:translateY(-3px);box-shadow:0 18px 40px rgba(7,27,54,.12)}
.rm-top{display:flex;align-items:center;gap:8px}
.rm-code{padding:3px 9px;border-radius:9px;background:var(--ms-navy);color:#fff;font:800 12px/1.4 Estedad,Tahoma,sans-serif;letter-spacing:.04em;direction:ltr}
.rm-grp{flex:1;min-width:0;color:var(--ms-muted);font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-st{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;background:#eef2f8;color:#5b6a80}
.st-done .rm-st{background:#e3f6ec;color:#0c6b3d}
.st-now .rm-st{background:#fff3cf;color:#7a4b00}
.st-next .rm-st{background:#e7efff;color:#1746b5}
.rm-card h3{margin:2px 0 0;font-size:17px;line-height:1.5;color:var(--ms-navy)}
.rm-del{margin:0;color:var(--ms-muted);font-size:13px;line-height:1.9}
.rm-sec h4{margin:4px 0 4px;font-size:12px;color:var(--ms-muted)}
.rm-sec ul{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.rm-sec li{position:relative;padding-inline-start:16px;font-size:12.5px;line-height:1.8}
.rm-sec li:before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:7px;height:7px;border-radius:50%;background:#2eb872}
.rm-needs{display:flex;flex-wrap:wrap;gap:6px}
.rm-need{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:9px;border:1px solid #d7dfeb;background:#f6f8fb;color:var(--ms-navy);font-size:12px;font-weight:700;text-decoration:none}
.rm-need b{direction:ltr;font-weight:800}
.rm-need svg{width:12px;height:12px}
.rm-need.ok{border-color:#bfe8d1;background:#ecfaf2;color:#0c6b3d}
.rm-need.txt{background:#fff8e5;border-color:#f3dfa6;color:#7a4b00;line-height:1.7}
.rm-note2{margin:0;padding:8px 10px;border-radius:12px;background:#fff8e5;color:#7a4b00;font-size:12.5px;line-height:1.8}
.rm-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.rm-meta span{padding:3px 9px;border-radius:999px;background:#eef2f8;color:#5b6a80;font-size:11.5px;font-weight:700}
.rm-meta .d{background:#e3f6ec;color:#0c6b3d}
/* each state has its own weight: done is calm, now glows, next is clear, later is washed out */
.st-done article{border-top:4px solid #2eb872}
.st-now article{border-color:var(--ms-gold);border-top:4px solid var(--ms-gold);box-shadow:0 0 0 3px rgba(255,204,42,.28),0 18px 40px rgba(7,27,54,.14)}
.st-next article{border-top:4px solid #6f8fe0}
.st-later{filter:grayscale(.55)}
.st-later article{border-top:4px solid #c7d1e0;background:#fbfcfe}
.rm-card.focus{width:min(86vw,360px)}
.rm-card.pulse article{animation:rm-flash 1.4s ease}
.rm-foot{margin:2px 16px 0;color:var(--ms-muted);font-size:12.5px;line-height:1.9}
.rm-empty{display:grid;justify-items:center;gap:10px;margin:24px 16px;padding:30px 18px;border:1px solid var(--ms-line);border-radius:22px;background:#fff;text-align:center}
.rm-empty img{width:120px;height:120px;object-fit:contain}
.rm-empty h2{margin:0;font-size:20px;color:var(--ms-navy)}
.rm-empty p{margin:0;max-width:520px;color:var(--ms-muted);line-height:2}
.rm-pick{cursor:pointer}
.rm-msg{color:#7a4b00!important;font-weight:700}
@keyframes rm-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rm-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes rm-ping{0%{box-shadow:0 0 0 0 rgba(255,204,42,.75)}100%{box-shadow:0 0 0 14px rgba(255,204,42,0)}}
@keyframes rm-flash{0%,100%{transform:none}30%{transform:translateY(-6px) scale(1.02)}}
@media(prefers-reduced-motion:reduce){.rm-card,.rm-bar i,.st-now .rm-node i,.rm-card.pulse article{animation:none}}