/* Shared page treatment for all module study hubs.
   The module accent is supplied by each page's body element and matches index.html. */

body.module-page {
	--nav-width: 310px;
	--sidebar: 310px;
	--module-sidebar-width: 310px;
	--module-accent-soft: rgba(88, 196, 221, 0.14);
	--module-accent-border: rgba(88, 196, 221, 0.48);
	--module-accent-ink: var(--module-accent);
}

body.module-page a {
	color: var(--module-accent-ink, var(--cyan));
}

body.module-page .progress,
body.module-page .progress-bar {
	background: color-mix(in srgb, var(--module-accent) 18%, transparent);
}

body.module-page .progress span,
body.module-page .progress-bar span,
body.module-page > .progress-bar > span {
	background: var(--module-accent);
}

body.module-page .sidebar,
body.module-page .side-nav {
	width: var(--module-sidebar-width);
	padding: 24px 18px;
	border-right-color: var(--module-accent-border);
}

body.module-page .brand,
body.module-page .nav-brand,
body.module-page .sidebar-header {
	margin: 0 0 24px;
	padding: 0 0 18px;
	border-bottom-color: var(--module-accent-border);
}

body.module-page .brand strong,
body.module-page .nav-brand strong,
body.module-page .sidebar-title,
body.module-page .nav-title {
	display: block;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.2;
}

body.module-page .brand span,
body.module-page .nav-brand span,
body.module-page .sidebar-subtitle,
body.module-page .nav-subtitle {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.35;
}

body.module-page .brand strong,
body.module-page .nav-title,
body.module-page .nav-brand strong,
body.module-page .sidebar-title {
	color: var(--module-accent);
}

body.module-page .nav-group a[aria-current="true"],
body.module-page .nav-link[aria-current="true"] {
	border-color: var(--module-accent-border);
	background: var(--module-accent-soft);
	color: var(--module-accent);
}

body.module-page .nav-group {
	margin: 0 0 26px;
}

body.module-page .nav-group h2 {
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.module-page .nav-group a {
	display: block;
	margin: 3px 0;
	padding: 9px 10px;
	border: 1px solid transparent;
	border-radius: var(--radius, 8px);
	color: var(--text);
	font-size: 0.95rem;
	line-height: 1.25;
}

body.module-page .module-identity {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	padding: 5px 10px;
	border: 1px solid var(--module-accent-border);
	border-radius: 999px;
	background: var(--module-accent-soft);
	color: var(--module-accent);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.module-page .module-identity::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--module-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--module-accent) 16%, transparent);
}

body.module-page .nav-collapsible summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

body.module-page .nav-collapsible summary::-webkit-details-marker {
	display: none;
}

body.module-page .nav-collapsible summary::after {
	content: "▾";
	color: var(--module-accent);
	font-size: 1rem;
	line-height: 1;
}

body.module-page .nav-collapsible:not([open]) summary::after {
	content: "▸";
}

body.module-page .nav-collapsible summary:hover,
body.module-page .nav-collapsible summary:focus-visible {
	color: var(--module-accent);
}

body.module-page main,
body.module-page .main,
body.module-page .page {
	min-height: 100vh;
}

body.module-page .page {
	margin-left: var(--module-sidebar-width);
}

body.module-page main {
	width: auto;
	max-width: none;
	margin-right: 0;
}

body.module-page .page main {
	margin-left: 0;
	padding: 0;
}

body.module-page > main,
body.module-page .main {
	margin-left: var(--module-sidebar-width);
}

body.module-page .main {
	padding: 0;
}

body.module-page .hero {
	background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--module-accent) 18%, transparent), transparent 32%), var(--header);
	border-bottom-color: var(--module-accent-border);
}

body.module-page .hero,
body.module-page .content-section,
body.module-page .section-band,
body.module-page .footer {
	padding-top: 38px;
	padding-bottom: 38px;
	padding-left: clamp(22px, 5vw, 70px);
	padding-right: clamp(22px, 5vw, 70px);
}

body.module-page .content {
	padding: 0;
}

body.module-page main > section,
body.module-page .content > section {
	padding: 38px clamp(22px, 5vw, 70px);
	border-top: 0;
	border-bottom: 1px solid var(--border);
}

