/* #53 C01: presentation for C02's route contract. No global/header/progress rules. */
.learning-route {
 box-sizing:border-box;
 width:100%;max-width:1120px;
 margin:24px auto;padding:clamp(16px,3vw,32px);
 color:var(--ink);font-family:Manrope,'DM Sans',sans-serif;
 border:1px solid var(--line);border-radius:14px;background:var(--bg);
 overflow-wrap:anywhere;
}
.learning-route *, .route-return * {box-sizing:border-box}
.learning-route [hidden],.route-return[hidden],.route-return [hidden] {display:none!important}
.learning-route .route-heading {margin:0 0 20px;padding:0;max-width:76ch}
.learning-route .route-heading>:is(h1,h2) {
 margin:0 0 12px;font:500 clamp(26px,3.2vw,40px)/1.2 Manrope,'DM Sans',sans-serif;
 letter-spacing:-.025em;color:var(--ink);
}
.learning-route .route-heading>p,.learning-route .route-reason,.learning-route .route-meaning {
 margin:0;font-size:15px;line-height:1.75;color:var(--muted);
}
.learning-route .route-resume {
 display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:12px 20px;min-width:0;margin:20px 0;padding:16px;
 border:1px solid var(--accent);border-radius:10px;background:var(--panel);
}
.learning-route .route-resume>p {flex:1 1 240px;min-width:0;margin:0;font-size:14px;line-height:1.75;color:var(--ink)}
.learning-route .route-resume>.button {
 display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;
 min-width:44px;min-height:44px;max-width:100%;padding:10px 20px;
 border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--bg);
 font:600 14px/1.5 Manrope,'DM Sans',sans-serif;text-align:center;text-decoration:none;white-space:normal;
}
.learning-route .route-steps {display:grid;grid-template-columns:minmax(0,1fr);gap:14px;list-style:none;padding:0;margin:24px 0}
.learning-route .route-step {
 display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;
 min-width:0;margin:0;padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
 scroll-margin-block-start:24px;
}
.learning-route .route-step>div {min-width:0}
.learning-route .route-number {
 display:inline-flex;align-items:center;justify-content:center;align-self:start;
 width:40px;min-height:40px;border:1px solid var(--line);border-radius:50%;
 font:600 13px/1.5 Manrope,'DM Sans',sans-serif;color:var(--accent);
}
.learning-route .route-step :is(h2,h3) {margin:0 0 8px;font:500 clamp(18px,2vw,23px)/1.45 Manrope,'DM Sans',sans-serif;letter-spacing:-.015em;color:var(--ink)}
.learning-route .route-step :is(h2,h3)>a {display:inline-flex;align-items:center;min-height:44px;max-width:100%;color:inherit;text-decoration:none;text-underline-offset:4px}
.learning-route .route-step :is(h2,h3)>a:hover {text-decoration:underline}
.learning-route [data-route-step-status] {margin:10px 0;font-size:13px;line-height:1.65;color:var(--muted)}
.learning-route .route-actions {display:flex;flex-wrap:wrap;align-items:stretch;gap:8px 12px;margin-top:12px}
.learning-route .route-actions>a {
 display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;max-width:100%;
 padding:10px 16px;border:1px solid var(--line);border-radius:999px;
 background:var(--bg);color:var(--ink);font:500 13px/1.5 Manrope,'DM Sans',sans-serif;
 text-align:center;text-decoration:none;white-space:normal;
}
.learning-route .route-actions>a:first-child {border-color:var(--accent);color:var(--accent)}
.learning-route .route-actions>a:hover,.learning-route .route-resume>.button:hover {text-decoration:underline;text-underline-offset:4px}
.learning-route .route-meaning {padding-top:16px;margin-top:20px;border-top:1px solid var(--line);font-size:13px}
.learning-route :is(a,button,input,summary):focus-visible,.route-return :is(a,button):focus-visible {
 outline:3px solid var(--accent);outline-offset:4px;
}
.learning-route.route-entry {max-width:none;margin:20px 0;padding:20px}
.learning-route.route-entry .route-heading>:is(h1,h2) {font-size:clamp(23px,2.5vw,30px)}
.learning-route.route-entry .route-resume {margin-bottom:0}
.route-return {
 display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
 margin:20px auto;padding:12px 16px;max-width:1120px;min-width:0;
 border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);
 font-family:Manrope,'DM Sans',sans-serif;overflow-wrap:anywhere;
}
.route-return a {display:inline-flex;align-items:center;min-width:44px;min-height:44px;max-width:100%;padding:8px 4px;color:var(--accent);font-size:14px;line-height:1.6;text-underline-offset:4px;white-space:normal}
@media(max-width:600px) {
 .learning-route {margin-block:16px;padding:16px;border-radius:10px}
 .learning-route .route-step {grid-template-columns:30px minmax(0,1fr);gap:10px;padding:14px}
 .learning-route .route-number {width:30px;min-height:30px;font-size:12px}
 .learning-route .route-resume {padding:14px}
 .learning-route .route-resume>.button {width:100%}
 .learning-route .route-actions {gap:8px}
 .learning-route .route-actions>a {padding-inline:12px}
 .learning-route.route-entry {padding:16px}
 .route-return {margin-block:16px;padding:10px 12px;gap:4px 14px}
}
@media(forced-colors:active) {
 .learning-route,.learning-route .route-step,.learning-route .route-resume,.route-return {border-color:CanvasText}
 .learning-route :is(a,button):focus-visible,.route-return :is(a,button):focus-visible {outline-color:Highlight}
}

/* The compact entry also contains direct textual route/map links. */
.learning-route>p>a {display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding-block:6px;color:var(--accent);font-size:14px;line-height:1.6;text-underline-offset:4px;white-space:normal}

/* Override legacy mobile nav>a:first-child hiding only inside the route-return control. */
.modus-interior nav.route-return>a {display:inline-flex}