/* B5 daily roadmap (js/ui/roadmap.js). Own .rm-* names, never .task: renderCommitmentLayout
   rearranges every #commitList .task. Colour-only transitions; none under reduced motion.
   The header reuses .commitment-disclosure (the Mechanics fold). */
.roadmap{padding:12px 18px}
.rm-heading{margin:0}
#roadmapToggle{justify-content:flex-start;gap:10px}
#roadmapToggle .rm-sum{margin-left:auto;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
#roadmapToggle .panel-arrow{flex:none}
.rm-day-check{display:none;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--gain);color:#0b0a10;font:800 11px/1 'DM Sans',sans-serif;letter-spacing:0}
.roadmap[data-complete="true"] .rm-day-check{display:inline-grid}
.roadmap[data-complete="true"] #roadmapToggle .rm-sum{color:var(--gain);font-weight:600}
#roadmapBody[hidden]{display:none!important}
.rm-body{margin-top:10px}

/* one timeline: Morning -> Midday -> Evening -> All day */
.rm-timeline{list-style:none;margin:0;padding:0}
.rm-part{position:relative;padding:0 0 14px 24px}
.rm-part:last-child{padding-bottom:2px}
/* the rail: a line from each part's marker down to the next one */
.rm-part::before{content:'';position:absolute;left:6px;top:19px;bottom:-1px;width:2px;border-radius:1px;background:var(--line2)}
.rm-part:last-child::before{display:none}
.rm-dot{position:absolute;left:1px;top:5px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;
  border:2px solid var(--line2);background:var(--bg)}
.rm-open .rm-dot{border-color:var(--rank)}
.rm-idle .rm-dot{border-color:var(--muted)}
/* a part whose habits are all done: its marker becomes a check */
.rm-dot.rm-part-check{left:-1px;top:3px;width:16px;height:16px;border:0;background:var(--gain);
  display:grid;place-items:center;color:#0b0a10;font-size:10px;font-weight:800;line-height:1}
.rm-part.rm-clear::before{background:rgba(34,197,94,.45)}
.rm-part-head{display:flex;align-items:center;gap:8px;min-height:22px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rm-part-head b{font-weight:700}
.rm-open>.rm-part-head b{color:var(--text)}
.rm-clear>.rm-part-head b{color:var(--gain)}
.rm-count{margin-left:auto;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.rm-clear .rm-count{color:var(--gain)}

.rm-items{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rm-item{display:grid;grid-template-columns:22px minmax(0,1fr) auto 22px;align-items:center;gap:8px;width:100%;min-height:44px;
  padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);
  font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;
  transition:border-color 160ms var(--ease-out,ease-out),background-color 160ms var(--ease-out,ease-out)}
.rm-emoji{font-size:16px;line-height:1;text-align:center}
.rm-text{display:flex;flex-direction:column;min-width:0}
.rm-name{font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.rm-sub{font-size:11px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.rm-state{font-weight:600}
.rm-check{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line2);
  font-size:11px;font-weight:700;color:#0b0a10;transition:background-color 160ms var(--ease-out,ease-out),border-color 160ms var(--ease-out,ease-out)}

.rm-due .rm-state{color:var(--loss)}
.rm-due .rm-check{border-color:rgba(239,68,68,.6)}
.rm-done{border-color:rgba(34,197,94,.42);background:rgba(34,197,94,.07)}
.rm-done .rm-name{color:#c9c3d3}
.rm-done .rm-state{color:var(--gain)}
.rm-done .rm-check{background:var(--gain);border-color:var(--gain)}
.rm-excused .rm-state{color:var(--gold)}
/* batch 2: a weekly habit shown until its quota is met; optional today, never counted */
.rm-optional{border-style:dashed}
.rm-optional .rm-state{color:#c4a2ff}
/* the "show on the roadmap until quota met" switch, in the wizard's last step and the edit modal */
.roadmap-quota-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);text-align:left}
.roadmap-quota-field[hidden]{display:none}
.rq-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rq-label{font-size:13px;font-weight:600;color:var(--text)}
.rq-sub{font-size:11px;line-height:1.4;color:var(--muted)}
.rm-geass{box-shadow:inset 3px 0 0 #9333ea}
.rm-geass.rm-done{box-shadow:inset 3px 0 0 var(--gain)}
.rm-none{margin:4px 0 0;font-size:12px;color:var(--muted);opacity:.7}
/* 2026-10-17: the habit's XP left of its check, an emoji per part, and the Edit-order mode */
.rm-xp{font-size:11.5px;font-weight:600;color:#c9c3d3;white-space:nowrap;font-variant-numeric:tabular-nums}
.rm-done .rm-xp{color:var(--gain)}
.rm-part-emoji{font-size:13px;line-height:1;letter-spacing:0}
.rm-tools{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.rm-edit-btn{min-height:32px;padding:5px 12px;border:1px solid var(--line2);border-radius:8px;background:transparent;
  color:var(--muted);font:600 12px 'DM Sans',sans-serif;cursor:pointer;touch-action:manipulation}
.rm-edit-btn.on{border-color:var(--rank);color:var(--text)}
.rm-item.rm-editing{grid-template-columns:22px minmax(0,1fr) auto auto;cursor:default}
.rm-moves{display:flex;gap:4px}
.rm-move{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line2);border-radius:8px;
  background:var(--panel);color:var(--text);font-size:12px;cursor:pointer;touch-action:manipulation}
.rm-move:disabled{opacity:.3;cursor:default}
.rm-move:focus-visible,.rm-edit-btn:focus-visible{outline:2px solid var(--rank);outline-offset:2px}
.rm-rest{margin:0 0 10px;font-size:12.5px;color:var(--muted)}

@media (hover:hover) and (pointer:fine){.rm-item:hover{border-color:var(--line2)}.rm-done:hover{border-color:var(--gain)}}
.rm-item:focus-visible{outline:2px solid var(--rank);outline-offset:2px}
@media (max-width:359px){#roadmapToggle{gap:6px}#roadmapToggle .rm-sum{font-size:11px}}
@media (prefers-reduced-motion:reduce){.rm-item,.rm-check{transition:none}}
@media (prefers-contrast:more){.rm-item{border-color:var(--line2)}.rm-sub,.rm-part-head{color:var(--text)}}