/* ==========================================================================
   Sajha Notes — global styles
   Sections: 1 Tokens · 2 Base · 3 Layout · 4 Buttons & chips · 5 Header & nav
             6 Drawer · 7 Search · 8 Page hero · 9 Cards & grids · 10 Grade finder
             11 Pagination & empty states · 12 Footer · 13 Prose (note content)
             14 Block styles · 15 Plugins · 16 404 · 17 Utilities
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/*
 * Brand navy #063574 (navy-800) is the main colour; lighter tints for
 * backgrounds and highlights, deeper shades for panels and the footer.
 * Neutrals carry a slight navy tint so greys never look out of place.
 *
 * Accent: orange #F68024, taken from the hero illustration and almost the
 * exact complement of the navy (hue 26° vs 214°). Use it sparingly,
 * roughly 60 % neutral / 30 % navy / 10 % orange:
 *   - orange fills always carry navy text (--sn-on-accent, 6.6:1);
 *   - orange text on white uses --sn-accent-ink (#B8530A, 4.9:1).
 * Use the semantic tokens in components, not the scales directly,
 * so dark mode works everywhere.
 */
:root {
	--sn-navy-50: #f3f6fb;
	--sn-navy-100: #e6edf8;
	--sn-navy-200: #c9d8ef;
	--sn-navy-300: #9db8e0;
	--sn-navy-400: #6b93cc;
	--sn-navy-500: #3e6fb3;
	--sn-navy-600: #1d5299;
	--sn-navy-700: #0c4285;
	--sn-navy-800: #063574;
	--sn-navy-900: #04295b;
	--sn-navy-950: #021a3c;

	--sn-orange-50: #fff5ed;
	--sn-orange-100: #feeadb;
	--sn-orange-200: #fcd0ad;
	--sn-orange-300: #fab27b;
	--sn-orange-400: #f8994f;
	--sn-orange-500: #f68024;
	--sn-orange-600: #dd6a12;
	--sn-orange-700: #b8530a;

	--sn-primary: var(--sn-navy-800);
	--sn-primary-hover: var(--sn-navy-700);
	--sn-primary-dark: var(--sn-navy-900);
	--sn-primary-soft: var(--sn-navy-100);
	--sn-primary-tint: var(--sn-navy-200);
	--sn-accent: var(--sn-orange-500);
	--sn-accent-hover: var(--sn-orange-400);
	--sn-accent-soft: var(--sn-orange-100);
	--sn-accent-ink: var(--sn-orange-700);
	--sn-on-accent: var(--sn-navy-950);
	--sn-danger: #B42318; /* Form errors (5.9:1 on white). */
	--sn-danger-soft: #FEF3F2;
	--sn-on-primary: #ffffff;

	--sn-bg: #ffffff;
	--sn-surface: #f5f7fb;
	--sn-surface-2: #ecf0f7;
	--sn-card: #ffffff;
	--sn-border: #e3e8f1;
	--sn-text: #0d1b33;
	--sn-text-soft: #33415c;
	--sn-muted: #5f6b85;
	--sn-link: var(--sn-navy-600);

	--sn-footer-bg: var(--sn-navy-950);
	--sn-footer-text: #b9c8e0;

	/* Dark panels (papers, CTA). */
	--sn-panel: linear-gradient(150deg, var(--sn-navy-950) 0%, var(--sn-navy-800) 55%, var(--sn-navy-700) 100%);
	--sn-panel-glow: rgba(157, 184, 224, 0.18);
	--sn-panel-text: #c9d8ef;

	--sn-font-heading: "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sn-font-body: "Inter", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--sn-radius-sm: 8px;
	--sn-radius: 12px;
	--sn-radius-lg: 18px;
	--sn-shadow-sm: 0 1px 2px rgba(6, 53, 116, 0.06);
	--sn-shadow: 0 1px 2px rgba(6, 53, 116, 0.05), 0 6px 20px rgba(6, 53, 116, 0.07);
	--sn-shadow-lg: 0 12px 40px rgba(6, 53, 116, 0.16);

	--sn-container: 1140px;
	--sn-gutter: clamp(16px, 4vw, 24px);
	--sn-header-h: 72px;
	--sn-section: clamp(44px, 6vw, 76px);

	/* Subjects share the brand colour; the filter `sajhanotes_subjects` can
	   still give a subject its own colour, which then overrides these. */
	--sn-subject: var(--sn-primary);
	--sn-subject-soft: var(--sn-primary-soft);

	color-scheme: light;
}

/* Custom properties resolve where they are declared, so recompute the soft
   tint on any element that sets its own subject colour. */
[style*="--sn-subject"] {
	--sn-subject-soft: color-mix(in srgb, var(--sn-subject) 12%, var(--sn-card));
}

[data-theme="dark"] {
	--sn-primary: var(--sn-navy-300);
	--sn-primary-hover: var(--sn-navy-200);
	--sn-primary-dark: #0a1630;
	--sn-primary-soft: #13274a;
	--sn-primary-tint: #1c3866;
	--sn-accent: var(--sn-orange-500);
	--sn-accent-hover: var(--sn-orange-400);
	--sn-accent-soft: #3a2614;
	--sn-accent-ink: var(--sn-orange-300);
	--sn-on-accent: var(--sn-navy-950);
	--sn-danger: #F97066;
	--sn-danger-soft: #3B1A1A;
	--sn-on-primary: var(--sn-navy-950);

	--sn-bg: #0a1426;
	--sn-surface: #0e1a30;
	--sn-surface-2: #152440;
	--sn-card: #111e36;
	--sn-border: #22335a;
	--sn-text: #e6edf8;
	--sn-text-soft: #c4d1e6;
	--sn-muted: #94a6c4;
	--sn-link: var(--sn-navy-300);

	--sn-footer-bg: #060e1e;
	--sn-panel: linear-gradient(150deg, #0a1630 0%, #0f2550 100%);
	--sn-panel-glow: rgba(107, 147, 204, 0.14);
	--sn-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
	--sn-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
	--sn-subject: var(--sn-primary);
	--sn-subject-soft: var(--sn-primary-soft);

	color-scheme: dark;
}

[data-theme="dark"] [style*="--sn-subject"] {
	--sn-subject-soft: color-mix(in srgb, var(--sn-subject) 22%, var(--sn-card));
}

/* No JS: follow the OS setting. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--sn-primary: var(--sn-navy-300);
		--sn-primary-soft: #13274a;
		--sn-bg: #0a1426;
		--sn-surface: #0e1a30;
		--sn-surface-2: #152440;
		--sn-card: #111e36;
		--sn-border: #22335a;
		--sn-text: #e6edf8;
		--sn-text-soft: #c4d1e6;
		--sn-muted: #94a6c4;
		--sn-link: var(--sn-navy-300);
		--sn-danger: #F97066;
		--sn-danger-soft: #3B1A1A;
		color-scheme: dark;
	}
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--sn-header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--sn-bg);
	color: var(--sn-text);
	font-family: var(--sn-font-body);
	font-size: 1rem;
	line-height: 1.65;
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.sn-lock {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--sn-font-heading);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--sn-text);
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--sn-link);
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--sn-primary-hover);
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--sn-navy-400);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--sn-navy-200);
	color: var(--sn-navy-950);
}

kbd {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--sn-border);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: var(--sn-surface);
	font-family: var(--sn-font-mono);
	font-size: 0.75em;
	line-height: 1.5;
	color: var(--sn-muted);
}

.sn-icon {
	flex-shrink: 0;
	vertical-align: middle;
}

/* 3. Layout ---------------------------------------------------------------- */
.sn-container {
	width: 100%;
	max-width: calc(var(--sn-container) + 2 * var(--sn-gutter));
	margin-inline: auto;
	padding-inline: var(--sn-gutter);
}

.sn-main {
	display: block;
	min-height: 50vh;
	outline: none;
}

.sn-section {
	padding-block: var(--sn-section);
}

.sn-section--tight {
	padding-block: clamp(32px, 5vw, 56px) 0;
}

.sn-section--surface {
	background: var(--sn-surface);
}

.sn-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: clamp(28px, 4vw, 44px);
}

.sn-section__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sn-section__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.sn-section__lead {
	max-width: 560px;
	margin: 10px 0 0;
	color: var(--sn-muted);
	font-size: 1.0625rem;
}

.sn-section__head--center .sn-section__lead {
	margin-inline: auto;
}

.sn-section__intro {
	margin-bottom: 40px;
}

/* Listing pages: intro text at a comfortable reading width. */
.sn-section--listing > .sn-section__intro {
	max-width: 760px;
	margin-bottom: 32px;
	color: var(--sn-text-soft);
	font-size: 1.0625rem;
}

.sn-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	text-decoration: none;
}

.sn-link-arrow .sn-icon {
	transition: transform 0.2s;
}

.sn-link-arrow:hover .sn-icon {
	transform: translateX(3px);
}

/* 4. Buttons & chips ------------------------------------------------------- */
.sn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--sn-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.sn-btn:active {
	transform: translateY(1px);
}

.sn-btn--primary {
	background: var(--sn-primary);
	color: var(--sn-on-primary);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .sn-btn--primary {
	color: var(--sn-on-primary);
}

.sn-btn--primary:hover {
	background: var(--sn-primary-hover);
	color: var(--sn-on-primary);
}

[data-theme="dark"] .sn-btn--primary:hover {
	color: var(--sn-on-primary);
}

/* Orange accent button: the one call to action in a section (mostly on navy
   panels). Always navy text on orange for contrast. */
.sn-btn--accent {
	background: var(--sn-accent);
	color: var(--sn-on-accent);
	box-shadow: 0 6px 18px rgba(246, 128, 36, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sn-btn--accent:hover {
	background: var(--sn-accent-hover);
	color: var(--sn-on-accent);
}

.sn-btn--ghost {
	border-color: var(--sn-border);
	background: transparent;
	color: var(--sn-text);
}

.sn-btn--ghost:hover {
	border-color: var(--sn-primary);
	color: var(--sn-primary);
}

.sn-btn--sm {
	min-height: 38px;
	padding: 7px 16px;
	font-size: 0.875rem;
}

.sn-btn--ghost.sn-btn--sm {
	border-width: 1px;
	background: var(--sn-card);
}

.sn-btn .sn-icon {
	transition: transform 0.2s;
}

.sn-btn:hover .sn-icon--arrow-right {
	transform: translateX(3px);
}

/* White button for dark navy panels. */
.sn-btn--light {
	background: #fff;
	color: var(--sn-navy-800);
	box-shadow: 0 6px 18px rgba(2, 26, 60, 0.3);
}

.sn-btn--light:hover {
	background: var(--sn-navy-50);
	color: var(--sn-navy-900);
}

.sn-btn--ghost-light {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.sn-btn--ghost-light:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.sn-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--sn-text);
	transition: background-color 0.2s, color 0.2s;
}

.sn-icon-btn:hover {
	background: var(--sn-surface-2);
	color: var(--sn-primary);
}

.sn-icon-btn--outline {
	border: 1px solid var(--sn-border);
	background: var(--sn-card);
}

.sn-chip {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sn-subject-soft);
	color: var(--sn-subject);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

[data-theme="dark"] .sn-chip {
	color: color-mix(in srgb, var(--sn-subject) 55%, #fff);
}

a.sn-chip:hover {
	background: var(--sn-subject);
	color: var(--sn-on-primary);
}

.sn-notice {
	padding: 14px 18px;
	border-left: 4px solid var(--sn-primary);
	border-radius: var(--sn-radius-sm);
	background: var(--sn-primary-soft);
}

/* 5. Header & navigation --------------------------------------------------- */
/* Printed instead of the page when printing is off (print-blocked.css). */
.sn-print-notice {
	display: none;
}

.sn-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 10px 16px;
	border-radius: var(--sn-radius-sm);
	background: var(--sn-primary);
	color: var(--sn-on-primary);
	font-weight: 600;
}

.sn-skip-link:focus {
	top: 12px;
	color: #fff;
}

.sn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
	background: color-mix(in srgb, var(--sn-bg) 82%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.admin-bar .sn-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sn-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .sn-header {
		top: 0;
	}
}

.sn-header.is-scrolled {
	border-bottom-color: var(--sn-border);
	background: color-mix(in srgb, var(--sn-bg) 92%, transparent);
	box-shadow: 0 1px 12px rgba(6, 53, 116, 0.04);
}

/* Logo left · menu truly centred · actions right. Equal side columns keep the
   menu centred no matter how wide the logo or the action buttons are. */
.sn-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	min-height: var(--sn-header-h);
}

.sn-header__brand {
	grid-column: 1;
	justify-self: start;
	display: flex; /* No inline line box: the logo centres exactly with the nav. */
	align-items: center;
	min-width: 0;
}

.sn-nav {
	grid-column: 2;
}

.sn-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 6px;
}

.sn-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.sn-logo__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(140deg, var(--sn-navy-600), var(--sn-navy-800));
	color: #fff;
	box-shadow: 0 4px 12px rgba(6, 53, 116, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sn-logo__name {
	font-family: var(--sn-font-heading);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--sn-text);
}

