/* Full-Stack Developer roadmap (docs/studios/social-impact-apps/index.md) */

html.boksa-theme {
	--rm-node-bg-rgb: 254 243 199;
	--rm-node-border-rgb: 234 179 8;
	--rm-node-fg-rgb: 113 63 18;
	--rm-adv-bg-rgb: 224 231 255;
	--rm-adv-border-rgb: 99 102 241;
	--rm-adv-fg-rgb: 55 48 163;
	--rm-tag-a-rgb: 139 92 246;
	--rm-tag-d-rgb: 14 165 233;
	--rm-tag-m-rgb: 34 197 94;
}
html.boksa-theme.boksa-dark {
	--rm-node-bg-rgb: 66 51 12;
	--rm-node-border-rgb: 161 98 7;
	--rm-node-fg-rgb: 250 220 130;
	--rm-adv-bg-rgb: 49 46 90;
	--rm-adv-border-rgb: 129 140 248;
	--rm-adv-fg-rgb: 199 210 254;
	--rm-tag-a-rgb: 167 139 250;
	--rm-tag-d-rgb: 56 189 248;
	--rm-tag-m-rgb: 74 222 128;
}

html.boksa-theme .boksa-article-content .rm-tier { padding: 0.5rem 0; }
html.boksa-theme .boksa-article-content .rm-tier__label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(var(--boksa-primary-rgb));
	margin-bottom: 0.25rem;
}

/* lanes = parallel topic chains, roadmap.sh-style, no card chrome (Tier 1) */
html.boksa-theme .boksa-article-content .rm-lanes { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.5rem 0 0; padding: 0; }
html.boksa-theme .boksa-article-content .rm-lane {
	flex: 1 1 240px;
	min-width: 240px;
}
html.boksa-theme .boksa-article-content .rm-lane__title {
	display: block;
	text-align: center;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(var(--boksa-on-surface-variant-rgb));
	margin: 0 0 0.9rem;
}

/* vertical chain: a spine line runs through the centre of each node.
   Used both inside a lane (Tier 1) and as the trunk/branches of the unified tree (Tier 3, .rm-chain). */
html.boksa-theme .boksa-article-content .rm-lane ul,
html.boksa-theme .boksa-article-content .rm-chain {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	position: relative;
}
html.boksa-theme .boksa-article-content .rm-lane ul::before,
html.boksa-theme .boksa-article-content .rm-chain::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgb(var(--boksa-outline-rgb) / 0.35);
	transform: translateX(-50%);
	z-index: 0;
}
html.boksa-theme .boksa-article-content .rm-lane li,
html.boksa-theme .boksa-article-content .rm-chain > li {
	list-style: none;
	margin: 0;
	position: relative;
	z-index: 1;
}
/* nodes hosting a multi-item spur: the spur is absolutely positioned (doesn't
   reserve space in flow), so pad the trunk manually to stop it colliding with
   whatever comes next. */
html.boksa-theme .boksa-article-content .rm-chain > li.rm-node--tall-1 { margin: 1.3rem 0; }
html.boksa-theme .boksa-article-content .rm-chain > li.rm-node--tall-2 { margin: 3.5rem 0; }
html.boksa-theme .boksa-article-content .rm-chain > li.rm-node--tall-3 { margin: 6rem 0; }
/* downward spur: all the reserved space is needed below the node, not split above/below. */
html.boksa-theme .boksa-article-content .rm-chain > li.rm-node--tall-down-1 { margin-bottom: 7rem; }
html.boksa-theme .boksa-article-content .rm-chain > li.rm-node--tall-down-2 { margin-bottom: 11rem; }
html.boksa-theme .boksa-article-content .rm-chain > li.rm-node--tall-down-3 { margin-bottom: 12rem; }
html.boksa-theme .boksa-article-content .rm-chain > li.rm-node--tall-down-deep { margin-bottom: 10rem; }

