/* Roadmaps: a flowchart. A spine runs down the middle; each stage is a pill on the spine with its boxes branching to the left and right. */
.pf-career { background: var(--grad); -webkit-mask: none; mask: none; border: 0; }
.rlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 30px 0 8px; color: var(--muted); font-size: 12.5px; }
.rlegend span { display: inline-flex; align-items: center; gap: 7px; }
.lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .lg-b { background: var(--ok); } .lg-i { background: var(--warn); } .lg-a { background: var(--bad); } .lg-d { background: var(--grad); }
.rlink { margin-left: auto; color: var(--brand); text-decoration: none; font-weight: 600; } .rlink:hover { text-decoration: underline; }

.rmap { position: relative; padding: 18px 0 8px; }
.rmap::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, var(--rule2) 0 8px, transparent 8px 14px); }
.rstage { position: relative; padding-top: 34px; }
.rstage-head { position: relative; z-index: 1; width: max-content; max-width: 90%; margin: 0 auto 26px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 28px; border-radius: 16px; background: var(--grad); color: var(--on-brand); text-align: center; }
.rstage-head b { font: 700 1.05rem var(--display); letter-spacing: -.02em; } .rstage-head small { font: 500 11.5px var(--sans); opacity: .8; }
.rstage-n { font: 700 11px var(--mono); letter-spacing: .14em; opacity: .75; } .rstage-n:empty { display: none; }
.rnodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; row-gap: 14px; }
.rnode { position: relative; max-width: 360px; width: 100%; }
.rnode.l { grid-column: 1; justify-self: end; } .rnode.r { grid-column: 2; justify-self: start; margin-top: 34px; }
.rnode::before { content: ''; position: absolute; top: 50%; width: 36px; height: 2px; background: var(--rule2); }
.rnode.l::before { right: -36px; } .rnode.r::before { left: -36px; }
.rnode::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: var(--bg); border: 2px solid var(--rule2); }
.rnode.l::after { right: -41px; } .rnode.r::after { left: -41px; }
.rnode:has(.is-done)::after { background: var(--ok); border-color: var(--ok); } .rnode:has(.is-done)::before { background: var(--ok); }

.rbox { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px; border: 1px solid var(--rule2); border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none; overflow: hidden; transition: border-color .2s, transform .2s, background .2s; }
.rbox:hover { border-color: var(--brand); transform: translateY(-2px); background: var(--card-hover); }
.rbox:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rbox-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rbox b { font: 600 14.5px/1.3 var(--display); letter-spacing: -.01em; }
.rbox-meta, .rtrack-prog { color: var(--muted); font-size: 12px; } .rtrack-prog:empty { display: none; }
.rtick { display: none; position: absolute; top: 10px; right: 12px; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--ok); color: #04130d; font-size: 12px; font-weight: 700; }
.rbox.is-done { border-color: color-mix(in srgb, var(--ok) 55%, transparent); } .rbox.is-done .rtick { display: grid; } .rbox.is-done .lvl { margin-right: 26px; }
.rbox-track::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--grad); }

@media (max-width: 760px) {
  .rmap::before { left: 14px; margin: 0; }
  .rstage-head { margin: 0 0 22px 38px; align-items: flex-start; text-align: left; width: auto; }
  .rnodes { grid-template-columns: 1fr; padding-left: 38px; row-gap: 12px; }
  .rnode.l, .rnode.r { grid-column: 1; justify-self: stretch; margin-top: 0; max-width: none; }
  .rnode.l::before, .rnode.r::before { left: -24px; right: auto; width: 24px; } .rnode.l::after, .rnode.r::after { left: -29px; right: auto; }
  .rlink { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .rbox { transition: none; } }