/* Image logos (built-in vector or uploaded). Heights come from Customize >
   Sajha Notes > Logo (printed as custom properties); the width follows. */
.sn-logo--brand,
.sn-logo--image {
	flex-shrink: 0;
	border-radius: 6px;
}

.sn-logo__pic {
	display: block;
	width: auto;
	max-width: none;
	height: var(--sn-logo-h, 52px);
}

.sn-logo__pic--dark,
[data-theme="dark"] .sn-logo__pic--light {
	display: none;
}

[data-theme="dark"] .sn-logo__pic--dark {
	display: block;
}

.sn-footer .sn-logo__pic {
	height: var(--sn-logo-h-footer, 52px);
}

/* Phones: header and menu drawer. */
@media (max-width: 560px) {
	.sn-header .sn-logo__pic,
	.sn-drawer .sn-logo__pic {
		height: var(--sn-logo-h-sm, 40px);
	}
}

.sn-header__search {
	gap: 10px;
	height: 40px;
	padding-inline: 12px 6px;
	border: 1px solid var(--sn-border);
	background: var(--sn-surface);
	color: var(--sn-muted);
}

.sn-header__search:hover {
	border-color: color-mix(in srgb, var(--sn-primary) 35%, var(--sn-border));
	background: var(--sn-card);
	color: var(--sn-text-soft);
}

.sn-header__search-label {
	min-width: 92px;
	font-size: 0.875rem;
	text-align: left;
}

.sn-theme-toggle__sun {
	display: none;
}

[data-theme="dark"] .sn-theme-toggle__sun {
	display: block;
}

[data-theme="dark"] .sn-theme-toggle__moon {
	display: none;
}

.sn-menu-toggle {
	display: none;
}

/* Desktop nav */
.sn-menu,
.sn-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-menu--header {
	display: flex;
	align-items: center;
	gap: 2px;
}

.sn-menu--header > li {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 999px;
	transition: background-color 0.15s;
}

.sn-menu--header > li:hover {
	background: var(--sn-surface-2);
}

.sn-menu--header a {
	display: block;
	padding: 8px 14px;
	color: var(--sn-text-soft);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s;
}

.sn-menu--header a:hover {
	color: var(--sn-text);
}

.sn-menu--header > .current-menu-item > a,
.sn-menu--header > .current-menu-ancestor > a,
.sn-menu--header > .current_page_item > a {
	color: var(--sn-primary);
	font-weight: 600;
}

/* Current page: a light navy pill ("you are here"); hover: a faint grey one. */
.sn-menu--header > .current-menu-item,
.sn-menu--header > .current-menu-ancestor,
.sn-menu--header > .current_page_item,
.sn-menu--header > .current-menu-item:hover,
.sn-menu--header > .current-menu-ancestor:hover,
.sn-menu--header > .current_page_item:hover {
	background: var(--sn-primary-soft);
}

.sn-menu--header > .current-menu-ancestor > .sn-submenu-toggle {
	color: var(--sn-primary);
}

.sn-menu--header > li.menu-item-has-children > a {
	padding-right: 2px;
}

.sn-submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--sn-muted);
}

.sn-submenu-toggle .sn-icon {
	width: 15px;
	height: 15px;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The chevron flips up while its menu is open, on hover too (not only after
   a click), and back down when it closes. */
.sn-submenu-toggle[aria-expanded="true"] .sn-icon,
.sn-menu--header > li:hover > .sn-submenu-toggle .sn-icon,
.sn-menu--header > li:focus-within > .sn-submenu-toggle .sn-icon {
	transform: rotate(180deg);
}

.sn-menu--header > li.is-dismissed > .sn-submenu-toggle .sn-icon {
	transform: none;
}

.sn-menu--header > li:hover > .sn-submenu-toggle {
	color: var(--sn-text);
}

@media (prefers-reduced-motion: reduce) {
	.sn-submenu-toggle .sn-icon {
		transition: none;
	}
}

.sn-menu--header .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	z-index: 10;
	min-width: 220px;
	padding: 6px;
	border: 1px solid var(--sn-border);
	border-radius: 14px;
	background: var(--sn-card);
	box-shadow: 0 16px 40px rgba(6, 53, 116, 0.12), 0 2px 6px rgba(6, 53, 116, 0.05);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* Hover bridge so the gap above the dropdown doesn't close it. */
.sn-menu--header .sub-menu::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 10px;
}

.sn-menu--header .sub-menu li {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 8px;
}

.sn-menu--header .sub-menu li:hover {
	background: color-mix(in srgb, var(--sn-primary) 7%, var(--sn-card));
}

.sn-menu--header .sub-menu a {
	flex: 1;
	padding: 9px 12px;
	color: var(--sn-text-soft);
	font-weight: 500;
}

.sn-menu--header .sub-menu a:hover {
	color: var(--sn-primary);
}

.sn-menu--header .sub-menu .sn-submenu-toggle .sn-icon {
	transform: rotate(-90deg);
}

/* Third level flies out to the right. */
.sn-menu--header .sub-menu .sub-menu {
	top: -7px;
	left: calc(100% + 6px);
	transform: translateX(4px);
}

.sn-menu--header .sub-menu .sub-menu::before {
	top: 0;
	right: 100%;
	bottom: 0;
	left: auto;
	width: 8px;
	height: auto;
}

.sn-menu--header li:hover > .sub-menu,
.sn-menu--header li:focus-within > .sub-menu,
.sn-menu--header li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.sn-menu--header .sub-menu li:hover > .sub-menu,
.sn-menu--header .sub-menu li:focus-within > .sub-menu,
.sn-menu--header .sub-menu li.is-open > .sub-menu {
	transform: none;
}

/* Closed with Esc: stay hidden despite hover/focus (see navigation.js). */
.sn-menu--header li.is-dismissed > .sub-menu {
	opacity: 0;
	visibility: hidden;
}

/* Mega panel (Notes): one panel, a column per grade, every subject visible
   with its icon. See sajhanotes_mega_menu_classes(). */
/* Centred under the whole menu bar rather than under "Notes", so a wide
   panel (more grades) stays on screen on small laptops too. */
.sn-menu--header {
	position: relative;
}

.sn-menu--header > li.sn-mega {
	position: static;
}

.sn-menu--header .sn-mega > .sub-menu {
	display: grid;
	grid-template-columns: repeat(var(--sn-mega-cols, 4), 176px);
	gap: 4px 6px;
	max-width: calc(100vw - 32px);
	padding: 12px;
}

.sn-mega--cols-1 { --sn-mega-cols: 1; }
.sn-mega--cols-2 { --sn-mega-cols: 2; }
.sn-mega--cols-3 { --sn-mega-cols: 3; }
.sn-mega--cols-4 { --sn-mega-cols: 4; }
.sn-mega--cols-5 { --sn-mega-cols: 5; }

.sn-menu--header .sn-mega .sub-menu .sn-mega__col {
	display: block;
	padding: 4px;
	background: none;
}

/* Grade heading: "GRADE 10" + exam label. */
.sn-mega__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px 10px;
	color: var(--sn-muted);
	font-family: var(--sn-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

a.sn-mega__heading:hover {
	color: var(--sn-primary);
}

.sn-mega__exam {
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
	font-size: 0.625rem;
	letter-spacing: 0.04em;
}

/* An empty grade: a quiet dashed note instead of a blank column. */
.sn-mega__soon {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 4px;
	padding: 10px 12px;
	border: 1px dashed var(--sn-border);
	border-radius: 10px;
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.sn-mega__soon .sn-icon {
	flex-shrink: 0;
}

/* The column's own list: always shown, in place (no fly-out). */
.sn-menu--header .sn-mega .sub-menu .sn-mega__col > .sub-menu,
.sn-menu--header .sn-mega .sub-menu .sn-mega__col:hover > .sub-menu {
	position: static;
	display: grid;
	gap: 6px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: inherit; /* Follow the panel: "visible" would let the hidden panel catch the mouse. */
	transform: none;
	transition: none;
}

.sn-menu--header .sn-mega .sub-menu .sn-mega__col > .sub-menu::before {
	content: none;
}

.sn-menu--header .sn-mega .sub-menu .sn-mega__col li,
.sn-menu--header .sn-mega .sub-menu .sn-mega__col li:hover {
	background: none;
}

/* Subject: icon tile + name. */
.sn-mega__icon {
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
	transition: background-color 0.15s, color 0.15s;
}

/* Each subject is a small bordered card, like the phone menu and the
   homepage's "Find your notes" subjects. */
.sn-menu--header .sn-mega .sn-mega__item > a,
.sn-mega__item-soon {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	line-height: 1.3;
	white-space: normal; /* Long names ("Business Studies") wrap inside the card. */
	padding: 6px 10px 6px 6px;
	border: 1px solid var(--sn-border);
	border-radius: 12px;
	background: var(--sn-card);
	color: var(--sn-text);
	font-weight: 500;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.sn-menu--header .sn-mega .sn-mega__item > a:hover,
.sn-menu--header .sn-mega .sn-mega__item > a:focus-visible {
	border-color: color-mix(in srgb, var(--sn-primary) 35%, var(--sn-border));
	background: color-mix(in srgb, var(--sn-primary) 6%, var(--sn-card));
	color: var(--sn-primary);
}

/* Desktop: the icon fills on hover. Only on devices that really hover, so a
   tap on a phone doesn't leave a stuck hover state behind. */
@media (hover: hover) {
	.sn-mega__item > a:hover .sn-mega__icon {
		background: var(--sn-primary);
		color: var(--sn-on-primary);
	}
}

.sn-mega__item > a:focus-visible .sn-mega__icon {
	background: var(--sn-primary);
	color: var(--sn-on-primary);
}

/* A subject without a page yet: dashed and greyed out, not a link. */
.sn-mega__item-soon {
	border-style: dashed;
	background: none;
	color: var(--sn-muted);
	cursor: default;
}

.sn-mega__item-soon .sn-mega__icon {
	background: var(--sn-surface-2);
	color: var(--sn-muted);
}

.sn-mega__tag {
	margin-left: auto;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--sn-surface-2);
	color: var(--sn-text-soft); /* Small text on the tint: 4.5:1+ on every background preset. */
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Plain links (Extra Notes): a small card along the bottom. */
.sn-menu--header .sn-mega .sub-menu .sn-mega__link {
	order: 1;
	grid-column: 1 / -1;
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--sn-border);
	border-radius: 0;
	background: none;
}

.sn-menu--header .sn-mega .sub-menu .sn-mega__link > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px 8px 8px;
	border-radius: 10px;
	color: var(--sn-text);
	font-weight: 600;
}

.sn-mega__link .sn-mega__icon {
	background: var(--sn-accent-soft);
	color: var(--sn-accent-ink);
}

[data-theme="dark"] .sn-mega__link .sn-mega__icon {
	color: var(--sn-accent);
}

.sn-mega__link-text {
	display: flex;
	flex-direction: column;
}

.sn-mega__link-desc {
	color: var(--sn-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.sn-mega__arrow {
	display: inline-flex;
	margin-left: auto;
	color: var(--sn-muted);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
}

.sn-menu--header .sn-mega .sub-menu .sn-mega__link > a:hover {
	background: color-mix(in srgb, var(--sn-primary) 7%, var(--sn-card));
	color: var(--sn-primary);
}

.sn-mega__link > a:hover .sn-mega__arrow {
	color: var(--sn-primary);
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.sn-mega__arrow,
	.sn-mega__icon {
		transition: none;
	}
}

/* Reading progress (single notes). */
.sn-progress {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
}

.sn-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--sn-navy-800), var(--sn-accent));
	transform: scaleX(0);
	transform-origin: left;
}

@media (max-width: 1180px) {
	.sn-header__search-kbd {
		display: none;
	}

	/* Icon only, but screen readers still hear "Search notes". */
	.sn-header__search-label {
		position: absolute;
		width: 1px;
		min-width: 0;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.sn-header__search {
		width: 40px;
		padding: 0;
	}
}

@media (max-width: 1023px) {
	.sn-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.sn-nav {
		display: none;
	}

	.sn-header__actions {
		grid-column: 2;
	}

	.sn-menu-toggle {
		display: inline-flex;
	}

	:root {
		--sn-header-h: 64px;
	}
}

/* 6. Drawer ---------------------------------------------------------------- */
.sn-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.sn-drawer[hidden] {
	display: none;
}

.sn-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 26, 60, 0.55);
	animation: sn-fade 0.2s ease;
}

.sn-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: min(360px, 88vw);
	padding: 16px 20px 24px;
	overflow-y: auto;
	background: var(--sn-bg);
	box-shadow: var(--sn-shadow-lg);
	animation: sn-slide-in 0.25s ease;
}

.sn-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sn-menu--drawer li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--sn-border);
}

.sn-menu--drawer a {
	flex: 1;
	padding: 12px 4px;
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-weight: 700;
	text-decoration: none;
}

.sn-menu--drawer .sn-submenu-toggle {
	width: 40px;
	height: 40px;
}

.sn-menu--drawer .sub-menu {
	display: none;
	flex-basis: 100%;
	padding-left: 14px;
	border-left: 2px solid var(--sn-primary-soft);
	margin-bottom: 8px;
}