/* rounded-rect topic node, roadmap.sh's default (unchecked) node style */
html.boksa-theme .boksa-article-content .rm-chip {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0.4rem 0.9rem;
	border-radius: 0.5rem;
	background: rgb(var(--rm-node-bg-rgb));
	border: 1.5px solid rgb(var(--rm-node-border-rgb));
	color: rgb(var(--rm-node-fg-rgb));
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	position: relative;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
html.boksa-theme .boksa-article-content .rm-chip:hover,
html.boksa-theme .boksa-article-content .rm-chip:visited {
	color: rgb(var(--rm-node-fg-rgb));
}
html.boksa-theme .boksa-article-content .rm-chip:hover {
	transform: translateX(3px);
	box-shadow: var(--boksa-shadow-sm);
}

/* advanced / deepening node: a distinct fill so it reads as "beyond the core path" */
html.boksa-theme .boksa-article-content .rm-chip--adv {
	background: rgb(var(--rm-adv-bg-rgb));
	border-color: rgb(var(--rm-adv-border-rgb));
	color: rgb(var(--rm-adv-fg-rgb));
}
html.boksa-theme .boksa-article-content .rm-chip--adv:hover,
html.boksa-theme .boksa-article-content .rm-chip--adv:visited {
	color: rgb(var(--rm-adv-fg-rgb));
}

/* learning-outcome tag: a small colour dot in the corner of a node, used in the Tier 3 unified tree */
html.boksa-theme .boksa-article-content .rm-chip--a,
html.boksa-theme .boksa-article-content .rm-chip--d,
html.boksa-theme .boksa-article-content .rm-chip--m {
	padding-right: 1.65rem;
}
html.boksa-theme .boksa-article-content .rm-chip--a::after,
html.boksa-theme .boksa-article-content .rm-chip--d::after,
html.boksa-theme .boksa-article-content .rm-chip--m::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.6rem;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	transform: translateY(-50%);
}
html.boksa-theme .boksa-article-content .rm-chip--a::after { background: rgb(var(--rm-tag-a-rgb)); }
html.boksa-theme .boksa-article-content .rm-chip--d::after { background: rgb(var(--rm-tag-d-rgb)); }
html.boksa-theme .boksa-article-content .rm-chip--m::after { background: rgb(var(--rm-tag-m-rgb)); }

html.boksa-theme .boksa-article-content .rm-tag-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: 0.78rem; color: rgb(var(--boksa-on-surface-variant-rgb)); margin: 0.75rem 0 1.75rem; padding: 0; list-style: none; }
html.boksa-theme .boksa-article-content .rm-tag-legend li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
html.boksa-theme .boksa-article-content .rm-tag-legend .rm-tag { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
html.boksa-theme .boksa-article-content .rm-tag-legend .rm-tag--a { background: rgb(var(--rm-tag-a-rgb)); }
html.boksa-theme .boksa-article-content .rm-tag-legend .rm-tag--d { background: rgb(var(--rm-tag-d-rgb)); }
html.boksa-theme .boksa-article-content .rm-tag-legend .rm-tag--m { background: rgb(var(--rm-tag-m-rgb)); }
html.boksa-theme .boksa-article-content .rm-tag-legend .rm-tag--core { background: rgb(var(--rm-node-bg-rgb)); border: 1.5px solid rgb(var(--rm-node-border-rgb)); border-radius: 0.2rem; }
html.boksa-theme .boksa-article-content .rm-tag-legend .rm-tag--adv { background: rgb(var(--rm-adv-bg-rgb)); border: 1.5px solid rgb(var(--rm-adv-border-rgb)); border-radius: 0.2rem; }

/* unified tree (Tier 3): a single trunk that forks into parallel branches and merges back */
html.boksa-theme .boksa-article-content .rm-flow { margin: 1.5rem 0 0; }
html.boksa-theme .boksa-article-content .rm-fork-stem {
	width: 2px;
	height: 1.35rem;
	background: rgb(var(--boksa-outline-rgb) / 0.35);
	margin: 0 auto;
}
html.boksa-theme .boksa-article-content .rm-fork {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 2rem;
	margin: 0;
}
html.boksa-theme .boksa-article-content .rm-fork::before,
html.boksa-theme .boksa-article-content .rm-fork::after {
	content: "";
	position: absolute;
	left: 25%;
	right: 25%;
	height: 2px;
	background: rgb(var(--boksa-outline-rgb) / 0.35);
}
html.boksa-theme .boksa-article-content .rm-fork::before { top: 0; }
html.boksa-theme .boksa-article-content .rm-fork::after { bottom: 0; }
html.boksa-theme .boksa-article-content .rm-fork__branch {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: 1.1rem 0;
}
html.boksa-theme .boksa-article-content .rm-fork__branch::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgb(var(--boksa-outline-rgb) / 0.35);
	transform: translateX(-50%);
	z-index: 0;
}
html.boksa-theme .boksa-article-content .rm-fork__branch > * { position: relative; z-index: 1; }
html.boksa-theme .boksa-article-content .rm-fork__branch > .rm-fork {
	align-self: stretch;
	width: 100%;
}
html.boksa-theme .boksa-article-content .rm-fork__label {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(var(--boksa-on-surface-variant-rgb));
}

