/* Current work in three columns, followed by three quiet previews. */
.main-content:has(#roadmap.active) > .container { max-width:1440px; }
#roadmap-content { min-width:0; }
#roadmap .page-header {
    margin-bottom:28px; padding:0 0 24px; border:0 !important; border-bottom:1px solid var(--glass-line) !important;
    border-radius:0; background:none !important; box-shadow:none !important; overflow:visible;
}
#roadmap .page-header::before { content:none; }
#roadmap .page-title { background:none; color:var(--text-primary); font:650 clamp(30px,3vw,40px)/1.15 Inter,sans-serif; letter-spacing:-.045em; }
#roadmap .page-subtitle { max-width:65ch; margin-top:10px; color:var(--text-secondary); font:400 16px/1.6 Inter,sans-serif; letter-spacing:0; text-transform:none; }
#roadmap .roadmap-workspace { min-width:0; }
#roadmap .roadmap-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
#roadmap :is(.roadmap-level,.roadmap-topic,.roadmap-context,.roadmap-empty) {
    min-width:0; margin:0; padding:28px !important;
    background:var(--glass-bg-strong) !important; border:1px solid var(--glass-line) !important;
    border-radius:24px; box-shadow:none !important; transform:none !important;
}
#roadmap .roadmap-level { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; }
#roadmap .roadmap-level h2 { margin:0; color:var(--text-primary); font:550 17px/1.4 Inter,sans-serif; letter-spacing:-.015em; }
#roadmap .roadmap-score { position:relative; width:170px; height:170px; max-width:100%; flex:none; }
#roadmap .roadmap-score svg { width:100%; height:100%; fill:none; stroke-width:5; transform:rotate(-90deg); }
#roadmap .roadmap-ring-track { stroke:var(--surface-active); }
#roadmap .roadmap-ring-fill { stroke:var(--accent); stroke-linecap:round; transition:stroke-dasharray var(--site-motion-duration) var(--site-motion-ease); }
#roadmap .roadmap-score-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
#roadmap .roadmap-score-label strong { color:var(--text-primary); font:500 44px/1 'JetBrains Mono',monospace; letter-spacing:-.06em; }
#roadmap .roadmap-score-label span { color:var(--text-secondary); font:400 13px/1.4 Inter,sans-serif; }
#roadmap .roadmap-topic { display:flex; flex-direction:column; align-items:flex-start; }
#roadmap .roadmap-next { border-color:var(--accent-border) !important; }
#roadmap .roadmap-topic-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:18px; color:var(--text-secondary); font:450 13px/1.5 Inter,sans-serif; }
#roadmap .roadmap-stage { color:var(--text-primary); font-weight:600; }
#roadmap .roadmap-next .roadmap-stage { display:inline-flex; align-items:center; gap:8px; }
#roadmap .roadmap-next .roadmap-stage::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); }
#roadmap .roadmap-topic-number { white-space:nowrap; }
#roadmap .roadmap-topic-title { margin:0; color:var(--text-primary); font:600 21px/1.35 Inter,sans-serif; letter-spacing:-.025em; overflow-wrap:anywhere; }
#roadmap .roadmap-next .roadmap-topic-title { font-size:26px; line-height:1.3; letter-spacing:-.035em; }
#roadmap .roadmap-action-title { margin:10px 0 0; color:var(--text-secondary); font:450 15px/1.6 Inter,sans-serif; overflow-wrap:anywhere; }
#roadmap .roadmap-action {
    display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px;
    max-width:100%; margin-top:28px; padding:12px 18px; border:1px solid var(--accent); border-radius:14px;
    background:var(--accent); color:var(--on-accent); font:600 15px/1.5 Inter,sans-serif; white-space:normal; text-align:center;
    box-shadow:none; transform:none; cursor:pointer; transition:background-color 160ms ease,border-color 160ms ease;
}
#roadmap .roadmap-next .roadmap-action { width:100%; margin-top:auto; }
#roadmap .roadmap-next .roadmap-action-title { margin-bottom:28px; }
#roadmap .roadmap-action:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
#roadmap button:active { filter:brightness(.94); }
#roadmap button:disabled { opacity:.65; cursor:wait; }
#roadmap .roadmap-action svg { width:19px; height:19px; flex:none; }
#roadmap :is(.roadmap-reason,.roadmap-method,.roadmap-empty p) { max-width:65ch; margin:0; color:var(--text-secondary); font:400 15px/1.65 Inter,sans-serif; overflow-wrap:anywhere; }
#roadmap .roadmap-guide-title { margin:24px 0 12px; color:var(--accent); font:500 12px/1.5 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
#roadmap .roadmap-future { min-height:184px; cursor:default; }
#roadmap .roadmap-future .roadmap-topic-meta { margin-bottom:14px; }
#roadmap .roadmap-future .roadmap-stage { color:var(--text-secondary); }
#roadmap .roadmap-empty { grid-column:span 2; }
#roadmap .roadmap-empty h2 { margin:0 0 12px; color:var(--text-primary); font:600 25px/1.3 Inter,sans-serif; letter-spacing:-.025em; }
#roadmap button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#roadmap :is(.roadmap-loading,.roadmap-error) { margin:0; padding:28px; border:1px solid var(--glass-line); border-radius:24px; background:var(--glass-bg-strong); color:var(--text-secondary); font:400 16px/1.65 Inter,sans-serif; }
#roadmap .roadmap-error:not(:first-child) { margin-top:24px; }
#roadmap .roadmap-error h2 { margin:0 0 10px; color:var(--text-primary); font:600 22px/1.4 Inter,sans-serif; }
#roadmap .roadmap-error p { margin:0; }
#roadmap .roadmap-retry { min-height:44px; margin-top:20px; padding:10px 18px; border:1px solid var(--accent-border); border-radius:12px; background:var(--accent-muted); color:var(--text-primary); font:550 14px/1.5 Inter,sans-serif; cursor:pointer; }
@media (min-width:701px) and (max-width:1099px) {
    #roadmap .roadmap-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
    #roadmap :is(.roadmap-level,.roadmap-next) { grid-column:span 3; }
    #roadmap .roadmap-context { grid-column:1/-1; }
    #roadmap .roadmap-future { grid-column:span 2; padding:22px !important; }
    #roadmap .roadmap-future .roadmap-topic-title { font-size:19px; }
    #roadmap .roadmap-future .roadmap-topic-meta { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
    #roadmap .roadmap-empty { grid-column:span 3; }
}
@media (max-width:700px) {
    #roadmap .page-header { padding-bottom:20px; margin-bottom:20px; }
    #roadmap .page-subtitle { font-size:15px; }
    #roadmap .roadmap-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
    #roadmap :is(.roadmap-level,.roadmap-topic,.roadmap-context,.roadmap-empty) { grid-column:auto; padding:24px !important; }
    #roadmap .roadmap-level { flex-direction:row; justify-content:space-between; gap:16px; text-align:left; padding:18px 24px !important; }
    #roadmap .roadmap-level h2 { font-size:16px; }
    #roadmap .roadmap-score { width:88px; height:88px; }
    #roadmap .roadmap-score-label { gap:5px; }
    #roadmap .roadmap-score-label strong { font-size:28px; }
    #roadmap .roadmap-score-label span { font-size:12px; }
    #roadmap .roadmap-next .roadmap-action { margin-top:0; }
    #roadmap .roadmap-next .roadmap-action-title { margin-bottom:24px; }
    #roadmap .roadmap-future { min-height:0; }
}
@media (forced-colors:active) {
    #roadmap .roadmap-ring-fill { stroke:Highlight; }
    #roadmap .roadmap-next .roadmap-stage::before { background:Highlight; }
    #roadmap .roadmap-guide-title { color:LinkText; }
}
@media (prefers-reduced-motion:reduce) { #roadmap :is(button,.roadmap-ring-fill) { transition:none; } }