.sn-menu--drawer .sub-menu li:last-child {
	border-bottom: 0;
}

.sn-menu--drawer .sub-menu a {
	font-weight: 600;
	color: var(--sn-text-soft);
}

.sn-menu--drawer li.is-open > .sub-menu {
	display: block;
}

/* Notes in the drawer: grade tabs (navigation.js) over that grade's
   subjects, like "Find your notes" on the homepage. Without JS every grade
   shows, one under another. */
.sn-menu--drawer .sn-mega > .sub-menu {
	padding: 4px 0 12px;
	border-left: 0;
}

.sn-menu--drawer .sn-mega .sub-menu li {
	border-bottom: 0;
}

.sn-menu--drawer .sn-mega__col {
	display: block;
	padding: 4px 0 8px;
}

.sn-menu--drawer .sn-mega > .sub-menu,
.sn-menu--drawer .sn-mega-tabs-item {
	min-width: 0;
}

.sn-menu--drawer .sn-mega__col > .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.sn-menu--drawer .sn-mega__item > a,
.sn-menu--drawer .sn-mega__item-soon {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 8px 10px 8px 8px;
	border: 1px solid var(--sn-border);
	border-radius: 12px;
	background: var(--sn-card);
	color: var(--sn-text);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Phones: no grey iOS tap flash over the card (it made the icon look dull);
   instead a clear pressed state: navy edge, light tint, solid navy icon. */
.sn-menu--drawer a,
.sn-menu--drawer button {
	-webkit-tap-highlight-color: transparent;
}

.sn-menu--drawer .sn-mega__item > a {
	transition: background-color 0.12s, border-color 0.12s;
}

.sn-menu--drawer .sn-mega__item > a:active {
	border-color: var(--sn-primary);
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-menu--drawer .sn-mega__item > a:active .sn-mega__icon {
	background: var(--sn-primary);
	color: #fff;
}

[data-theme="dark"] .sn-menu--drawer .sn-mega__item > a:active {
	color: var(--sn-text); /* Stays bright white, like the other subjects. */
}

[data-theme="dark"] .sn-menu--drawer .sn-mega__item > a:active .sn-mega__icon {
	background: var(--sn-navy-300);
	color: var(--sn-navy-950);
}

.sn-menu--drawer .sn-mega__item-soon {
	border-style: dashed;
	background: none;
	color: var(--sn-muted);
}

/* Chips in a row share one height, even if a name wraps. */
.sn-menu--drawer .sn-mega__col > .sub-menu > li {
	display: flex;
	min-width: 0;
}

.sn-menu--drawer .sn-mega__col > .sub-menu > li > * {
	flex: 1;
}

.sn-menu--drawer .sn-mega__item > a,
.sn-menu--drawer .sn-mega__item-soon {
	min-width: 0;
	line-height: 1.25;
	white-space: normal; /* Long names wrap; chips in a row keep one height. */
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto; /* A word that still can't fit breaks with a hyphen. */
}

.sn-mega__item-soon > span:nth-child(2) {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Not ready yet: the dashed outline and "Soon" say it; no icon, so the
   full name fits even on 320px phones. */
.sn-menu--drawer .sn-mega__item-soon {
	justify-content: space-between;
	padding-left: 12px;
}

.sn-menu--drawer .sn-mega__item-soon .sn-mega__icon {
	display: none;
}

.sn-menu--drawer .sn-mega__item-soon .sn-mega__tag {
	flex-shrink: 0;

	padding: 1px 5px;
	font-size: 0.625rem;
}

.sn-menu--drawer .sn-mega__heading {
	padding: 8px 2px;
}

.sn-menu--drawer .sn-mega__soon {
	margin: 0;
}

.sn-menu--drawer .sn-mega__link > a {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	padding: 10px 12px 10px 8px;
	border-radius: 12px;
	background: var(--sn-surface);
	font-weight: 700;
}

/* Phones: smaller chips so two names ("Mathematics", "Accountancy") fit
   side by side without breaking. */
@media (max-width: 420px) {
	.sn-menu--drawer .sn-mega__col > .sub-menu {
		gap: 6px;
	}

	.sn-menu--drawer .sn-mega__item > a,
	.sn-menu--drawer .sn-mega__item-soon {
		gap: 8px;
		padding: 6px 8px 6px 6px;
		font-size: 0.875rem;
	}

	.sn-menu--drawer .sn-mega__icon {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 340px) {
	.sn-menu--drawer .sn-mega__item > a {
		gap: 6px;
		padding-right: 6px;
	}

	.sn-menu--drawer .sn-mega__item .sn-mega__icon {
		width: 24px;
		height: 24px;
		border-radius: 7px;
	}

	.sn-menu--drawer .sn-mega__item .sn-mega__icon .sn-icon {
		width: 14px;
		height: 14px;
	}
}

/* Grade tabs (added by navigation.js). */
.sn-menu--drawer .sn-mega-tabs-item {
	display: block;
}

.sn-mega-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 12px;
	padding: 4px;
	border: 1px solid var(--sn-border);
	border-radius: 24px;
	background: var(--sn-surface);
}

.sn-mega-tabs__label {
	padding: 0 6px 0 10px;
	color: var(--sn-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sn-mega-tabs__tab {
	flex: 1 0 auto;
	min-height: 38px;
	padding: 0 10px;
	white-space: nowrap;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--sn-muted);
	font-family: var(--sn-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	transition: background-color 0.15s, color 0.15s;
}

.sn-mega-tabs__tab[aria-pressed="true"] {
	background: var(--sn-card);
	color: var(--sn-primary);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.08), 0 2px 8px rgba(6, 53, 116, 0.06);
}

[data-theme="dark"] .sn-mega-tabs__tab[aria-pressed="true"] {
	background: var(--sn-primary-soft);
}

.sn-mega-tabs__tab:focus-visible {
	outline: 2px solid var(--sn-primary);
	outline-offset: 1px;
}

/* With tabs, the tab names the grade; the column heading keeps only the
   exam label. */
.sn-menu--drawer .sn-mega.has-tabs .sn-mega__col[hidden] {
	display: none;
}

/* The tabs name the grade, so the heading is only for screen readers. */
.sn-menu--drawer .sn-mega.has-tabs .sn-mega__heading {
	display: none;
}

.sn-menu--drawer .sn-mega.has-tabs .sn-mega__col.is-active {
	animation: sn-fade 0.2s ease;
}

.sn-drawer__foot {
	margin-top: auto;
}

@keyframes sn-fade {
	from {
		opacity: 0;
	}
}

@keyframes sn-slide-in {
	from {
		transform: translateX(100%);
	}
}

/* 7. Search ---------------------------------------------------------------- */
.sn-search-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: var(--sn-card);
	box-shadow: var(--sn-shadow-sm);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.sn-search-form:focus-within {
	border-color: var(--sn-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sn-primary) 18%, transparent);
}

.sn-search-form__icon {
	display: grid;
	place-items: center;
	padding-left: 10px;
	color: var(--sn-muted);
}

.sn-search-form__input {
	flex: 1;
	color: var(--sn-text); /* Never inherit light text from a dark header. */
	min-width: 0;
	padding: 8px 4px;
	border: 0;
	background: transparent;
	font-size: 1rem;
	outline: none;
}

/* The whole pill shows focus (see :focus-within above), so the text field
   itself must not draw a second ring inside it. */
.sn-search-form__input:focus,
.sn-search-form__input:focus-visible,
.sn-search-dialog__form input:focus,
.sn-search-dialog__form input:focus-visible {
	border: 0;
	outline: none;
	box-shadow: none;
}

.sn-search-form__input::-webkit-search-cancel-button {
	cursor: pointer;
}

.sn-search-form__submit {
	min-height: 42px;
	padding-inline: 20px;
}

.sn-search-form--lg {
	max-width: 620px;
	padding: 8px;
}

.sn-search-form--lg .sn-search-form__input {
	font-size: 1.0625rem;
}

.sn-search-form--lg .sn-search-form__submit {
	min-height: 48px;
	padding-inline: 26px;
}

.sn-search-form--hero {
	max-width: 560px;
	margin-top: 20px;
}

.sn-search-form--compact .sn-search-form__submit {
	display: none;
}

/* Search dialog */
.sn-search-dialog {
	width: min(680px, calc(100vw - 32px));
	max-height: min(640px, calc(100vh - 64px));
	margin: 10vh auto auto;
	padding: 0;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-bg);
	color: var(--sn-text);
	box-shadow: var(--sn-shadow-lg);
}

.sn-search-dialog::backdrop {
	background: rgba(2, 26, 60, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.sn-search-dialog[open] {
	animation: sn-pop 0.18s ease;
}

@keyframes sn-pop {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.98);
	}
}

.sn-search-dialog__panel {
	display: flex;
	flex-direction: column;
	max-height: inherit;
}

.sn-search-dialog__form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 20px;
	border-bottom: 1px solid var(--sn-border);
	color: var(--sn-muted);
}

.sn-search-dialog__form input {
	flex: 1;
	min-width: 0;
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: var(--sn-text);
	font-size: 1.125rem;
	outline: none;
}

.sn-search-dialog__body {
	flex: 1;
	padding: 8px;
	overflow-y: auto;
}

.sn-search-dialog__status {
	margin: 0;
	padding: 8px 12px;
	color: var(--sn-muted);
	font-size: 0.9rem;
}

.sn-search-dialog__status:empty {
	display: none;
}

.sn-search-dialog__results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-search-dialog__results a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px;
	border-radius: var(--sn-radius-sm);
	color: var(--sn-text);
	text-decoration: none;
}

.sn-search-dialog__results a:hover,
.sn-search-dialog__results a:focus,
.sn-search-dialog__results a.is-active {
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
	outline: none;
}

.sn-search-dialog__type {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sn-muted);
}

.sn-search-dialog__hint {
	margin: 0;
	padding: 10px 20px;
	border-top: 1px solid var(--sn-border);
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

/* 8. Page hero (navy masthead for section and plain pages) ------------------ */
.sn-page-hero {
	--sn-hero-pad: clamp(36px, 5.5vw, 64px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Same height on every page: room for breadcrumb, title, a one-line
	   subtitle and the info pills. Content stays anchored at the top, so the
	   title never moves between pages; simpler pages get extra space below.
	   Taller content (a long subtitle, the search form) still grows it. */
	min-height: calc(2 * var(--sn-hero-pad) + 186px);
	padding-block: var(--sn-hero-pad);
	background:
		radial-gradient(45% 120% at 100% 0%, rgba(246, 128, 36, 0.16), transparent 60%),
		radial-gradient(60% 140% at 0% 100%, rgba(157, 184, 224, 0.14), transparent 60%),
		var(--sn-panel);
	color: var(--sn-panel-text);
}

/* Faint dot grid, fading out to the left. */
.sn-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(270deg, #000 10%, transparent 70%);
	mask-image: linear-gradient(270deg, #000 10%, transparent 70%);
	pointer-events: none;
}

/* Oversized outline of the subject icon on the right. */
.sn-page-hero__decor {
	position: absolute;
	top: 50%;
	right: max(-20px, calc(50% - 640px));
	z-index: -1;
	color: rgba(255, 255, 255, 0.07);
	transform: translateY(-50%) rotate(-12deg);
	pointer-events: none;
}

.sn-page-hero__decor .sn-icon {
	stroke-width: 1.25;
}

.sn-page-hero__heading {
	display: flex;
	align-items: center;
	gap: 18px;
}

.sn-page-hero__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(2, 26, 60, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.sn-page-hero__text {
	min-width: 0;
}

.sn-page-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.875rem, 4.2vw, 2.875rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.sn-page-hero__subtitle {
	max-width: 680px;
	margin: 10px 0 0;
	color: var(--sn-panel-text);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* Info pills: count · updated · free. */
.sn-page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.sn-page-hero__meta li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	color: #e6edf8;
	font-size: 0.8125rem;
	font-weight: 500;
}

.sn-page-hero__meta li:first-child {
	font-weight: 600;
}

.sn-page-hero__meta .sn-icon {
	color: var(--sn-orange-300);
}

.sn-page-hero .sn-search-form--hero {
	border-color: transparent;
	box-shadow: 0 10px 30px rgba(2, 26, 60, 0.35);
}

/* Breadcrumbs on the navy masthead. */
.sn-page-hero .sn-breadcrumbs {
	margin-bottom: 18px;
	color: var(--sn-navy-300);
}

.sn-page-hero .sn-breadcrumbs a {
	color: var(--sn-navy-200);
}

.sn-page-hero .sn-breadcrumbs a:hover {
	color: #fff;
}

.sn-page-hero .sn-breadcrumbs [aria-current="page"],
.sn-page-hero .sn-breadcrumbs .last {
	color: #fff;
}

@media (max-width: 640px) {
	/* Phones: breadcrumb, title and pills (subtitles wrap to several lines
	   here, so sizing for them would leave most headers half empty). */
	.sn-page-hero {
		min-height: calc(2 * var(--sn-hero-pad) + 149px);
	}

	.sn-page-hero__icon {
		width: 50px;
		height: 50px;
		border-radius: 15px;
	}

	.sn-page-hero__decor {
		right: -60px;
		opacity: 0.7;
	}

	.sn-page-hero__decor .sn-icon {
		width: 170px;
		height: 170px;
	}
}

/* Breadcrumbs (theme + Rank Math) */
.sn-breadcrumbs {
	margin-bottom: 14px;
	color: var(--sn-muted);
	font-size: 0.875rem;
}

.sn-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-breadcrumbs li + li::before {
	content: "›";
	margin-right: 6px;
}

.sn-breadcrumbs p {
	margin: 0;
}

.sn-breadcrumbs a {
	display: inline-block;
	padding-block: 8px;
	margin-block: -8px;
	color: var(--sn-muted);
	text-decoration: none;
}

.sn-breadcrumbs a:hover {
	color: var(--sn-primary);
	text-decoration: underline;
}

.sn-breadcrumbs .separator {
	margin-inline: 6px;
}

/* 9. Cards & grids --------------------------------------------------------- */
.sn-grid {
	display: grid;
	gap: clamp(16px, 2.2vw, 24px);
}

.sn-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.sn-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

/* Note card: chip, title, two-line excerpt, footer. One accent (the chip)
   carries the subject colour; everything else stays neutral. */
.sn-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 18px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sn-card:hover {
	border-color: color-mix(in srgb, var(--sn-subject) 35%, var(--sn-border));
	box-shadow: 0 12px 32px rgba(6, 53, 116, 0.08);
	transform: translateY(-2px);
}

.sn-card__top {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 26px; /* Titles line up even when a card has no category chip. */
	margin-bottom: 4px;
}

.sn-card__new {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--sn-accent-soft);
	color: var(--sn-accent-ink);
	color: color-mix(in srgb, var(--sn-accent-ink) 82%, #000); /* 5:1 on the tint at this small size. */
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Dark mode: the light orange ink is already high-contrast on the dark tint. */
[data-theme="dark"] .sn-card__new {
	color: var(--sn-accent-ink);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .sn-card__new {
		color: var(--sn-accent-ink);
	}
}

.sn-card__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.015em;
}

.sn-card__title a {
	color: var(--sn-text);
	text-decoration: none;
}

/* Stretched link: whole card is clickable. */
.sn-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sn-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--sn-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.sn-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--sn-border);
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.sn-card__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sn-primary);
	font-weight: 600;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s, transform 0.2s;
}

.sn-card:hover .sn-card__more,
.sn-card:focus-within .sn-card__more {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.sn-card__more {
		opacity: 1;
		transform: none;
	}
}

/* Meta row */
.sn-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	color: var(--sn-muted);
	font-size: 0.875rem;
}

