.roadmap-flow-panel {container:learning-map / inline-size;margin-bottom:24px;scroll-margin-top:100px;padding:18px;background:radial-gradient(ellipse at 0 0,var(--aura),transparent 65%),var(--surface)}
#roadmap>.page-heading {margin-bottom:22px}
#roadmap>.page-heading h1 {font-size:clamp(28px,3vw,36px)}
#roadmap>.page-heading .eyebrow {margin-bottom:6px}
#roadmap>.page-heading .lead {margin-top:9px;font-size:14px}
.roadmap-flow-heading {display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.roadmap-flow-heading .eyebrow {font-size:10px;margin-bottom:5px}
.roadmap-flow-heading h2 {font-size:19px}
.roadmap-flow-heading p:last-child {font-size:12px;margin-top:6px}
.roadmap-flow {--flow-gap:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:var(--flow-gap);align-items:start;padding:0 2px}
.flow-stage {position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.flow-stage:nth-child(1) {grid-area:1/1}
.flow-stage:nth-child(2) {grid-area:1/2}
.flow-stage:nth-child(3) {grid-area:1/3}
.flow-stage:nth-child(4) {grid-area:2/3}
.flow-stage:nth-child(5) {grid-area:2/2}
.flow-stage:nth-child(6) {grid-area:2/1}
.flow-stage[data-selected=true] {border-color:var(--accent);background:linear-gradient(145deg,var(--aura),transparent),var(--surface);box-shadow:0 0 0 2px var(--aura)}
.flow-stage-select {display:flex;flex-direction:column;align-items:stretch;border:0;background:none;color:inherit;padding:0;text-align:left;width:100%;min-width:0}
.flow-stage-top {display:flex;align-items:center;gap:7px;margin-bottom:8px}
.flow-stage-number {display:grid;place-items:center;width:23px;height:23px;font-size:10px;font-weight:650;border-radius:6px;background:var(--surface3);color:var(--accent);flex-shrink:0}
.flow-stage-week {font-size:10px;color:var(--faint);white-space:nowrap}
.flow-stage-status {margin-left:auto;font-size:10px;color:var(--muted);white-space:nowrap}
.flow-stage[data-selected=true] .flow-stage-number {background:var(--button-gradient);color:var(--button-ink)}
.flow-stage.is-complete .flow-stage-status {color:var(--accent)}
.flow-stage-select>strong {font-size:16px;font-weight:600;line-height:1.5}
.flow-stage-subtitle {font-size:11px;color:var(--accent);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow-stage-goal {font-size:12px;line-height:1.7;color:var(--muted);margin:9px 0;min-height:21px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.flow-stage-details {margin-top:3px;border-top:1px solid var(--line)}
.flow-stage-details>summary {display:flex;align-items:center;justify-content:space-between;gap:7px;list-style:none;cursor:pointer;padding:7px 0 3px;font-size:11px;color:var(--accent)}
.flow-stage-details>summary::-webkit-details-marker {display:none}
.flow-stage-details>summary>small {font-size:10px;color:var(--faint)}
.flow-stage-details>summary>span::after {content:' ＋';font-size:12px}
.flow-stage-details[open]>summary>span::after {content:' −'}
.flow-stage-bottom {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:var(--faint);margin-top:8px}
.flow-stage-track {display:block;height:3px;margin-top:7px;background:var(--surface3);border-radius:3px;overflow:hidden}
.flow-stage-track>i {display:block;height:100%;background:var(--button-gradient);border-radius:3px}
.flow-section {margin-top:16px;min-width:0}
.flow-section h4 {margin:0 0 9px;font-size:12px;font-weight:550;color:var(--muted)}
.flow-section h4>span {font-size:10px;color:var(--accent);margin-right:6px}
.flow-lessons,.flow-tasks {display:grid;gap:7px}
.flow-target {position:relative;display:flex;align-items:flex-start;gap:9px;width:100%;min-width:0;min-height:42px;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink);padding:9px 11px}
.flow-target:hover {border-color:var(--accent);background:color-mix(in srgb,var(--aura) 50%,var(--surface2))}
.flow-target>i {font-size:11px;font-style:normal;color:var(--accent);margin-left:auto;flex-shrink:0}
.flow-lesson {display:block;padding-right:25px}
.flow-lesson>i {position:absolute;top:10px;right:10px}
.flow-lesson>strong {display:block;font-size:12px;line-height:1.5;font-weight:500}
.flow-lesson>span {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;color:var(--muted);line-height:1.65;margin-top:4px}
.flow-task-state {display:grid;place-items:center;flex-shrink:0;width:20px;height:20px;border-radius:5px;background:var(--surface3);font-size:10px;color:var(--faint);margin-top:1px}
.flow-task-copy {display:block;min-width:0}
.flow-task-copy strong {display:block;font-size:12px;font-weight:500;line-height:1.6}
.flow-task-copy>span {display:block;font-size:10px;color:var(--faint);margin-top:2px}
.flow-task.is-done .flow-task-state {background:var(--button-gradient);color:white}
.flow-task.is-done .flow-task-copy strong {color:var(--accent)}
.flow-output {background:linear-gradient(145deg,var(--aura),transparent),var(--surface2);font-size:12px;line-height:1.8}
.flow-delivery {padding-bottom:5px}
/* 默认地图按阶段连接；展开清单时隐藏连线，避免箭头被展开内容拉歪。 */
.flow-stage:is(:nth-child(1),:nth-child(2),:nth-child(4),:nth-child(5))::after {content:'';position:absolute;top:50%;left:100%;width:var(--flow-gap);height:1px;background:var(--faint);opacity:.6}
.flow-stage:is(:nth-child(1),:nth-child(2),:nth-child(4),:nth-child(5))::before {content:'';position:absolute;top:calc(50% - 4px);left:calc(100% + var(--flow-gap) - 8px);border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid var(--faint)}
.flow-stage:nth-child(4)::after,.flow-stage:nth-child(5)::after {left:auto;right:100%}
.flow-stage:nth-child(4)::before,.flow-stage:nth-child(5)::before {left:auto;right:calc(100% + var(--flow-gap) - 8px);border-left:0;border-right:7px solid var(--faint)}
.flow-stage:nth-child(3)::after {content:'';position:absolute;top:100%;left:50%;height:var(--flow-gap);width:1px;background:var(--faint);opacity:.6}
.flow-stage:nth-child(3)::before {content:'';position:absolute;top:calc(100% + var(--flow-gap) - 8px);left:calc(50% - 4px);border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid var(--faint)}
#roadmap-flow:has(.flow-stage-details[open]) .flow-stage::before,#roadmap-flow:has(.flow-stage-details[open]) .flow-stage::after {display:none}
.roadmap-flow-footer {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:15px;font-size:11px;color:var(--faint)}
.roadmap-flow-footer i {display:inline-block;width:7px;height:7px;border:1px solid var(--accent);border-radius:2px;margin-right:5px}
.roadmap-return {font-size:12px;margin-top:12px}
#phase-detail {scroll-margin-top:100px}
#phase-detail:focus,#roadmap-flow-title:focus {outline:none}
.lesson-card[data-lesson],.task-card[data-study-task],.phase-goal[data-phase-goal] {scroll-margin-top:110px}
.lesson-card[data-lesson]:focus,.task-card[data-study-task]:focus,.phase-goal[data-phase-goal]:focus {outline:2px solid var(--accent);outline-offset:4px}
@container learning-map (max-width:720px) {
  .roadmap-flow {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;--flow-gap:14px}
  .flow-stage:nth-child(n) {grid-area:auto}
  .roadmap-flow .flow-stage::before,.roadmap-flow .flow-stage::after {display:none}
}
@container learning-map (max-width:460px) {
  .roadmap-flow {grid-template-columns:minmax(0,1fr)}
  .roadmap-flow-heading {flex-wrap:wrap;gap:9px}
  .roadmap-flow-heading .pill {font-size:10px;padding:3px 8px}
}
@media (max-width:620px) {
  .roadmap-flow-panel,#phase-detail {scroll-margin-top:115px}
  .lesson-card[data-lesson],.task-card[data-study-task],.phase-goal[data-phase-goal] {scroll-margin-top:125px}
}
@media (prefers-reduced-motion:reduce) {
  .flow-stage {transition:none}
}