/* Roadmap: per-area checklists with stacked done / in-progress bars; the hero ring sums every area. */
:root{--done:#6fd99a;--progress:#f0d330;--planned:#516c84}
.roadmap-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:60px;align-items:end}
.overall{border:1px solid #7c9db855;background:#081522cc;backdrop-filter:blur(6px);padding:24px;display:grid;gap:18px;justify-items:center}
.overall .eyebrow{margin:0;justify-self:start;font-size:11px}
.overall-ring{position:relative;width:180px;height:180px;display:grid;place-content:center;text-align:center}
.overall-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.overall-ring circle{fill:none;stroke-width:7}
.ring-track{stroke:#1d3346}
.ring-progress{stroke:var(--progress);opacity:.55;stroke-dasharray:0 400}
.ring-done{stroke:var(--done);stroke-dasharray:0 400;filter:drop-shadow(0 0 6px #6fd99a88)}
.overall-ring circle{transition:stroke-dasharray .9s ease-out}
.overall-ring strong{font-size:44px;font-weight:300;line-height:1}
.overall-ring small{font:10px var(--label);letter-spacing:1.6px;color:#8fa6ba;margin-top:6px}
.overall-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0;width:100%}
.overall-counts div{background:#0c1926;padding:10px 8px;text-align:center}
.overall-counts dt{font:9px var(--label);letter-spacing:.4px;white-space:nowrap;color:#8fa6ba;display:flex;gap:6px;align-items:center;justify-content:center}
.overall-counts dd{margin:4px 0 0;font-size:22px;font-weight:300}
.key{width:7px;height:7px;display:inline-block;flex:none}
.key-done{background:var(--done)}.key-progress{background:var(--progress)}.key-planned{background:var(--planned)}
.roadmap-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 30px;margin-bottom:44px}
.roadmap-toolbar .devlog-filters{margin:0}
.roadmap-note{margin:0;color:#7f96aa;font-size:14px;max-width:440px}
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.area{border:1px solid #7c9db844;background:#0c1b2a;position:relative;scroll-margin-top:30px}
.area:before{content:'';position:absolute;inset:-1px auto auto -1px;width:55px;height:2px;background:var(--cyan)}
.area[hidden]{display:none}
.area-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:24px 24px 18px;border-bottom:1px solid #7c9db833}
.area-number{font:12px var(--label);color:#6f8ba1;padding-top:8px}
.area-head h2{font-size:26px;font-weight:300;letter-spacing:.6px;margin:0;line-height:1.2}
.area-head p{margin:4px 0 0;color:var(--muted);font-size:15px}
.area-meter{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:14px}
.area-percent{font:12px var(--label);letter-spacing:1.2px;color:var(--done);min-width:42px}
.bar{display:flex;height:5px;background:#1d3346;overflow:hidden}
.bar i{display:block;height:100%;width:0;transition:width .9s ease-out}
.bar-done{background:var(--done);box-shadow:0 0 8px #6fd99a77}
.bar-progress{background:repeating-linear-gradient(135deg,var(--progress) 0 4px,#c9ae22 4px 8px);opacity:.75}
.items{list-style:none;margin:0;padding:12px 24px 22px;display:grid;gap:2px}
.items li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:start;padding:9px 0;border-bottom:1px solid #7c9db81c;color:#c2d3e1;font-size:15.5px;line-height:1.55}
.items li:last-child{border-bottom:0}
.items li[hidden]{display:none}
.items li:before{content:'';width:16px;height:16px;margin-top:3px;border:1px solid #6f8ba1;box-sizing:border-box}
.items li[data-status=done]:before{content:'✓';border-color:var(--done);background:#6fd99a22;color:var(--done);font:12px/14px var(--label);text-align:center}
.items li[data-status=progress]:before{border-color:var(--progress);background:linear-gradient(90deg,#f0d33055 50%,transparent 50%)}
.items li[data-status=done]{color:#e3edf6}
.items li[data-status=planned]{color:#8fa6ba}
.items li:after{font:9px var(--label);letter-spacing:1.2px;padding:4px 7px;margin-top:2px;white-space:nowrap}
.items li[data-status=done]:after{content:'DONE';color:var(--done);background:#6fd99a14}
.items li[data-status=progress]:after{content:'IN PROGRESS';color:var(--progress);background:#f0d33014}
.items li[data-status=planned]:after{content:'PLANNED';color:#8fa6ba;background:#516c8422}
@media(max-width:1100px){.roadmap-hero{grid-template-columns:minmax(0,1fr) 280px;gap:36px}}
@media(max-width:900px){.roadmap-hero{grid-template-columns:1fr}.overall{justify-items:stretch;grid-template-columns:auto 1fr;align-items:center}.overall .eyebrow{grid-column:1/-1}.overall-ring{width:140px;height:140px}.overall-ring strong{font-size:34px}.areas{grid-template-columns:1fr}}
@media(max-width:760px){.overall{grid-template-columns:1fr;justify-items:center}.area-head{padding:20px 18px 16px}.items{padding:8px 18px 16px}.items li{font-size:15px;grid-template-columns:22px minmax(0,1fr)}.items li:after{grid-column:2;justify-self:start;margin-top:0}.roadmap-note{font-size:13px}}