/* A career path contains skill domains; each domain can be explored on its own. */
.learning-path {
  padding:clamp(1.25rem,3vw,2.5rem);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.learning-path-intro {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem
}
.learning-path-intro>div {max-width:48rem}
.learning-path h3 {
  font-size:clamp(1.75rem,2.4vw,2.5rem);
  margin-bottom:1rem
}
.learning-path-intro p {max-width:68ch}
.learning-path-intro>.button {flex-shrink:0}
.roadmap-caption {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.875rem
}
.roadmap-caption>span {color:var(--muted)}
.competency-roadmap {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:1rem 2rem;
  list-style:none;
  padding:0;
  margin:1.25rem 0 2rem
}
.competency-roadmap>li {min-width:0}
.competency-roadmap details {border-bottom:1px solid var(--line)}
.competency-roadmap summary {
  display:grid;
  grid-template-columns:2.125rem minmax(0,1fr) 1rem;
  align-items:start;
  gap:.75rem;
  padding:1rem 0;
  min-height:6.5rem
}
.competency-roadmap summary:hover .roadmap-label strong {color:var(--link)}
.competency-roadmap .roadmap-index {
  display:grid;
  place-items:center;
  width:2.125rem;
  height:2.125rem;
  border-radius:50%;
  background:var(--selection);
  color:var(--text);
  font-size:.875rem;
  font-weight:700;
  transform:none
}
.competency-roadmap .roadmap-label {
  font-size:1rem;
  color:var(--text);
  transform:none
}
.roadmap-label strong {
  display:block;
  line-height:1.4;
  padding-top:.25rem
}
.roadmap-label small {
  display:block;
  margin-top:.35rem;
  color:var(--muted);
  font-size:.8125rem;
  line-height:1.5
}
.competency-roadmap .roadmap-toggle {
  align-self:start;
  margin-top:.125rem;
  font-size:1.25rem;
  line-height:1.5;
  text-align:center
}
.roadmap-content {
  padding:0 0 1.25rem;
  font-size:.9375rem;
  line-height:1.65
}
.roadmap-content p+p {margin-top:.75rem}
.roadmap-content .tags {margin-block:1rem}
.roadmap-content>a {
  display:inline-block;
  margin-top:1rem;
  color:var(--link);
  font-size:.875rem;
  text-decoration:underline;
  text-underline-offset:.2em
}
.path-connections {
  display:grid;
  grid-template-columns:minmax(10rem,.45fr) minmax(0,1fr);
  gap:1.5rem;
  padding:1.5rem;
  border-left:3px solid var(--accent);
  background:var(--bg)
}
.path-connections>strong {line-height:1.5}
.path-connections>p {font-size:.9375rem;max-width:76ch}
.path-scope {
  margin-top:1.25rem;
  max-width:90ch;
  font-size:.875rem
}
.related-paths {margin-top:3rem}
.related-paths-heading {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:2rem;
  align-items:start;
  margin-bottom:2rem
}
.related-paths-heading>h3 {font-size:1.5rem;line-height:1.25}
.related-paths-heading>p {max-width:65ch;font-size:.9375rem}
.related-paths-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3rem
}
.related-paths-grid>article {
  padding-top:1.5rem;
  border-top:1px solid var(--control-border)
}
.related-paths-grid h4 {
  font-size:1.375rem;
  line-height:1.3;
  letter-spacing:-.025em;
  margin:0 0 .75rem
}
.related-paths-grid p {font-size:.9375rem;max-width:64ch}
.domain-sequence {
  list-style:none;
  margin:1.5rem 0;
  padding:0 0 0 1.25rem;
  border-left:2px solid var(--line);
  display:grid;
  gap:1rem
}
.domain-sequence li {position:relative}
.domain-sequence li:before {
  content:"";
  position:absolute;
  width:.5rem;
  height:.5rem;
  top:.55rem;
  left:calc(-1.25rem - 5px);
  background:var(--action);
  border-radius:50%
}
.domain-sequence strong,.domain-sequence span {display:block}
.domain-sequence strong {font-size:.9375rem}
.domain-sequence span {font-size:.875rem;color:var(--muted)}
.domain-connection strong {font-weight:400;color:var(--link)}
.related-paths-contact {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line)
}
.related-paths-contact>p {max-width:55ch;font-size:.875rem}
.related-paths-contact>a {font-size:.875rem}
@media(max-width:1100px) {
  .learning-path-intro {display:block}
  .learning-path-intro>.button {margin-top:1.25rem}
  .competency-roadmap {grid-template-columns:repeat(2,minmax(0,1fr))}
  .roadmap-caption {display:block}
  .roadmap-caption>span {display:block;margin-top:.35rem}
}
@media(max-width:700px) {
  .competency-roadmap {grid-template-columns:1fr;gap:0}
  .competency-roadmap summary {min-height:5.5rem}
  .path-connections,.related-paths-heading,.related-paths-grid {grid-template-columns:1fr;gap:1rem}
  .path-connections {padding:1.125rem}
  .related-paths-grid {gap:2rem}
  .related-paths-contact {flex-direction:column;align-items:flex-start;gap:1rem}
  .related-paths-heading {margin-bottom:1.5rem}
  .learning-path-intro>.button {width:100%;white-space:normal;text-align:center}
}