.sn-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Question paper rows */
.sn-paper-list {
	display: grid;
	gap: 10px;
}

.sn-paper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	background: var(--sn-card);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sn-paper:hover {
	border-color: color-mix(in srgb, var(--sn-primary) 40%, var(--sn-border));
	box-shadow: 0 10px 28px rgba(6, 53, 116, 0.07);
}

.sn-paper__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-paper__body {
	flex: 1;
	min-width: 0;
}

.sn-paper__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.sn-paper__title a {
	color: var(--sn-text);
	text-decoration: none;
}

.sn-paper__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sn-paper__meta {
	margin: 3px 0 0;
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.sn-paper__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	color: var(--sn-primary);
	font-size: 0.875rem;
	font-weight: 600;
}

.sn-paper:hover .sn-paper__cta .sn-icon {
	transform: translateX(3px);
}

.sn-paper__cta .sn-icon {
	transition: transform 0.2s;
}

@media (max-width: 560px) {
	.sn-paper__cta {
		display: none;
	}
}

/* Listing toolbar: category tabs, then summary + sort (inc/listing-filters.php) */
.sn-section--listing {
	padding-top: clamp(28px, 4vw, 48px);
}

.sn-filter {
	margin-bottom: 24px;
}

/* Same look as the homepage grade tabs; scrolls sideways when there are many. */
.sn-filter__tabs {
	position: relative; /* offsetLeft of tabs is measured from here (theme.js). */
	display: flex;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	padding: 5px;
	overflow-x: auto;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: var(--sn-surface);
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}

.sn-filter__tabs::-webkit-scrollbar {
	display: none;
}

.sn-filter__tab {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	color: var(--sn-muted);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.sn-filter__tab:hover {
	color: var(--sn-text);
}

.sn-filter__tab[aria-current="page"] {
	background: var(--sn-card);
	color: var(--sn-primary);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.08), 0 2px 8px rgba(6, 53, 116, 0.06);
}

.sn-filter__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--sn-surface-2);
	color: var(--sn-muted);
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sn-filter__tab[aria-current="page"] .sn-filter__count {
	background: var(--sn-primary);
	color: var(--sn-on-primary);
}

.sn-filter__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sn-border);
}

.sn-filter__summary {
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.875rem;
}

.sn-filter__sort {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sn-filter__sort label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.875rem;
	font-weight: 500;
}

.sn-filter__sort select {
	width: auto;
	min-height: 38px;
	padding: 7px 36px 7px 14px;
	border-radius: 999px;
	background: var(--sn-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

@media (max-width: 640px) {
	.sn-filter__tabs {
		width: 100%;
	}
}

/* "+" after a big stat number: lifted to the middle of the digits. */
.sn-stat-plus {
	position: relative;
	top: -0.12em;
	margin-left: 0.02em;
}

/* 10. Grade finder ---------------------------------------------------------- */
.sn-tabs {
	display: none;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 36px;
	padding: 5px;
	overflow-x: auto;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: var(--sn-surface);
	scrollbar-width: none;
}

.sn-js .sn-tabs {
	display: flex;
}

.sn-tabs__tab {
	flex-shrink: 0;
	padding: 9px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--sn-muted);
	font-size: 0.9375rem;
	font-weight: 600;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.sn-tabs__tab:hover {
	color: var(--sn-text);
}

.sn-tabs__tab[aria-selected="true"] {
	background: var(--sn-card);
	color: var(--sn-primary);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.08), 0 2px 8px rgba(6, 53, 116, 0.06);
}

/* Without JS every panel shows, each with its own heading. */
.sn-tabpanel + .sn-tabpanel {
	margin-top: 32px;
}

.sn-tabpanel__title {
	font-size: 1.125rem;
	text-align: center;
}

.sn-js .sn-tabpanel {
	margin-top: 0;
}

.sn-js .sn-tabpanel:not(.is-active) {
	display: none;
}

.sn-js .sn-tabpanel.is-active {
	animation: sn-rise 0.25s ease;
}

@keyframes sn-rise {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.sn-js .sn-tabpanel__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sn-tabpanel:focus-visible {
	outline-offset: 8px;
}

/* Cards stay centred however many subjects a grade has. */
.sn-subject-grid {
	/* Equal-width cards in centred rows: full rows fill the width edge to
	   edge (so every row lines up), and an incomplete last row (a lone card,
	   or two of three) sits in the middle instead of hugging the left.
	   Every card has exactly the same width, worked out from the number of
	   columns (--cols, set below from the space available: at least 240px
	   per card), so a long name never widens its card and shifts a row. */
	--cols: 1;
	--sn-subject-gap: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sn-subject-gap);
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.sn-subject-grid > li {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--sn-subject-gap)) / var(--cols));
	min-width: 0;
	/* Each card adapts to its own width (container queries below), so long
	   names fit at every screen size, not just at a few breakpoints. */
	container-type: inline-size;
}

/* Columns from the panel's width (a 240px minimum per card, 14px gaps). */
.sn-grade-finder .sn-tabpanel {
	container-type: inline-size;
}

@container (min-width: 494px) {
	.sn-subject-grid {
		--cols: 2;
	}
}

@container (min-width: 748px) {
	.sn-subject-grid:not(.sn-subject-grid--two) {
		--cols: 3;
	}
}

/* One or two subjects: a narrower row, so the cards keep a good size. */
.sn-subject-grid--one {
	max-width: 340px;
	--cols: 1 !important;
}

.sn-subject-grid--two {
	max-width: 694px; /* Two 340px cards and the gap. */
}

/* Names wrap between words. Narrow cards make room for long single words
   (container queries below), so words don't break in the middle; a hyphen
   is only a last resort for an unusually long word on a tiny screen. */
.sn-subject-card__name {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word; /* Only when a word cannot fit at all. */
}

/* Narrow cards (≤ 300px, e.g. three per row on laptops): slightly tighter
   padding, icon and name; the arrow stays (from ~260px even
   "Electrochemistry" fits beside it). */