/* side-spur: a dead-end branch off a single node, used only for advanced/deepening topics.
   The connector and chain are positioned directly off the trunk <li> (no wrapper div —
   md_in_html mis-parses list markup nested three levels deep in raw-HTML blocks). */
html.boksa-theme .boksa-article-content .rm-spur__connector {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	width: 1.75rem;
	height: 2px;
	background: rgb(var(--boksa-outline-rgb) / 0.35);
	z-index: 1;
}
html.boksa-theme .boksa-article-content .rm-spur__connector--left {
	left: auto;
	right: 100%;
}
html.boksa-theme .boksa-article-content .rm-spur__chain {
	position: absolute;
	left: calc(100% + 1.75rem);
	top: 50%;
	transform: translateY(-50%);
	width: max-content;
	max-width: 12rem;
	z-index: 1;
}
html.boksa-theme .boksa-article-content .rm-spur__chain--left {
	left: auto;
	right: calc(100% + 1.75rem);
}
/* downward variant: used where a node sits in a narrow, off-centre fork branch and a
   sideways spur would clip past the article edge regardless of viewport width. Shaped
   as an elbow (down, then sideways) rather than a straight drop, so it reads as a
   branch off the node instead of a continuation of the trunk/branch spine below it. */
html.boksa-theme .boksa-article-content .rm-spur__connector--down {
	left: auto;
	right: 66%;
	top: 100%;
	transform: none;
	width: 1.5rem;
	height: 4.0rem;
	background: none;
	border: none;
	border-right: 2px solid rgb(var(--boksa-outline-rgb) / 0.35);
	border-bottom: 2px solid rgb(var(--boksa-outline-rgb) / 0.35);
	border-bottom-right-radius: 10px;
}

html.boksa-theme .boksa-article-content .rm-spur__chain--down {
	left: auto;
	right: calc(66% + 1.5rem);
	top: calc(100% + 4.0rem);
	transform: translateY(-50%);
	max-width: 11rem;
}
/* deep variant: for a node inside a nested fork (branch-within-a-branch), where the
   sibling branch sits at the same row height, so the elbow needs to drop well below
   it before jogging sideways. */
html.boksa-theme .boksa-article-content .rm-spur__connector--deep {
	height: 6.5rem;
}
html.boksa-theme .boksa-article-content .rm-spur__chain--deep {
	top: calc(100% + 6.5rem);
}
/* mirror of --down, jogging right instead of left — for nodes in the left-hand branch
   of a fork, where jogging left would run off the article's left edge instead. */
