/* pathway_routes block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   tabbed pathway routes */

.pathway-routes__tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pathway-routes__tab { display: flex; flex-direction: column; gap: .2rem; text-align: left; background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: .9rem 1.2rem; min-width: 210px; }
.pathway-routes__tab[aria-selected="true"] { background: var(--surface-dark); border-color: var(--surface-dark); }
.pathway-routes__tab-label { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--text-heading); }
.pathway-routes__tab-sublabel { font-size: var(--fs-min); color: var(--muted); }
.pathway-routes__tab[aria-selected="true"] .pathway-routes__tab-label { color: var(--white); }
.pathway-routes__tab[aria-selected="true"] .pathway-routes__tab-sublabel { color: rgba(var(--on-dark-rgb), .75); }
.pathway-routes__panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.8rem 1.9rem; }

/* Header + "who is this for" row. The theme adds a person icon + text and a
   head/intro block the design's thinner .pathway-routes__who did not cover. */
.pathway-routes__head { margin-bottom: 1.4rem; }
.pathway-routes__intro { color: var(--muted); max-width: 62ch; }
.pathway-routes__who { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.pathway-routes__who-icon { flex: 0 0 auto; display: inline-flex; color: var(--accent); }
.pathway-routes__who-icon svg { width: 22px; height: 22px; }
.pathway-routes__who-text { margin: 0; font-size: var(--fs-min); color: var(--ink); }
.pathway-routes__who-text strong { color: var(--em-color); }

.pathway-routes__flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 1.2rem 1.7rem; }
/* The step carries its level colour inline as --c (pathway_routes.php maps l3-l7
   onto the brand ramp). Nothing consumed it, so every step drew the same
   --accent edge and the level coding conveyed nothing. Same mechanism as
   .levels-ladder__level. Falls back to --accent when --c is absent. */
.pathway-routes__step { flex: 1 1 200px; border-top: var(--card-edge) solid var(--c, var(--accent)); padding-top: 1.1rem; }
.pathway-routes__step-level { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--em-color); margin-right: .45rem; }
.pathway-routes__step-label { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem; line-height: 1.1; color: var(--text-heading); }
.pathway-routes__step-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem; line-height: 1.1; color: var(--text-heading); margin-bottom: .35rem; }
.pathway-routes__step-text { font-size: var(--fs-min); color: var(--muted); }

/* Connector arrow between steps in the flow. */
.pathway-routes__arrow { flex: 0 0 auto; display: flex; align-items: center; align-self: center; color: var(--muted); }
.pathway-routes__arrow svg { width: 22px; height: 22px; }
@media (max-width: 48em) { .pathway-routes__arrow { transform: rotate(90deg); } }