@container (max-width: 300px) {
	.sn-subject-grid .sn-subject-card {
		gap: 12px;
		padding: 14px;
	}

	.sn-subject-grid .sn-subject-card__icon {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.sn-subject-grid .sn-subject-card__name {
		font-size: 1rem;
	}
}

/* Very narrow cards (< 260px, a few in-between widths): the same tile layout
   as on phones (icon on top, the name at full width, the arrow in the
   corner), so long names never break mid-word and the arrow is always there. */
@container (max-width: 259px) {
	.sn-subject-grid .sn-subject-card {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.sn-subject-grid .sn-subject-card__body {
		align-self: stretch;
	}

	/* The corner arrow sits beside the icon, above the name, so the name
	   can use the card's full width. */
	.sn-subject-grid .sn-subject-card__name {
		line-height: 1.25;
	}

	.sn-subject-grid .sn-subject-card__arrow {
		position: absolute;
		top: 16px;
		right: 14px;
	}
}

@media (max-width: 600px) { /* Phone layouts up to 600px: between 560 and 600px, two 240px desktop cards don't fit yet. */
	.sn-tabs {
		width: 100%;
	}

	.sn-tabs__tab {
		flex: 1 0 auto;
		padding-inline: 12px;
	}

	/* Narrow phones (≤ 420px): all four grade tabs fit without the last one
	   ("Grade 12") hiding off the edge; more tabs would still scroll. */
	@media (max-width: 420px) {
		.sn-tabs {
			gap: 2px;
		}

		.sn-tabs__tab {
			padding-inline: 8px;
			font-size: 0.875rem;
		}
	}

	@media (max-width: 350px) {
		.sn-tabs__tab {
			padding-inline: 6px;
			font-size: 0.8125rem;
		}
	}

	/* Phones: up to 4 subjects as a one-column list… */
	.sn-subject-grid {
		--cols: 1;
	}

	/* A grade with 5+ subjects: two columns of compact tiles (icon on top,
	   name and count below, arrow in the corner), so a long list doesn't run
	   past a whole phone screen. Up to 4 subjects keep the roomier list. */
	/* …5 or more as two columns of tiles. */
	.sn-subject-grid--many {
		--cols: 2;
		--sn-subject-gap: 10px;
	}

	.sn-subject-grid--many .sn-subject-card {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 14px;
	}

	.sn-subject-grid--many .sn-subject-card__icon {
		width: 38px;
		height: 38px;
		border-radius: 12px;
	}

	.sn-subject-grid--many .sn-subject-card__icon .sn-icon {
		width: 20px;
		height: 20px;
	}

	/* The text column takes the tile's full width, so a long word wraps
	   (with a hyphen) inside the tile instead of running past its edge. */
	.sn-subject-grid--many .sn-subject-card__body {
		align-self: stretch;
	}

	.sn-subject-grid--many .sn-subject-card__name {
		font-size: 0.9375rem;
		line-height: 1.25;
	}

	.sn-subject-grid--many .sn-subject-card__arrow {
		position: absolute;
		top: 16px;
		right: 14px;
	}

	/* Narrow tiles (the smallest phones): a little less padding and a
	   smaller name, so long subject names fit without breaking words. */
	@container (max-width: 150px) {
		.sn-subject-grid--many .sn-subject-card {
			padding: 12px;
		}
	}

	/* Tile names scale with the tile's width (13–15px), so long words fit
	   on all but the very smallest phones. */
	.sn-subject-grid--many .sn-subject-card__name {
		font-size: clamp(0.8125rem, calc(10.5cqi - 3px), 0.9375rem);
	}
}

.sn-subject-card {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	color: var(--sn-text);
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.sn-subject-card:hover {
	border-color: color-mix(in srgb, var(--sn-subject) 45%, var(--sn-border));
	color: var(--sn-text);
	box-shadow: 0 10px 28px rgba(6, 53, 116, 0.08);
	transform: translateY(-2px);
}

.sn-subject-card__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--sn-subject-soft);
	color: var(--sn-subject);
}

[data-theme="dark"] .sn-subject-card__icon {
	color: color-mix(in srgb, var(--sn-subject) 55%, #fff);
}

.sn-subject-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.sn-subject-card__name {
	font-family: var(--sn-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sn-subject-card__count {
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.sn-subject-card__arrow {
	color: var(--sn-border);
	transition: transform 0.2s, color 0.2s;
}

.sn-subject-card:hover .sn-subject-card__arrow {
	color: var(--sn-subject);
	transform: translateX(3px);
}

/* 11. Pagination & empty states -------------------------------------------- */
.sn-pagination {
	margin-top: 48px;
}

.sn-pagination .nav-links,
.sn-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.sn-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--sn-border);
	border-radius: 10px;
	background: var(--sn-card);
	color: var(--sn-text);
	font-weight: 700;
	text-decoration: none;
}

.sn-pagination .page-numbers:hover {
	border-color: var(--sn-primary);
	color: var(--sn-primary);
}

.sn-pagination .page-numbers.current {
	border-color: var(--sn-primary);
	background: var(--sn-primary);
	color: var(--sn-on-primary);
}

.sn-pagination .page-numbers.dots {
	border: 0;
	background: none;
}

.sn-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 620px;
	margin: 0 auto;
	padding: 48px 24px;
	border: 2px dashed var(--sn-border);
	border-radius: var(--sn-radius-lg);
	color: var(--sn-muted);
	text-align: center;
}

.sn-empty__title {
	margin: 8px 0 0;
	font-size: 1.4rem;
}

.sn-empty--compact {
	max-width: none;
	padding: 32px 24px;
}

.sn-empty--compact p {
	margin: 0;
	font-weight: 600;
}

/* 12. Footer ----------------------------------------------------------------- */
.sn-footer {
	background: var(--sn-footer-bg);
	color: var(--sn-footer-text);
	font-size: 0.9375rem;
}

.sn-footer a {
	color: var(--sn-footer-text);
	text-decoration: none;
}

.sn-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.sn-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-block: 64px 48px;
}

.sn-footer .sn-logo__name {
	color: #fff;
}

.sn-footer .sn-logo__mark {
	background: #fff;
	color: var(--sn-navy-800);
}

.sn-footer__about {
	margin: 16px 0 20px;
	max-width: 320px;
}

/* Contribute prompt under the contact details. */
.sn-footer__contrib {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sn-footer__contrib p {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.sn-footer__contrib .sn-btn {
	gap: 8px;
}

/* One quiet credential line under the about text, on every page. */
.sn-footer__recognition {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin: -6px 0 20px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.sn-footer__recognition .sn-icon {
	flex-shrink: 0;
	color: var(--sn-accent);
}

a.sn-footer__recognition:hover span {
	color: #fff;
	text-decoration: underline;
}

.sn-footer__title {
	margin-bottom: 16px;
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.sn-footer__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sn-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sn-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 20px;
	font-size: 0.875rem;
}

.sn-footer__bottom p {
	margin: 0;
}

.sn-footer__bottom .sn-footer__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0; /* The divider's own margins space the links evenly. */
}

/* Dividers in the bar ("Privacy policy | Terms & conditions", and any "|"
   in the copyright line): one thin, soft line drawn in CSS, so screen
   readers don't announce a "|" and every divider looks the same. */
.sn-footer__sep,
.sn-footer__bottom .sn-footer__list li + li::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin: 0 14px;
	background: currentColor;
	opacity: 0.3;
	vertical-align: -0.1em;
}

.sn-footer__heart {
	color: var(--sn-accent);
	fill: var(--sn-accent);
}

/* Footer bottom bar layouts. theme.js measures the copyright, legal links and
   closing line and sets data-layout. Left-aligned like the columns above;
   the back-to-top button glides up above the bar (theme.js), so the bar
   uses its full width.
   - row:     "© 2026 Sajha Notes | Privacy policy | Terms" on the left,
              "Made with ♥ in Nepal" on the right (tablets, computers; 14px);
   - compact: phones, a two-by-two grid at 13px: copyright left and
              "Made with ♥ in Nepal" right, then Privacy policy left and
              Terms & conditions right.
   While measuring, items keep their natural one-line width. */
.sn-footer__bottom-inner[data-layout="measure"] {
	flex-wrap: nowrap;
}

.sn-footer__bottom-inner[data-layout="measure"] > * {
	flex: none;
	white-space: nowrap;
}

.sn-footer__bottom-inner[data-layout="measure"] .sn-footer__list {
	flex-wrap: nowrap;
}

/* Row */
.sn-footer__bottom-inner[data-layout="row"] {
	flex-wrap: nowrap;
	gap: 0;
}

.sn-footer__bottom-inner[data-layout="row"] .sn-footer__list::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin: 0 14px;
	background: currentColor;
	opacity: 0.3;
}

.sn-footer__bottom-inner[data-layout="row"] .sn-footer__made {
	margin-left: auto;
	padding-left: 24px;
}

/* Compact (phones): two aligned rows, left column and right column.
     © 2026 Sajha Notes        Made with ♥ in Nepal
     Privacy policy              Terms & conditions
   The legal list's items join the grid directly (display: contents). */
.sn-footer__bottom-inner[data-layout="compact"] {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: center;
	gap: 10px 16px;
	padding-block: 18px 22px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__list {
	display: contents;
}

.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__copyright {
	order: 1;
	justify-self: start;
}

.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__made {
	order: 2;
	justify-self: end;
	text-align: right;
}

.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__list li {
	order: 5; /* Any extra legal links follow, in a new row. */
}

.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__list li:nth-child(odd) {
	justify-self: start;
}

.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__list li:nth-child(even) {
	justify-self: end;
	text-align: right;
}

.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__list li:first-child {
	order: 3;
}

.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__list li:nth-child(2) {
	order: 4;
}

/* No dividers in the grid: the columns separate the items. */
.sn-footer__bottom-inner[data-layout="compact"] .sn-footer__list li + li::before {
	content: none;
}

/* Before theme.js has measured (or without JavaScript): the same two
   layouts by screen width. */
@media (min-width: 700px) {
	.sn-footer__bottom-inner:not([data-layout]) {
		flex-wrap: nowrap;
		gap: 0;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__list::before {
		content: "";
		display: inline-block;
		width: 1px;
		height: 0.9em;
		margin: 0 14px;
		background: currentColor;
		opacity: 0.3;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__made {
		margin-left: auto;
		padding-left: 24px;
	}
}

@media (max-width: 699px) {
	.sn-footer__bottom-inner:not([data-layout]) {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-between;
		gap: 10px 16px;
		font-size: 0.8125rem;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__list {
		display: contents;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__copyright {
		order: 1;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__made {
		order: 2;
		justify-self: end;
		text-align: right;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__list li {
		order: 5;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__list li:nth-child(even) {
		justify-self: end;
		text-align: right;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__list li:first-child {
		order: 3;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__list li:nth-child(2) {
		order: 4;
	}

	.sn-footer__bottom-inner:not([data-layout]) .sn-footer__list li + li::before {
		content: none;
	}
}

.sn-footer .sn-widget {
	margin-bottom: 28px;
}

/* Widgets in the footer (classic or block-based) follow the footer style. */
.sn-footer .sn-widget h2,
.sn-footer .sn-widget h3,
.sn-footer .wp-block-heading {
	margin: 0 0 16px;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sn-footer .sn-widget ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-footer .sn-widget li ul {
	margin-top: 10px;
	padding-left: 12px;
}

.sn-footer .wp-block-search__input {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

@media (max-width: 900px) {
	.sn-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.sn-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: 48px 32px;
	}
}

/* Social icons */
.sn-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--sn-border);
	border-radius: 50%;
	color: var(--sn-text-soft);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.sn-social a:hover {
	border-color: var(--sn-primary);
	background: var(--sn-primary);
	color: var(--sn-on-primary);
}

.sn-social--footer a {
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.sn-social--footer a:hover {
	border-color: #fff;
	background: #fff;
	color: var(--sn-navy-800);
	text-decoration: none;
}

.sn-social--inline {
	margin-top: 8px;
}

.sn-social--inline a {
	width: 34px;
	height: 34px;
}

/* Back to top */
.sn-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--sn-primary);
	color: var(--sn-on-primary);
	box-shadow: var(--sn-shadow-lg);
	transition: transform 0.2s, opacity 0.2s;
}

[data-theme="dark"] .sn-back-to-top {
	color: var(--sn-on-primary);
}

.sn-back-to-top:hover {
	transform: translateY(-2px);
}

.sn-back-to-top[hidden] {
	display: none;
}

/* 13. Prose: note & page content ------------------------------------------- */
.sn-prose {
	max-width: 760px;
	color: var(--sn-text-soft);
	font-size: 1.0625rem;
	line-height: 1.75;
	overflow-wrap: break-word;
	/* Last safety net: anything still wider than the note (a pasted embed, a
	   long unbroken string) is cut off at the edge rather than letting the
	   whole page scroll sideways. "clip" keeps sticky elements working. */
	overflow-x: clip;
	overflow-clip-margin: 6px; /* Room for focus rings at the edges. */
}

.sn-prose--wide {
	max-width: none;
}

.sn-prose--full {
	max-width: none;
}

/* Full-width template: constrain regular blocks, let wide/full blocks break out. */
.sn-prose--full > * {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: var(--sn-gutter);
}

.sn-prose--full > .alignwide {
	max-width: calc(var(--sn-container) + 2 * var(--sn-gutter));
}

.sn-prose--full > .alignfull {
	max-width: none;
	padding-inline: 0;
}

.sn-prose > * + * {
	margin-top: 1.1em;
}

.sn-prose > *:first-child {
	margin-top: 0;
}

.sn-prose p,
.sn-prose ul,
.sn-prose ol {
	margin-bottom: 0;
}

.sn-prose h2,
.sn-prose h3,
.sn-prose h4,
.sn-prose h5,
.sn-prose h6 {
	margin-top: 1.8em;
	margin-bottom: 0;
	color: var(--sn-text);
}

.sn-prose h2 {
	font-size: clamp(1.5rem, 3vw, 1.85rem);
}

.sn-prose h3 {
	font-size: 1.4rem;
}

.sn-prose h4 {
	font-size: 1.2rem;
}

/* Note headings by role (inc/toc.php → sajhanotes_heading_roles), so every
   note looks the same whichever heading levels the writer used:
   - topic (.sn-heading-topic): the highest level in the note → the light-blue
     bar with an accent edge (the old notes' H5 look),
   - sub (.sn-heading-sub): the next level → a bold subheading,
   - minor (.sn-heading-minor): anything deeper → a small bold heading.
   Outside notes, H5 and the "Section heading" block style keep the bar. */
.sn-prose .sn-heading-topic,
.sn-prose h5:not(.sn-heading-sub, .sn-heading-minor),
.sn-prose .is-style-sn-section {
	padding: 10px 16px;
	border-left: 4px solid var(--sn-subject, var(--sn-primary));
	border-radius: 0 var(--sn-radius-sm) var(--sn-radius-sm) 0;
	background: var(--sn-primary-soft);
	font-size: 1.25rem;
	line-height: 1.4;
}

.sn-prose .sn-heading-topic {
	margin-top: 2em;
}

.sn-prose > .sn-heading-topic:first-child {
	margin-top: 0;
}

.sn-prose .sn-heading-sub {
	margin-top: 1.6em;
	font-size: 1.2rem;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
}

.sn-prose .sn-heading-minor {
	margin-top: 1.4em;
	font-size: 1.02rem;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
}

.sn-prose h6 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sn-prose a {
	font-weight: 500;
}

.sn-prose strong {
	color: var(--sn-text);
}

.sn-prose ul,
.sn-prose ol {
	padding-left: 1.4em;
}

.sn-prose li + li {
	margin-top: 0.35em;
}

.sn-prose li::marker {
	color: var(--sn-primary);
}

.sn-prose blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--sn-primary-tint);
	color: var(--sn-text);
	font-style: italic;
}

.sn-prose hr {
	border: 0;
	border-top: 1px solid var(--sn-border);
	margin-block: 2.5em;
}

.sn-prose figure {
	margin-inline: 0;
}

.sn-prose figcaption,
.sn-prose .wp-element-caption {
	margin-top: 8px;
	color: var(--sn-muted);
	font-size: 0.875rem;
	text-align: center;
}

.sn-prose img {
	border-radius: var(--sn-radius-sm);
}

/* Most note images are transparent PNGs (reactions, structures, diagrams)
   drawn in black. In dark mode they sit on a white panel, the same white as
   the light-mode page, so they look exactly as they were drawn. In light
   mode nothing is added: they already sit on white. Add the class
   "sn-no-bg" to an image (Block > Advanced > Additional CSS class) to skip
   the panel, e.g. for a photo. */
[data-theme="dark"] .sn-prose img:not(.emoji, .wp-smiley, .avatar, .sn-no-bg, .sn-no-bg *) {
	box-sizing: content-box; /* The padding goes around the image, never shrinks it. */
	max-width: calc(100% - 24px);
	padding: 12px;
	background: #fff;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .sn-prose img:not(.emoji, .wp-smiley, .avatar, .sn-no-bg, .sn-no-bg *) {
		box-sizing: content-box;
		max-width: calc(100% - 24px);
		padding: 12px;
		background: #fff;
	}
}

.sn-prose code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--sn-surface-2);
	font-family: var(--sn-font-mono);
	font-size: 0.9em;
}

/* Code blocks: dark in both site modes (like the dark Code Block Pro themes
   recommended for notes), and long lines scroll sideways instead of wrapping,
   which would break the indentation in Python. */
.sn-prose pre:not(.shiki, .katex-eq > pre),
.sn-prose .wp-block-code {
	padding: 16px 18px;
	overflow-x: auto;
	border: 1px solid var(--sn-navy-900);
	border-radius: var(--sn-radius);
	background: #0f1b2e;
	color: #e3e9f3;
	font-size: 0.875rem;
	line-height: 1.65;
	tab-size: 4;
}

[data-theme="dark"] .sn-prose pre:not(.shiki, .katex-eq > pre),
[data-theme="dark"] .sn-prose .wp-block-code {
	border-color: var(--sn-border);
	background: #070f1d;
}

.sn-prose pre:not(.shiki, .katex-eq > pre) code {
	padding: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	white-space: pre;
	overflow-wrap: normal;
	word-break: normal;
}

/* Code Block Pro: same corners and spacing as the rest of the note. */
.sn-prose .wp-block-kevinbatdorf-code-block-pro {
	overflow: hidden;
	border-radius: var(--sn-radius);
	font-size: 0.875rem;
}

/* Questions and answers: a paragraph that is entirely bold is a question
   (marked .sn-qa-q in inc/template-functions.php). Its answer sits close
   below it; the next question gets more room, so each pair reads as one. */
.sn-prose > .sn-qa-q {
	margin-top: 1.9em;
	color: var(--sn-text);
}

.sn-prose > :is(h2, h3, h4, h5, h6) + .sn-qa-q {
	margin-top: 1.1em;
}

.sn-prose > .sn-qa-q + * {
	margin-top: 0.35em;
}

/* "Show answer" questions: the Details block (pattern "Question with
   hidden answer"). Tap the question to reveal the answer. */
.sn-prose details {
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	background: var(--sn-card);
}

.sn-prose details + details {
	margin-top: 10px;
}

.sn-prose summary {
	position: relative;
	display: block;
	padding: 14px 52px 14px 18px;
	color: var(--sn-text);
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}

.sn-prose summary::-webkit-details-marker {
	display: none;
}

/* Chevron in a small circle on the right: points down, flips when open. */
.sn-prose summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--sn-primary);
	border-bottom: 2px solid var(--sn-primary);
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.sn-prose details[open] > summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.sn-prose summary:hover {
	color: var(--sn-primary);
}

.sn-prose summary:focus-visible {
	outline: 3px solid var(--sn-navy-300);
	outline-offset: 2px;
	border-radius: var(--sn-radius);
}

.sn-prose details[open] > summary {
	border-bottom: 1px solid var(--sn-border);
}

.sn-prose details > :not(summary) {
	margin: 0;
	padding: 12px 18px 0;
}

.sn-prose details > :not(summary):last-child {
	padding-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
	.sn-prose summary::after {
		transition: none;
	}
}

/* Tables: scroll sideways on phones instead of breaking the layout. */
/* Tables. A rounded card with a tinted header row, light row lines and
   alternating rows, in light and dark mode. Most notes have their column
   titles in an ordinary first row; inc/template-functions.php turns that
   row into a real header when the page is shown (sajhanotes_table_headers).
   ".sn-prose .wp-block-table …" outranks WordPress's own table styles
   (3px header line, grey #f0f0f0 stripes even in dark mode). */
.sn-prose .wp-block-table {
	margin-block: 1.6em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	background: var(--sn-card);
}

.sn-prose table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* A table outside a table block (old classic content) gets the frame itself. */
.sn-prose > table {
	border: 1px solid var(--sn-border);
}

.sn-prose th,
.sn-prose td,
.sn-prose .wp-block-table th,
.sn-prose .wp-block-table td {
	padding: 11px 14px;
	border: 0;
	border-right: 1px solid var(--sn-border);
	border-bottom: 1px solid var(--sn-border);
	color: var(--sn-text-soft);
	text-align: left;
	vertical-align: top;
}

.sn-prose tr > :last-child,
.sn-prose .wp-block-table tr > :last-child {
	border-right: 0;
}

.sn-prose tbody tr:last-child > *,
.sn-prose .wp-block-table tbody tr:last-child > * {
	border-bottom: 0;
}

.sn-prose .wp-block-table thead,
.sn-prose .wp-block-table tfoot {
	border: 0;
}

.sn-prose thead th,
.sn-prose thead td,
.sn-prose .wp-block-table thead th,
.sn-prose .wp-block-table thead td {
	border-bottom: 2px solid color-mix(in srgb, var(--sn-primary) 30%, transparent);
	background: var(--sn-primary-soft);
	color: var(--sn-text);
	font-weight: 700;
}

/* Alternating rows, also for WordPress's "Stripes" style (its grey would
   glare in dark mode). */
.sn-prose tbody tr:nth-child(even),
.sn-prose .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--sn-surface) 75%, transparent);
}

.sn-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: transparent;
}