html.boksa-theme .boksa-article-content .rm-spur__connector--down-right {
	left: 66%;
	right: auto;
	top: 100%;
	transform: none;
	width: 1.5rem;
	height: 4.0rem;
	background: none;
	border: none;
	border-left: 2px solid rgb(var(--boksa-outline-rgb) / 0.35);
	border-bottom: 2px solid rgb(var(--boksa-outline-rgb) / 0.35);
	border-bottom-left-radius: 10px;
}
html.boksa-theme .boksa-article-content .rm-spur__chain--down-right {
	left: calc(66% + 1.5rem);
	right: auto;
	top: calc(100% + 4.0rem);
	transform: translateY(-50%);
	max-width: 11rem;
}
/* centered straight drop: for a fork branch that is the only one on its side (so there's
   no "outward" direction with room), sitting between two neighbours that leave enough
   clearance in the middle — used where an elbow in either direction would run into the
   article edge on one side or the opposite branch's own spur on the other. Offset left
   of dead-centre so it doesn't read as a continuation of the branch's own spine. */
html.boksa-theme .boksa-article-content .rm-spur__connector--down-center {
	left: calc(50% - 3.5rem);
	top: 100%;
	transform: translateX(-50%);
	width: 2px;
	height: 5rem;
	background: rgb(var(--boksa-outline-rgb) / 0.35);
	border: none;
}
html.boksa-theme .boksa-article-content .rm-spur__chain--down-center {
	left: calc(50% - 3.5rem);
	top: calc(100% + 5rem);
	transform: translate(-50%, -50%);
	max-width: 11rem;
}
/* short version: for a single-item spur that doesn't need much drop to clear its own
   source node (e.g. a core stack pick sitting alongside a taller advanced spur on the
   same node). */
html.boksa-theme .boksa-article-content .rm-spur__connector--down-center-sm {
	left: calc(50% - 3.5rem);
	top: 100%;
	transform: translateX(-50%);
	width: 2px;
	height: 2.5rem;
	background: rgb(var(--boksa-outline-rgb) / 0.35);
	border: none;
}
html.boksa-theme .boksa-article-content .rm-spur__chain--down-center-sm {
	left: calc(50% - 2.5rem);
	top: calc(100% + 2.5rem);
	transform: translate(-50%, -50%);
	max-width: 11rem;
}
/* mirror of --down-center-sm, offset right of centre instead of left. */
html.boksa-theme .boksa-article-content .rm-spur__connector--down-center-sm-right {
	left: calc(50% + 2.5rem);
	top: 100%;
	transform: translateX(-50%);
	width: 2px;
	height: 2.5rem;
	background: rgb(var(--boksa-outline-rgb) / 0.35);
	border: none;
}
html.boksa-theme .boksa-article-content .rm-spur__chain--down-center-sm-right {
	left: calc(50% + 2.5rem);
	top: calc(100% + 2.5rem);
	transform: translate(-50%, -50%);
	max-width: 11rem;
}

/* the connecting spine between tiers, with a node dot */
html.boksa-theme .boksa-article-content .rm-connector {
	width: 3px;
	height: 2.25rem;
	background: rgb(var(--boksa-primary-rgb));
	margin: 0 auto;
	position: relative;
}
html.boksa-theme .boksa-article-content .rm-connector::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgb(var(--boksa-primary-rgb));
	transform: translateX(-50%);
}
html.boksa-theme .boksa-article-content .rm-connector::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid rgb(var(--boksa-primary-rgb));
}

/* checkpoint milestone pill, roadmap.sh-style dark badge on the spine */
html.boksa-theme .boksa-article-content .rm-checkpoint {
	display: flex;
	justify-content: center;
	margin: 0;
}
html.boksa-theme .boksa-article-content .rm-checkpoint span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgb(var(--boksa-inverse-surface-rgb));
	color: rgb(var(--boksa-inverse-on-surface-rgb));
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.45rem 1.1rem;
	border-radius: 999px;
	box-shadow: var(--boksa-shadow-sm);
}