body.module-page .section-heading {
	margin: 0 0 22px;
	padding-top: 0;
}

body.module-page .section-heading h2 {
	margin: 0 0 8px;
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	line-height: 1.15;
}

body.module-page .section-heading p {
	max-width: 900px;
	margin: 0;
	color: var(--muted);
}

body.module-page h1 {
	margin: 0 0 10px;
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1.05;
}

body.module-page .hero p {
	max-width: 900px;
	margin: 0 0 22px;
	font-size: 1.08rem;
}

body.module-page .hero-inner,
body.module-page .section-inner,
body.module-page .footer-inner,
body.module-page .content {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

body.module-page .hero h1,
body.module-page .hero .kicker,
body.module-page .hero .eyebrow {
	color: var(--module-accent);
}

body.module-page .button.primary,
body.module-page .button.secondary,
body.module-page .button:hover,
body.module-page .back-link:hover,
body.module-page .actions a:first-child {
	border-color: var(--module-accent-border);
	background: var(--module-accent-soft);
	color: var(--module-accent);
}

body.module-page .legend,
body.module-page .chip-row,
body.module-page .chapter-tools,
body.module-page .actions,
body.module-page .hero-actions {
	gap: 9px;
}

body.module-page .card {
	padding: 20px;
	border-color: var(--border);
	border-radius: var(--radius, 8px);
	background: var(--panel);
}

body.module-page .grid {
	gap: 18px;
}

body.module-page .coming-soon-card {
	max-width: 820px;
	border-top: 3px solid var(--module-accent);
}

body.module-page .coming-soon-label {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	margin-bottom: 12px;
	padding: 4px 9px;
	border: 1px solid var(--module-accent-border);
	border-radius: 999px;
	background: var(--module-accent-soft);
	color: var(--module-accent);
	font-size: 0.82rem;
	font-weight: 800;
	text-transform: uppercase;
}

body.module-page .card:hover {
	border-color: color-mix(in srgb, var(--module-accent) 35%, var(--border));
}

body.module-page .table-wrap,
body.module-page .callout,
body.module-page pre {
	border-radius: var(--radius, 8px);
}

body.module-page th {
	color: var(--module-accent);
}

body.module-page .related-chapters a,
body.module-page .back-link {
	color: var(--module-accent);
	border-color: var(--module-accent-border);
}

body.module-page .chapter,
body.module-page .section,
body.module-page .section-band,
body.module-page .content-section {
	border-color: var(--border);
}

body.module-page .chapter {
	border-top: 0;
}

body.module-page .back-to-top,
body.module-page .back-top,
body.module-page .to-top {
	border-color: var(--module-accent-border);
	color: var(--module-accent);
}

@media (max-width: 980px) {
	body.module-page .main {
	margin-left: 0;
	padding: 0;
	}

	body.module-page > main,
	body.module-page .page {
	margin-left: 0;
	}

	body.module-page .hero {
	padding-top: 42px;
	}

	body.module-page .sidebar,
	body.module-page .side-nav {
	transform: translateX(-105%);
	transition: transform 220ms ease;
	}

	body.module-page body.menu-open .sidebar,
	body.module-page.menu-open .sidebar,
	body.module-page.menu-open .side-nav,
	body.module-page .sidebar.open,
	body.module-page .side-nav.is-open {
	transform: translateX(0);
	}

	body.module-page .overlay,
	body.module-page .nav-overlay {
	background: rgba(0, 0, 0, 0.58);
	}

	body.module-page.menu-open .overlay,
	body.module-page .overlay.open,
	body.module-page .nav-overlay.is-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 140;
	}

	body.module-page .menu-toggle,
	body.module-page .menu-button,
	body.module-page .mobile-menu-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	body.module-page .grid,
	body.module-page .grid.three,
	body.module-page .chapter-grid,
	body.module-page .cheat-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	body.module-page {
		font-size: 16px;
	}

	body.module-page .hero,
	body.module-page .content-section,
	body.module-page .section-band,
	body.module-page .footer {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.module-page main > section,
	body.module-page .content > section {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.module-page .hero-actions .button,
	body.module-page .actions a {
		width: 100%;
	}

	body.module-page .sidebar,
	body.module-page .side-nav {
		width: min(88vw, 310px);
	}
}