.sn-prose .wp-block-table.is-style-stripes {
	border-bottom: 1px solid var(--sn-border);
}

.sn-prose .wp-block-table.is-style-stripes th,
.sn-prose .wp-block-table.is-style-stripes td {
	border-color: var(--sn-border);
}

@media (hover: hover) {
	.sn-prose tbody tr:hover,
	.sn-prose .wp-block-table tbody tr:hover {
		background: color-mix(in srgb, var(--sn-primary-soft) 60%, transparent);
	}
}

.sn-prose .wp-block-table figcaption,
.sn-prose .wp-block-table .wp-element-caption {
	margin: 0;
	padding: 8px 14px;
	border-top: 1px solid var(--sn-border);
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

/* One-column tables are used as formula / highlight boxes in notes: show
   them like the Formula box, not as a lone bordered cell. */
.sn-prose .wp-block-table.sn-table--box {
	border: 1px solid color-mix(in srgb, var(--sn-primary) 30%, transparent);
	border-left: 5px solid var(--sn-primary);
	background: color-mix(in srgb, var(--sn-primary) 7%, var(--sn-card));
}

.sn-prose .wp-block-table.sn-table--box td,
.sn-prose .wp-block-table.sn-table--box th {
	padding: 12px 16px;
	border: 0;
	background: transparent;
	color: var(--sn-text);
	font-weight: 600;
}

.sn-prose .wp-block-table.sn-table--box tr + tr > * {
	border-top: 1px dashed color-mix(in srgb, var(--sn-primary) 25%, transparent);
}

.sn-prose .wp-block-table.sn-table--box tbody tr:nth-child(even),
.sn-prose .wp-block-table.sn-table--box tbody tr:hover {
	background: transparent;
}

@media (max-width: 480px) {
	.sn-prose table {
		font-size: 0.875rem;
	}

	.sn-prose .wp-block-table th,
	.sn-prose .wp-block-table td {
		padding: 9px 11px;
	}
}

/* Math (KaTeX). Nothing in a note may make the page scroll sideways, and an
   equation is never broken across lines: a too wide one is scaled down or
   scrolled in its own box by single.js (see fitEquations()); these are the
   styles it switches on. */
.sn-prose .katex-display,
.sn-prose .wp-block-katex-display-block {
	max-width: 100%;
	padding-block: 4px;
	overflow-x: auto;
	overflow-y: hidden;
}

.sn-prose .katex {
	font-size: 1.08em;
}

/* Never broken across lines: an inline equation stays in one piece (it
   moves to the next line whole, or onto a line of its own if it's wider than
   the line). */
.sn-prose .katex-eq:not([data-katex-display="true"]) .katex,
.sn-prose .katex-eq:not([data-katex-display="true"]) .katex-html {
	white-space: nowrap;
}

.sn-prose .katex-eq.sn-math-line {
	display: block;
	max-width: 100%;
	margin-block: 0.4em;
}

/* Still too wide (aligned blocks, matrices): full size, scrolling in its own
   box. The browser's scrollbar is hidden (phones hide it anyway until
   touched); the slim bar underneath always shows that it scrolls, how much is
   in view and where. Brighter while scrolling. */
.sn-prose .sn-math-scroll {
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.sn-prose .sn-math-scroll::-webkit-scrollbar {
	display: none;
}

.sn-prose .sn-math-scroll:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--sn-primary);
	outline-offset: 2px;
}

/* Inline equation that has to scroll (already on its own line). */
.sn-prose .katex-eq.sn-math-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	padding-block: 2px;
}

/* Frame around a scrolling box: cuts off the strip where iPhone Safari draws
   its own scroll indicator (see makeScroll() in single.js). */
.sn-scroll-clip {
	display: block;
	max-width: 100%;
	overflow: hidden;
}

/* A scrolling code block: its frame (border, background, corners) is drawn
   on an outer box holding the code and the bar, so the bar sits inside the
   code block, at the bottom (see makeScroll() in single.js). */
.sn-prose .sn-scroll-frame {
	overflow: hidden;
}

.sn-prose .sn-scroll-frame--code {
	border: 1px solid var(--sn-navy-900);
	border-radius: var(--sn-radius);
	background: #0f1b2e;
}

[data-theme="dark"] .sn-prose .sn-scroll-frame--code {
	border-color: var(--sn-border);
	background: #070f1d;
}

/* Inside the dark code box: light bar, inset like the code. */
.sn-prose .sn-scroll-frame .sn-math-bar {
	margin: 2px 18px 14px;
	background: rgba(255, 255, 255, 0.12);
}

.sn-prose .sn-scroll-frame .sn-math-bar > span {
	background: rgba(201, 216, 239, 0.55);
}

.sn-prose .sn-scroll-frame .sn-math-bar.is-active > span,
.sn-prose .sn-scroll-frame .sn-math-bar:hover > span {
	background: var(--sn-navy-200);
}

.sn-math-bar {
	position: relative;
	display: block;
	height: 4px;
	margin: 6px 2px 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sn-text) 10%, transparent);
	cursor: pointer;
}

.sn-math-bar > span {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: inherit;
	background: color-mix(in srgb, var(--sn-primary) 45%, transparent);
	transition: background-color 0.2s ease;
}

.sn-math-bar.is-active > span,
.sn-math-bar:hover > span {
	background: var(--sn-primary);
}

/* Before KaTeX draws (or without JavaScript) the raw formula wraps. */
.sn-prose .katex-eq:not(.katex-rendered),
.sn-prose .katex-eq:not(.katex-rendered) > pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Phones: slightly smaller display equations, so most fit the screen
   without sideways scrolling (KaTeX draws display math at 1.21em). */
@media (max-width: 640px) {
	.sn-prose .katex-display > .katex {
		font-size: 1em;
	}
}

/* Colours picked in the old editor. The theme turns off WordPress's default
   palette (only brand colours are offered now), so map the default colours
   used in existing notes onto brand ones: green/cyan answer highlights become
   the brand link colour (navy, light blue in dark mode). */
.sn-prose .has-vivid-green-cyan-color,
.sn-prose .has-vivid-cyan-blue-color {
	color: var(--sn-link) !important; /* WordPress still prints these with !important. */
}

/* Dark mode: navy text set directly in a note (#063574) would be nearly
   invisible, and buttons with a navy background would vanish into the page,
   so both follow the theme's dark colours. */
[data-theme="dark"] .sn-prose :is([style*="color:#063574"], [style*="color: #063574"], .has-black-color):not(.wp-block-button__link) {
	color: var(--sn-link) !important;
}

[data-theme="dark"] .sn-prose .wp-block-button__link.has-background {
	background: var(--sn-primary) !important;
	color: var(--sn-on-primary) !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .sn-prose :is([style*="color:#063574"], [style*="color: #063574"], .has-black-color):not(.wp-block-button__link) {
		color: var(--sn-link) !important;
	}

	:root:not([data-theme]) .sn-prose .wp-block-button__link.has-background {
		background: var(--sn-primary) !important;
		color: var(--sn-on-primary) !important;
	}
}

/* Embedded frames (e.g. Google Drive PDF previews in paper solutions):
   full width, rounded, and a page-like shape on every screen. */
.sn-prose iframe {
	display: block;
	width: 100%;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
}

.sn-prose iframe:is([src*="drive.google.com"], [data-src*="drive.google.com"], [data-lazy-src*="drive.google.com"]) {
	height: auto;
	aspect-ratio: 4 / 5;
}

/* Empty paragraphs (left over from older editors) make big gaps. */
.sn-prose p:empty {
	display: none;
}

/* Buttons (the Buttons block, in notes and pages). Styles: Fill (default),
   Soft, Outline, Accent; see inc/block-styles.php. */
.sn-prose .wp-block-buttons {
	gap: 10px;
	margin-block: 1.4em;
}

.sn-prose .wp-block-button__link,
.sn-subject-resources .wp-block-button__link {
	--sn-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--sn-primary);
	color: var(--sn-on-primary);
	font-family: var(--sn-font-heading);
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* The icon follows the link: → page, ↗ opens in a new tab, ↓ file to
   download (PDF, Google Drive), ✉ email. Drawn in the text colour. */
:is(.sn-prose, .sn-subject-resources) .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--sn-btn-icon) center / contain no-repeat;
	mask: var(--sn-btn-icon) center / contain no-repeat;
	transition: transform 0.2s;
}

:is(.sn-prose, .sn-subject-resources) .wp-block-button__link[target="_blank"] {
	--sn-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}