/* stack branch: fan-out / fan-in around the stack cards */
html.boksa-theme .boksa-article-content .rm-branch-scroll { overflow-x: auto; padding-bottom: 0.25rem; }
html.boksa-theme .boksa-article-content .rm-branch-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 2rem 0;
	list-style: none;
}
html.boksa-theme .boksa-article-content .rm-branch-grid--2 {
	grid-template-columns: repeat(2, minmax(180px, 1fr));
	max-width: 32rem;
}
html.boksa-theme .boksa-article-content .rm-branch-grid--2::before,
html.boksa-theme .boksa-article-content .rm-branch-grid--2::after {
	left: 25%;
	right: 25%;
}
html.boksa-theme .boksa-article-content .rm-branch-grid::before,
html.boksa-theme .boksa-article-content .rm-branch-grid::after {
	content: "";
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	height: 3px;
	background: rgb(var(--boksa-primary-rgb));
}
html.boksa-theme .boksa-article-content .rm-branch-grid::before { top: 2rem; }
html.boksa-theme .boksa-article-content .rm-branch-grid::after { bottom: 2rem; }
html.boksa-theme .boksa-article-content .rm-branch-grid > li {
	position: relative;
	margin: 0;
}
html.boksa-theme .boksa-article-content .rm-branch-grid > li::before,
html.boksa-theme .boksa-article-content .rm-branch-grid > li::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 3px;
	height: 2rem;
	background: rgb(var(--boksa-primary-rgb));
	transform: translateX(-50%);
}
html.boksa-theme .boksa-article-content .rm-branch-grid > li::before { top: -2rem; }
html.boksa-theme .boksa-article-content .rm-branch-grid > li::after { bottom: -2rem; }
html.boksa-theme .boksa-article-content .rm-card {
	height: 100%;
	box-sizing: border-box;
	background: rgb(var(--boksa-surface-container-low-rgb));
	border-radius: 0.75rem;
	border-top: 4px solid rgb(var(--boksa-primary-rgb));
	box-shadow: var(--boksa-shadow-sm);
	padding: 1.25rem;
}
html.boksa-theme .boksa-article-content .rm-card__kicker {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(var(--boksa-primary-rgb));
	margin: 0 0 0.35rem;
}
html.boksa-theme .boksa-article-content .rm-card__title {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
	color: rgb(var(--boksa-on-surface-rgb));
	margin-bottom: 0.4rem;
}
html.boksa-theme .boksa-article-content .rm-card__title:hover,
html.boksa-theme .boksa-article-content .rm-card__title:visited {
	color: rgb(var(--boksa-on-surface-rgb));
}
html.boksa-theme .boksa-article-content .rm-card__title:hover { color: rgb(var(--boksa-primary-rgb)); }
html.boksa-theme .boksa-article-content .rm-card p { margin: 0 0 0.6rem; font-size: 0.88rem; color: rgb(var(--boksa-on-surface-variant-rgb)); }
html.boksa-theme .boksa-article-content .rm-card__prereq { font-size: 0.78rem; margin: 0; }
html.boksa-theme .boksa-article-content .rm-card__prereq a { color: rgb(var(--boksa-tertiary-container-rgb)); }

html.boksa-theme .boksa-article-content .rm-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8rem; color: rgb(var(--boksa-on-surface-variant-rgb)); margin: 0.75rem 0 0; padding: 0; list-style: none; }
html.boksa-theme .boksa-article-content .rm-legend li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
html.boksa-theme .boksa-article-content .rm-legend .rm-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 999px; }
html.boksa-theme .boksa-article-content .rm-legend .rm-swatch--chip { background: rgb(var(--rm-node-bg-rgb)); border: 1.5px solid rgb(var(--rm-node-border-rgb)); border-radius: 0.25rem; }
html.boksa-theme .boksa-article-content .rm-legend .rm-swatch--card { background: rgb(var(--boksa-surface-container-low-rgb)); border-top: 3px solid rgb(var(--boksa-primary-rgb)); border-radius: 0.2rem; }
html.boksa-theme .boksa-article-content .rm-legend .rm-swatch--checkpoint { background: rgb(var(--boksa-inverse-surface-rgb)); }