:is(.sn-prose, .sn-subject-resources) .wp-block-button__link:is([href$=".pdf" i], [href*="drive.google.com"], [href*="docs.google.com"], [download]) {
	--sn-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M6 11l6 6 6-6M5 20h14'/%3E%3C/svg%3E");
}

:is(.sn-prose, .sn-subject-resources) .wp-block-button__link[href^="mailto:"] {
	--sn-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.sn-prose .wp-block-button__link:hover {
	background: var(--sn-primary-hover);
	color: var(--sn-on-primary);
}

:is(.sn-prose, .sn-subject-resources) .wp-block-button__link:hover::after {
	transform: translateX(2px);
}

.sn-prose .wp-block-button__link:focus-visible {
	outline: 2px solid var(--sn-primary);
	outline-offset: 3px;
}

/* Soft: light tint, for secondary links (syllabus, Lab…). */
.sn-prose .wp-block-button.is-style-sn-soft .wp-block-button__link {
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-prose .wp-block-button.is-style-sn-soft .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--sn-primary) 18%, var(--sn-card));
	color: var(--sn-primary);
}

/* Outline (WordPress's style; the default navy fill used to cover it). */
.sn-prose .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--sn-primary);
	background: transparent;
	color: var(--sn-primary);
}

.sn-prose .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--sn-primary);
	color: var(--sn-on-primary);
}

/* Accent: orange with navy text (6.6:1), for the one thing to notice. */
.sn-prose .wp-block-button.is-style-sn-accent .wp-block-button__link {
	background: var(--sn-accent);
	color: var(--sn-on-accent);
}

.sn-prose .wp-block-button.is-style-sn-accent .wp-block-button__link:hover {
	background: var(--sn-accent-hover);
	color: var(--sn-on-accent);
}

/* Subject hub "Resources" row: the page's opening buttons (syllabus, Lab,
   question papers), lifted above the section strip. Quiet bordered chips,
   whatever button style was picked, so the chapter list stays the focus. */
.sn-subject-resources {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 26px;
}

.sn-subject-resources__label {
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sn-subject-resources__links,
.sn-subject-resources .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.sn-subject-resources .wp-block-button .wp-block-button__link {
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--sn-border);
	border-radius: 10px; /* Not a pill: the section chips below are pills. */
	background: var(--sn-card);
	box-shadow: var(--sn-shadow-sm);
	color: var(--sn-text);
	font-size: 0.9rem;
	font-weight: 700;
}

.sn-subject-resources .wp-block-button__link::after {
	width: 14px;
	height: 14px;
	opacity: 0.6;
}

.sn-subject-resources .wp-block-button .wp-block-button__link:hover {
	border-color: var(--sn-primary);
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-subject-resources .wp-block-button__link:hover::after {
	opacity: 1;
}

.sn-subject-resources .wp-block-button__link:focus-visible {
	outline: 2px solid var(--sn-primary);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.sn-subject-resources__label {
		flex-basis: 100%;
	}

	.sn-subject-resources .wp-block-button .wp-block-button__link {
		min-height: 36px;
		padding: 6px 12px;
		font-size: 0.85rem;
	}
}

/* Old content sometimes centres everything; keep paragraphs readable. */
.sn-prose .has-text-align-center {
	text-align: center;
}

.sn-page-links {
	display: flex;
	gap: 8px;
	margin-top: 32px;
	font-weight: 700;
}

/* WordPress alignment helpers */
.alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

figure.aligncenter {
	text-align: center;
}

.wp-caption {
	max-width: 100%;
}

/* 14. Block styles (inc/block-styles.php) ---------------------------------- */
.is-style-sn-callout-note,
.is-style-sn-callout-tip,
.is-style-sn-callout-important,
.is-style-sn-callout-formula {
	--sn-callout: var(--sn-primary);
	position: relative;
	padding: 12px 16px 12px 18px;
	line-height: 1.7;
	border: 1px solid color-mix(in srgb, var(--sn-callout) 30%, transparent);
	border-left: 5px solid var(--sn-callout);
	border-radius: var(--sn-radius);
	background: color-mix(in srgb, var(--sn-callout) 8%, var(--sn-card));
	color: var(--sn-text);
}

.is-style-sn-callout-note > :first-child,
.is-style-sn-callout-tip > :first-child,
.is-style-sn-callout-important > :first-child,
.is-style-sn-callout-formula > :first-child {
	margin-top: 0;
}

.is-style-sn-callout-note > * + *,
.is-style-sn-callout-tip > * + *,
.is-style-sn-callout-important > * + *,
.is-style-sn-callout-formula > * + * {
	margin-top: 0.6em;
}

/* Callouts use shades of the brand navy and are told apart by their label. */
/* Exam tips get the accent so they stand out while revising. */
.is-style-sn-callout-tip {
	--sn-callout: var(--sn-accent-ink);
	border-color: color-mix(in srgb, var(--sn-accent) 35%, transparent);
	border-left-color: var(--sn-accent);
	background: var(--sn-orange-50);
}

[data-theme="dark"] .is-style-sn-callout-tip {
	background: var(--sn-accent-soft);
}

.is-style-sn-callout-important {
	--sn-callout: var(--sn-navy-950);
	border-width: 1px 1px 1px 6px;
}

.is-style-sn-callout-formula {
	--sn-callout: var(--sn-navy-600);
	text-align: center;
}

[data-theme="dark"] .is-style-sn-callout-note,
[data-theme="dark"] .is-style-sn-callout-important {
	--sn-callout: var(--sn-navy-300);
}

[data-theme="dark"] .is-style-sn-callout-formula {
	--sn-callout: var(--sn-navy-400);
}

/* Box labels. Exam tip, Note and Important show theirs as a small pill at
   the start of the first line (saves a whole line per box); the Formula box,
   whose content is centred, and any box that starts with a list, table or
   equation keep a small label on its own line at the top. */
.is-style-sn-callout-note::before,
.is-style-sn-callout-tip::before,
.is-style-sn-callout-important::before,
.is-style-sn-callout-formula::before,
:is(.is-style-sn-callout-note, .is-style-sn-callout-tip, .is-style-sn-callout-important) > p:first-child::before {
	color: var(--sn-callout);
	font-family: var(--sn-font-heading);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Label on its own line (Formula, or a box not starting with a paragraph). */
.is-style-sn-callout-note::before,
.is-style-sn-callout-tip::before,
.is-style-sn-callout-important::before,
.is-style-sn-callout-formula::before {
	display: block;
	margin-bottom: 2px;
	font-size: 0.72rem;
	line-height: 1.4;
	text-align: left;
}

/* Inline pill at the start of the first paragraph. */
:is(.is-style-sn-callout-note, .is-style-sn-callout-tip, .is-style-sn-callout-important):has(> p:first-child)::before {
	display: none;
}

:is(.is-style-sn-callout-note, .is-style-sn-callout-tip, .is-style-sn-callout-important) > p:first-child::before {
	display: inline-block;
	margin-right: 10px;
	padding: 1px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sn-callout) 14%, transparent);
	font-size: 0.7rem;
	line-height: 1.7;
	vertical-align: 2px;
}

.is-style-sn-callout-note::before,
.is-style-sn-callout-note > p:first-child::before {
	content: "Note";
}

.is-style-sn-callout-tip::before,
.is-style-sn-callout-tip > p:first-child::before {
	content: "Exam tip";
}

.is-style-sn-callout-important::before,
.is-style-sn-callout-important > p:first-child::before {
	content: "Important";
}

.is-style-sn-callout-formula::before {
	content: "Formula";
}

.is-style-sn-card {
	padding: 24px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	box-shadow: var(--sn-shadow);
}

/* Topic grid — syllabus lists on subject pages. */
.sn-prose ul.is-style-sn-topic-list,
ul.is-style-sn-topic-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 12px;
	padding: 0;
	list-style: none;
}

.is-style-sn-topic-list li {
	margin: 0;
}

.is-style-sn-topic-list li + li {
	margin-top: 0;
}

.is-style-sn-topic-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	background: var(--sn-card);
	color: var(--sn-text);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.is-style-sn-topic-list a::after {
	content: "→";
	color: var(--sn-muted);
	transition: transform 0.2s, color 0.2s;
}

.is-style-sn-topic-list a:hover {
	border-color: var(--sn-subject, var(--sn-primary));
	box-shadow: var(--sn-shadow);
	transform: translateY(-2px);
}

.is-style-sn-topic-list a:hover::after {
	color: var(--sn-subject, var(--sn-primary));
	transform: translateX(3px);
}

/* Syllabus unit wrapper (patterns/syllabus-unit.php) */
.sn-unit {
	margin-top: 40px;
}

.sn-unit > h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 0;
	font-size: 1.4rem;
}

.sn-unit > h2::before {
	content: "";
	width: 10px;
	height: 28px;
	border-radius: 4px;
	background: var(--sn-subject, var(--sn-primary));
}

.sn-prose ul.is-style-sn-checklist,
ul.is-style-sn-checklist {
	padding-left: 0;
	list-style: none;
}

.is-style-sn-checklist li {
	position: relative;
	padding-left: 32px;
}

.is-style-sn-checklist li::before {
	content: "✓";
	position: absolute;
	top: 0.1em;
	left: 0;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
	font-size: 0.8rem;
	font-weight: 800;
}

/* "Clean (striped)" table style: no column lines. */
.sn-prose .wp-block-table.is-style-sn-table-clean th,
.sn-prose .wp-block-table.is-style-sn-table-clean td {
	border-right: 0;
}

.wp-block-image.is-style-sn-framed img {
	padding: 12px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	background: #fff;
}

/* Team grid (patterns/team-grid.php) */
.sn-team .wp-block-column {
	padding: 24px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	text-align: center;
}

.sn-team img {
	width: 112px;
	height: 112px;
	object-fit: cover;
	border-radius: 50%;
}

.sn-team h3 {
	margin: 12px 0 0;
	font-size: 1.15rem;
}

.sn-team__role {
	margin-top: 4px !important;
	color: var(--sn-muted);
	font-size: 0.9375rem;
}

/* CTA banner pattern */
/* "Join our community" block (homepage and About page; template-parts/home/cta.php). */
.sn-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: clamp(32px, 5vw, 56px);
	overflow: hidden;
	border-radius: 28px;
	background:
		radial-gradient(50% 120% at 100% 100%, var(--sn-panel-glow), transparent 60%),
		var(--sn-panel);
	color: var(--sn-panel-text);
}

.sn-cta::before {
	content: "";
	position: absolute;
	top: -60%;
	right: -10%;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.03), 0 0 0 120px rgba(255, 255, 255, 0.02);
	pointer-events: none;
}

[data-theme="dark"] .sn-cta {
	border: 1px solid var(--sn-border);
	background:
		radial-gradient(50% 120% at 100% 100%, var(--sn-panel-glow), transparent 60%),
		var(--sn-panel);
}

.sn-cta__text {
	position: relative;
	max-width: 560px;
}

.sn-cta__title {
	margin-bottom: 10px;
	color: #fff;
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.sn-cta__text p {
	margin: 0;
	font-size: 1.0625rem;
}

.sn-cta__actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sn-cta-banner {
	padding: clamp(28px, 5vw, 48px);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-panel);
	color: var(--sn-panel-text);
	text-align: center;
}

.sn-cta-banner h2 {
	margin-top: 0;
	color: #fff;
}

.sn-cta-banner .wp-block-buttons {
	justify-content: center;
}

.sn-cta-banner .wp-block-button__link {
	background: var(--sn-accent);
	color: var(--sn-on-accent);
}

/* Subject hub syllabus (inc/syllabus.php) -------------------------------------
   Overview strip, then one section per unit with numbered chapter rows.
   Two columns on wide screens, read top-to-bottom like a contents page. */
.sn-syllabus-wrap {
	/* Height of the section bar; subject.js keeps it exact, for landing
	   below the bar after a jump. */
	--sn-syllabus-nav-h: 66px;
}

/* The bar's wrapper sticks under the site header while the syllabus is on
   screen (the wrapper ends with the syllabus, so it never follows into
   "Recently added notes"). Its padding is the space above and below the bar;
   when stuck it fills that space with the page background, so the topic list
   disappears cleanly 28px below the bar instead of sliding behind it. */
.sn-syllabus-bar {
	position: sticky;
	top: var(--sn-header-h);
	z-index: 20;
	margin-top: -8px;
	padding: 8px 0 28px;
	pointer-events: none; /* The strip itself never blocks clicks… */
}

.sn-syllabus-bar > * {
	pointer-events: auto; /* …only the bar does. */
}

.sn-syllabus-bar.is-stuck {
	/* Solid, then a short fade so the cut-off line isn't harsh. */
	background: linear-gradient(to bottom, var(--sn-bg) calc(100% - 10px), color-mix(in srgb, var(--sn-bg) 0%, transparent));
}

.admin-bar .sn-syllabus-bar {
	top: calc(var(--sn-header-h) + 32px);
}

@media (max-width: 782px) {
	.admin-bar .sn-syllabus-bar {
		top: calc(var(--sn-header-h) + 46px);
	}
}

.sn-syllabus-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 16px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-surface);
}


/* Tablets: no summary, and chips wrap rather than hide off the edge. */
@media (max-width: 1023px) {
	.sn-syllabus-nav__summary {
		display: none;
	}

	.sn-syllabus-bar:not(.sn-syllabus-bar--scroll) .sn-syllabus-nav__list {
		flex-wrap: wrap;
	}
}

.sn-syllabus-nav__summary {
	flex-shrink: 0;
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

.sn-syllabus-nav__summary strong {
	color: var(--sn-text);
}

.sn-syllabus-nav__list {
	display: flex;
	flex: 1;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto; /* Many sections: chips scroll sideways. */
	scrollbar-width: none;
}

.sn-syllabus-nav__list::-webkit-scrollbar {
	display: none;
}

.sn-syllabus-nav__list li {
	flex-shrink: 0;
}

.sn-syllabus-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 4px 12px;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: var(--sn-card);
	color: var(--sn-text-soft);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.sn-syllabus-nav__list a {
	white-space: nowrap;
}

.sn-syllabus-nav__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sn-syllabus-nav__list a:hover {
	border-color: var(--sn-primary);
	color: var(--sn-primary);
}

/* The section being read (subject.js). */
.sn-syllabus-nav__list a[aria-current] {
	border-color: var(--sn-primary);
	background: var(--sn-primary);
	color: var(--sn-on-primary);
}

.sn-syllabus-nav__list a[aria-current] .sn-syllabus-nav__count {
	color: inherit;
	opacity: 0.75;
}

.sn-syllabus-nav__count {
	color: var(--sn-muted);
	font-size: 0.75rem;
	font-weight: 500;
}

/* Unit sections */
.sn-syllabus .sn-unit {
	margin: 0 0 20px;
	padding: 22px 24px 10px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	/* The page already leaves room for the header (scroll-padding-top,
	   header + 16px); this adds the bar and the 28px strip below it, so a
	   jumped-to section starts exactly where the strip ends. */
	scroll-margin-top: calc(var(--sn-syllabus-nav-h) + 20px);
}

/* "You landed here": after a jump (a section chip, or a link to #unit-…)
   the section briefly lights up, then fades back. Drawn inside the card so it
   never shows past the sticky bar's strip. With JS, subject.js adds .is-flash
   (on chip taps and when the page opens at a section); :target is the
   no-JS fallback. */
html:not(.sn-js) .sn-syllabus .sn-unit:target,
.sn-syllabus .sn-unit.is-flash {
	animation: sn-unit-flash 2.2s ease-out;
}

@keyframes sn-unit-flash {
	0%,
	45% {
		border-color: var(--sn-primary);
		background-color: color-mix(in srgb, var(--sn-primary-soft) 55%, var(--sn-card));
		box-shadow: inset 0 0 0 1px var(--sn-primary);
	}

	100% {
		border-color: var(--sn-border);
		background-color: var(--sn-card);
		box-shadow: inset 0 0 0 1px transparent;
	}
}

.sn-unit__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 16px;
	margin-bottom: 8px;
}

.sn-syllabus .sn-unit__head > h2,
.sn-syllabus .sn-unit__head > h3 {
	display: block;
	margin: 0;
	font-size: 1.3125rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sn-syllabus .sn-unit__head > h2::before {
	content: none;
}

.sn-unit__count {
	color: var(--sn-muted);
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* Chapter rows */
.sn-syllabus ul.is-style-sn-topic-list {
	display: block;
	margin: 0;
	padding: 0;
	column-count: 2;
	column-gap: 40px;
	counter-reset: sn-chapter;
	list-style: none;
}

.sn-syllabus .is-style-sn-topic-list li {
	display: flex;
	align-items: center;
	margin: 0;
	border-bottom: 1px solid var(--sn-border);
	break-inside: avoid;
	counter-increment: sn-chapter;
}

.sn-syllabus .is-style-sn-topic-list li + li {
	margin-top: 0;
}

.sn-syllabus .is-style-sn-topic-list li::before {
	content: counter(sn-chapter, decimal-leading-zero);
	flex-shrink: 0;
	width: 34px;
	color: var(--sn-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sn-syllabus .is-style-sn-topic-list a {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 4px 10px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--sn-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: none;
	transform: none;
}

.sn-syllabus .is-style-sn-topic-list a::after {
	content: "→";
	flex-shrink: 0;
	color: color-mix(in srgb, var(--sn-muted) 55%, transparent);
	transition: color 0.2s, transform 0.2s;
}

.sn-syllabus .is-style-sn-topic-list a:hover {
	color: var(--sn-primary);
	box-shadow: none;
	transform: none;
}

.sn-syllabus .is-style-sn-topic-list a:hover::after {
	color: var(--sn-primary);
	transform: translateX(3px);
}

.sn-syllabus .is-style-sn-topic-list li:hover::before {
	color: var(--sn-primary);
}

/* Chapters without a note yet */
.sn-syllabus .is-style-sn-topic-list li.is-soon {
	min-height: 48px;
	padding: 10px 4px 10px 0;
}

.sn-unit__soon-title {
	flex: 1;
	margin-right: 12px;
	color: var(--sn-muted);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.sn-unit__soon {
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--sn-surface-2);
	color: var(--sn-text-soft); /* Small text on the tint: 4.5:1+ on every background preset. */
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (max-width: 720px) {
	.sn-syllabus ul.is-style-sn-topic-list {
		column-count: 1;
	}

	.sn-syllabus .sn-unit {
		padding: 18px 16px 6px;
	}

	.sn-syllabus-wrap {
		--sn-syllabus-nav-h: 92px;
	}

	/* Phones: every section visible as a 2-column grid, one tap away
	   (the summary is dropped; each section shows its own topic count). */
	.sn-syllabus-nav {
		display: block;
		padding: 8px;
	}

	.sn-syllabus-nav__summary {
		display: none;
	}

	.sn-syllabus-nav__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		overflow: visible;
	}

	.sn-syllabus-nav__list a {
		display: flex;
		justify-content: space-between;
		min-height: 36px;
		padding: 4px 10px 4px 12px;
		font-size: 0.8125rem;
	}

	/* More than 6 sections: a grid would get too tall for a sticky bar, so
	   they stay in one row that scrolls sideways (with a fade hinting at more). */
	.sn-syllabus-bar--scroll .sn-syllabus-nav {
		padding: 8px 0 8px 8px;
	}

	.sn-syllabus-bar--scroll .sn-syllabus-nav__list {
		display: flex;
		padding-right: 8px;
		overflow-x: auto;
		-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
		mask-image: linear-gradient(90deg, #000 85%, transparent);
	}

	.sn-syllabus-bar--scroll .sn-syllabus-nav__list.is-end {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* 15. Plugins -------------------------------------------------------------- */
/* Forms (comment form, WPForms) */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select,
.wpforms-container .wpforms-field input,
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-sm);
	background: var(--sn-card);
	color: var(--sn-text);
	transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--sn-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sn-primary) 18%, transparent);
	outline: none;
}

label,
.wpforms-container .wpforms-field-label {
	display: block;
	margin-bottom: 6px;
	color: var(--sn-text);
	font-weight: 600;
}

.wpforms-container .wpforms-submit,
input[type="submit"] {
	min-height: 46px;
	padding: 10px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--sn-primary);
	color: var(--sn-on-primary);
	font-family: var(--sn-font-heading);
	font-weight: 800;
	cursor: pointer;
}

.wpforms-container .wpforms-submit:hover,
input[type="submit"]:hover {
	background: var(--sn-primary-hover);
}

/* Core search block (widgets) matches the theme search form. */
.wp-block-search__inside-wrapper {
	gap: 8px;
}

.wp-block-search__input {
	border-radius: 999px !important;
	padding-inline: 16px;
}

.wp-block-search__button {
	margin: 0;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--sn-primary);
	color: var(--sn-on-primary);
	font-weight: 600;
}

.wp-block-search__button:hover {
	background: var(--sn-primary-hover);
}

.wp-block-search__label,
.sn-widget .wp-block-heading {
	font-family: var(--sn-font-heading);
	font-size: 1rem;
	font-weight: 700;
}


/* Ads: reserve space to avoid layout shift. */
.sn-ad {
	margin-block: 28px;
	min-height: 120px;
	text-align: center;
}

.sn-ad__label {
	display: block;
	margin-bottom: 4px;
	color: var(--sn-muted);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sn-ad--sidebar {
	min-height: 250px;
}

/* Widgets */
.sn-widget {
	margin-bottom: 24px;
}

.sn-widget__title {
	margin-bottom: 12px;
	font-size: 1rem;
}

.sn-widget ul {
	margin: 0;
	padding-left: 1.1em;
}

/* 16. 404 ------------------------------------------------------------------- */
.sn-404 {
	padding-block: clamp(48px, 8vw, 96px) 0;
	text-align: center;
}

.sn-404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.sn-404__code {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--sn-primary);
	font-family: var(--sn-font-heading);
	font-size: clamp(5rem, 16vw, 9rem);
	font-weight: 800;
	line-height: 1;
}

.sn-404__code span {
	display: grid;
	place-items: center;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-404__title {
	max-width: 640px;
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}

.sn-404__text {
	max-width: 520px;
	color: var(--sn-muted);
}

/* Contact template */
.sn-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 40px;
	align-items: start;
}

.sn-contact__info {
	display: grid;
	gap: 16px;
}

.sn-info-card {
	display: flex;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	background: var(--sn-card);
	color: var(--sn-text);
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

a.sn-info-card:hover {
	border-color: var(--sn-primary);
	box-shadow: var(--sn-shadow);
	color: var(--sn-text);
}

.sn-info-card > span:last-child {
	display: flex;
	flex-direction: column;
}

.sn-info-card span span {
	color: var(--sn-muted);
}

.sn-info-card__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-contact__form {
	padding: clamp(20px, 4vw, 32px);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	box-shadow: var(--sn-shadow);
}

.sn-contact__title {
	margin: 0 0 6px;
	font-size: 1.375rem;
}

.sn-contact__intro {
	margin: 0 0 24px;
	color: var(--sn-muted);
}

.sn-contact__intro p {
	margin: 0;
}

/* Built-in contact form (inc/contact-form.php) */
.sn-form {
	display: grid;
	gap: 20px;
}

.sn-form__field {
	margin: 0;
}

.sn-form__field[hidden] {
	display: none;
}

.sn-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.sn-form__optional {
	color: var(--sn-muted);
	font-weight: 400;
}

.sn-form textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.6;
}

.sn-form ::placeholder {
	color: var(--sn-muted);
	opacity: 0.8;
}

.sn-form__hint {
	display: block;
	margin-top: 6px;
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

/* Topic picker: radio buttons styled as pills. */
.sn-form__topics {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sn-form__topics legend {
	margin-bottom: 10px;
	padding: 0;
	color: var(--sn-text);
	font-weight: 600;
}

.sn-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sn-choice {
	position: relative;
	margin: 0;
	font-weight: 400;
}

.sn-choice input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.sn-choice span {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 7px 15px;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: var(--sn-card);
	color: var(--sn-text-soft);
	font-size: 0.875rem;
	font-weight: 600;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.sn-choice:hover span {
	border-color: var(--sn-primary);
	color: var(--sn-primary);
}

.sn-choice input:checked + span {
	border-color: var(--sn-primary);
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-choice input:focus-visible + span {
	outline: 3px solid var(--sn-navy-300);
	outline-offset: 2px;
}

/* Errors */
.sn-form [aria-invalid="true"] {
	border-color: var(--sn-danger);
}

.sn-form [aria-invalid="true"]:focus {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sn-danger) 18%, transparent);
}

.sn-form__error {
	margin: 6px 0 0;
	color: var(--sn-danger);
	font-size: 0.8125rem;
	font-weight: 600;
}

.sn-form__alert {
	padding: 12px 16px;
	border: 1px solid color-mix(in srgb, var(--sn-danger) 35%, transparent);
	border-radius: var(--sn-radius-sm);
	background: var(--sn-danger-soft);
	color: var(--sn-text);
	font-size: 0.9375rem;
}

.sn-form__alert:focus {
	outline: none;
}

.sn-form__alert strong {
	display: block;
	color: var(--sn-danger);
}

/* Spam trap: off-screen for people, visible to bots. */
.sn-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sn-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.sn-form__submit .sn-btn:disabled {
	opacity: 0.7;
	cursor: progress;
}

.sn-form__privacy {
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

/* "Message sent" */
.sn-form-done {
	padding: 24px 8px;
	text-align: center;
}

.sn-form-done:focus {
	outline: none;
}

.sn-form-done__icon {
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-form-done__title {
	margin: 0 0 8px;
	font-size: 1.375rem;
}

.sn-form-done p {
	max-width: 42ch;
	margin: 0 auto 20px;
	color: var(--sn-muted);
}

@media (max-width: 560px) {
	.sn-form__row {
		grid-template-columns: 1fr;
	}

	.sn-form__submit .sn-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 860px) {
	.sn-contact {
		grid-template-columns: 1fr;
	}
}

/* 17. Utilities ------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
}

.sticky {
	display: block;
}

.bypostauthor {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}