/* ==========================================================================
   Sajha Notes — single notes and pages (single.php, comments)
   ========================================================================== */

.sn-single {
	/* Note column 720px (≈ 84 characters per line at 18px, close to the
	   80-character guideline) sharing one edge for text, section bars,
	   tables and callouts. The sidebar (320px fits its short labels) sits
	   flush with the right edge of the header, so both edges line up. */
	display: grid;
	grid-template-columns: minmax(0, 720px) 320px;
	justify-content: space-between;
	gap: 48px;
	align-items: start;
	padding-block: clamp(28px, 4vw, 44px) var(--sn-section);
}

/* Small laptops: a slimmer sidebar leaves the note its reading width. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.sn-single {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 40px;
	}
}

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

/* Post header: light version of the page masthead. */
.sn-post-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(36px, 5.5vw, 64px); /* Same as .sn-page-hero. */
	border-bottom: 1px solid var(--sn-border);
	background:
		radial-gradient(50% 140% at 100% 0%, color-mix(in srgb, var(--sn-accent) 8%, transparent), transparent 60%),
		radial-gradient(60% 140% at 0% 0%, var(--sn-primary-soft), transparent 70%),
		var(--sn-surface);
}

.sn-post-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(color-mix(in srgb, var(--sn-primary) 12%, transparent) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(270deg, #000 5%, transparent 55%);
	mask-image: linear-gradient(270deg, #000 5%, transparent 55%);
	pointer-events: none;
}

.sn-post-hero__inner {
	max-width: 820px;
}

/* Oversized subject icon, as on section pages, in a light navy. */
.sn-post-hero__decor {
	position: absolute;
	top: 50%;
	right: max(-20px, calc(50% - 640px));
	z-index: -1;
	color: color-mix(in srgb, var(--sn-primary) 7%, transparent);
	transform: translateY(-50%) rotate(-12deg);
	pointer-events: none;
}

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

.sn-post-hero .sn-breadcrumbs {
	margin-bottom: 18px; /* Same as .sn-page-hero. */
}

.sn-post-hero .sn-chip {
	margin-bottom: 14px;
}

/* Info row as light pills, mirroring the pills on section pages. */
.sn-post-hero .sn-meta {
	gap: 8px;
}

.sn-post-hero .sn-meta__item {
	padding: 6px 12px;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--sn-card) 75%, transparent);
	color: var(--sn-text-soft);
	font-size: 0.8125rem;
	font-weight: 500;
}

.sn-post-hero .sn-meta__item .sn-icon {
	color: var(--sn-primary);
}

.sn-post-hero .sn-meta__author {
	padding: 4px 14px 4px 4px;
}

.sn-post-hero .sn-meta__avatar {
	width: 30px;
	height: 30px;
	background: var(--sn-primary-soft);
}

.sn-meta__who a {
	display: inline-block;
	padding-block: 8px;
	margin-block: -8px;
}

.sn-meta__who {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

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

@media (max-width: 640px) {
	.sn-post-hero__decor {
		right: -60px;
	}

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

.sn-article {
	min-width: 0;
}

.sn-article__title {
	margin: 0 0 22px; /* Pills sit at the same distance as on section pages. */
	font-size: clamp(1.9rem, 4.4vw, 2.875rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.12;
}

.sn-meta__avatar {
	border-radius: 50%;
}

.sn-meta__author a {
	color: var(--sn-text);
	font-weight: 600;
	text-decoration: none;
}

.sn-article__image {
	max-width: none;
	margin: 0 0 32px;
}

.sn-article__image img {
	display: block;
	width: 100%;
	border-radius: var(--sn-radius-lg);
}

/* Sidebar ----------------------------------------------------------------------
   1. .sn-sidebar__top scrolls with the page (widgets, ad).
   2. .sn-sidebar__sticky pins the reading tools and ALWAYS fits the screen:
      it never scrolls as a whole; only the contents list shrinks and scrolls,
      and it follows the current section by itself (single.js). */

/* The column stretches to the article's height so the pinned stack has room
   to travel (the page grid uses align-items: start). */
.sn-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: stretch;
	min-width: 0;
}

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

.sn-sidebar__sticky {
	--sn-side-top: calc(var(--sn-header-h) + 24px);
	position: sticky;
	top: var(--sn-side-top);
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: calc(100vh - var(--sn-side-top) - 24px);
}

.admin-bar .sn-sidebar__sticky {
	--sn-side-top: calc(var(--sn-header-h) + 56px);
}

/* Cards keep their height; only the contents card may shrink. */
.sn-sidebar__sticky > *,
.sn-sidebar__widgets > * {
	flex-shrink: 0;
	min-width: 0;
}

.sn-sidebar__sticky > .sn-toc--sidebar {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-height: 150px;
}

/* Short screens (small laptops): keep the pinned stack within the screen by
   listing fewer subject notes; "View all" still links to every note. */
@media (max-height: 720px) {
	.sn-side-subject__item:nth-child(n + 4) {
		display: none;
	}

	.sn-sidebar__sticky > .sn-toc--sidebar {
		min-height: 130px;
	}
}

/* Inside the contents card only the list shrinks (never the header or bar). */
.sn-toc--sidebar > :not(.sn-toc__list) {
	flex-shrink: 0;
}

.sn-side-card {
	padding: 18px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
}

.sn-side-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.sn-side-card__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.sn-side-card__sub {
	margin: 2px 0 0;
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.sn-side-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--sn-border);
	color: var(--sn-primary);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

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

.sn-side-card__link:hover .sn-icon {
	transform: translateX(3px);
}

/* Table of contents card */
.sn-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.sn-toc__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
}

.sn-toc__title .sn-icon {
	color: var(--sn-primary);
}

.sn-toc__percent {
	color: var(--sn-muted);
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sn-toc__bar {
	display: block;
	height: 4px;
	margin: 12px 0 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--sn-surface-2);
}

.sn-toc__bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sn-primary), var(--sn-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.15s linear;
}

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

.sn-toc--sidebar .sn-toc__list {
	/* Soft fade at the edges hints that the list continues. */
	-webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 14px), transparent);
	mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 14px), transparent);
	flex: 1 1 auto;
	min-height: 0;
	margin-right: -6px;
	padding-right: 6px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--sn-border) transparent;
}

.sn-toc__item a {
	display: block;
	padding: 7px 10px 7px 12px;
	border-left: 2px solid var(--sn-border);
	color: var(--sn-muted);
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.sn-toc__item--depth-1 a {
	padding-left: 26px;
	font-size: 0.8125rem;
}

.sn-toc__item a:hover {
	color: var(--sn-text);
	border-left-color: var(--sn-primary-tint);
}

.sn-toc__item a.is-active {
	border-left-color: var(--sn-primary);
	border-radius: 0 8px 8px 0;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
	font-weight: 600;
}

.sn-toc--inline {
	max-width: none;
	margin-bottom: 28px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	background: var(--sn-surface);
}

.sn-toc--inline summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	font-family: var(--sn-font-heading);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

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

.sn-toc--inline summary::after {
	content: "+";
	margin-left: auto;
	color: var(--sn-muted);
	font-size: 1.25rem;
}

.sn-toc--inline[open] summary::after {
	content: "−";
}

.sn-toc--inline .sn-toc__list {
	max-height: 50vh;
	padding: 0 18px 16px;
	overflow-y: auto;
}

@media (min-width: 1024px) {
	.sn-toc--inline {
		display: none;
	}
}

/* Subject outline card */
.sn-side-subject__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

/* Reading mode (single.js adds .is-reading to the pinned stack once the
   reader is into the note): the subject card folds down to its title and
   "View all", and the contents card grows into the space, because while
   reading, the contents list is the tool in use. Back near the top of the
   note, the full subject list returns. */
.sn-sidebar__sticky .sn-side-subject__list {
	max-height: 420px;
	transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease, visibility 0s linear 0s;
}

.sn-sidebar__sticky.is-reading .sn-side-subject__list {
	max-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden; /* Out of the tab order while folded. */
	transition: max-height 0.35s ease, opacity 0.2s ease, margin 0.35s ease, visibility 0s linear 0.35s;
}

.sn-sidebar__sticky.is-reading .sn-side-subject .sn-side-card__head {
	margin-bottom: 0;
}

.sn-sidebar__sticky.is-reading .sn-side-subject .sn-side-card__link {
	margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.sn-sidebar__sticky .sn-side-subject__list,
	.sn-sidebar__sticky.is-reading .sn-side-subject__list {
		transition: none;
	}
}

.sn-side-subject__list {
	position: relative;
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Vertical line joining the dots, like a course outline. */
.sn-side-subject__list::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 5px;
	width: 2px;
	border-radius: 2px;
	background: var(--sn-border);
}

.sn-side-subject__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 0;
}

.sn-side-subject__dot {
	position: relative;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-top: 4px;
	border: 2px solid var(--sn-primary-tint);
	border-radius: 50%;
	background: var(--sn-card);
}

.sn-side-subject__item.is-current .sn-side-subject__dot {
	border-color: var(--sn-accent);
	background: var(--sn-accent);
	box-shadow: 0 0 0 3px var(--sn-accent-soft);
}

.sn-side-subject__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sn-side-subject__name {
	display: inline-block;
	padding-block: 6px;
	margin-block: -3px;
	color: var(--sn-text-soft);
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
}

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

.sn-side-subject__item.is-current .sn-side-subject__name {
	color: var(--sn-text);
	font-weight: 600;
}

.sn-side-subject__tag {
	color: var(--sn-accent-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Past papers banner, after the note (navy, orange button) */
.sn-side-papers {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin-top: 32px;
	padding: 22px 24px;
	overflow: hidden;
	border-radius: var(--sn-radius-lg);
	background:
		radial-gradient(60% 140% at 100% 0%, rgba(246, 128, 36, 0.18), transparent 60%),
		var(--sn-panel);
	color: var(--sn-panel-text);
}

.sn-side-papers__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--sn-orange-300);
}

.sn-side-papers__body {
	flex: 1 1 240px;
	min-width: 0;
}

.sn-side-papers__title {
	margin: 0 0 2px;
	color: #fff;
	font-family: var(--sn-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
}

.sn-side-papers__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Phones: the button wraps below the text; full width so it lines up with
   the card, not half under the icon. */
@media (max-width: 560px) {
	.sn-side-papers {
		padding: 20px;
	}

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

/* Widgets in the sidebar match the cards. */
.sn-sidebar__widgets {
	display: grid;
	gap: 16px;
}

.sn-sidebar .sn-widget {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
}

.sn-sidebar .sn-widget h2,
.sn-sidebar .sn-widget h3,
.sn-sidebar .sn-widget .wp-block-heading,
.sn-sidebar .wp-block-search__label {
	display: block;
	margin: 0 0 12px;
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
}

.sn-sidebar .sn-widget ul,
.sn-sidebar .sn-widget ol {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-sidebar .sn-widget li {
	padding: 8px 0;
	border-top: 1px solid var(--sn-border);
	color: var(--sn-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

.sn-sidebar .sn-widget li:first-child {
	padding-top: 0;
	border-top: 0;
}

.sn-sidebar .sn-widget a {
	color: var(--sn-text-soft);
	text-decoration: none;
}

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

/* Core search block styled like the theme's search pill. */
.sn-sidebar .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: var(--sn-surface);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.sn-sidebar .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--sn-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sn-primary) 14%, transparent);
}

.sn-sidebar .wp-block-search__input,
.sn-sidebar .wp-block-search__input:focus {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding: 8px 12px;
	border: 0 !important;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	outline: none;
	font-size: 0.875rem;
}

.sn-sidebar .wp-block-search__button {
	flex-shrink: 0;
	padding: 8px 14px;
	font-size: 0.8125rem;
}

@media (max-width: 1023px) {
	.sn-sidebar .sn-toc--sidebar {
		display: none;
	}

	.sn-sidebar__sticky {
		position: static;
		max-height: none;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.sn-sidebar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

/* The note text: measured line length and an inviting first paragraph. */
.sn-single .sn-prose {
	max-width: none;
	font-size: 1.125rem;
	line-height: 1.8; /* Extra leading keeps longer lines easy to track. */
}

.sn-single .sn-prose > p:first-child {
	color: var(--sn-text);
	font-size: 1.25rem;
	line-height: 1.65;
}

/* Article footer */
.sn-article__footer {
	max-width: none;
	margin-top: 40px;
}

.sn-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding: 14px 0;
	border-top: 1px solid var(--sn-border);
	border-bottom: 1px solid var(--sn-border);
}

.sn-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sn-follow__label,
.sn-share__label {
	margin-right: 4px;
	color: var(--sn-text-soft);
	font-family: var(--sn-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
}

.sn-follow__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Labelled, filled buttons: clearly "visit our page", unlike the round
   outlined Share icons next to them. */
.sn-follow__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 16px 0 13px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

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

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

.sn-share {
	display: flex;
	align-items: center;
	gap: 8px; /* Same space after the label as "Follow us". */
	margin-left: auto;
}

.sn-share__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-share__list li:has([hidden]) {
	display: none;
}

.sn-share__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: var(--sn-card);
	color: var(--sn-text-soft);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* One hover style for every network, in the brand navy. */
.sn-share__btn:hover {
	border-color: var(--sn-primary);
	background: var(--sn-primary);
	color: var(--sn-on-primary);
}

/* System Share button (opens the device's own share menu): navy outline on
   every screen, so it stands out from the single-network icons. */
.sn-share__btn--native {
	border-color: var(--sn-primary);
	color: var(--sn-primary);
}

/* System Share button: an icon on computers (its text is for screen readers
   there), a labelled "Share" pill on phones. */
.sn-share__btn-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* "Link copied!" bubble above the copy button. */
.sn-share__copied:not(:empty) {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--sn-text);
	color: var(--sn-bg);
	font-size: 0.75rem;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}

@media (max-width: 560px) {
	/* Phones: two rows, each with its label on the left and its buttons
	   on the right, never wrapping: "Follow us … Facebook Instagram" and
	   "Share … icons". Buttons line up on the right edge. */
	.sn-follow,
	.sn-share {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin-left: 0;
	}

	.sn-follow__label,
	.sn-share__label {
		flex-shrink: 0;
		margin-right: 0;
		white-space: nowrap;
	}

	.sn-follow__list,
	.sn-share__list {
		flex-wrap: nowrap;
		justify-content: flex-end;
		min-width: 0;
	}

	.sn-follow__btn {
		min-height: 40px;
		padding: 0 14px 0 12px;
		white-space: nowrap;
	}

	.sn-share__btn {
		min-width: 40px;
		height: 40px;
	}

}

/* Small phones (up to 380px): slimmer Follow buttons so the row fits. */
@media (max-width: 380px) {
	.sn-follow__list {
		gap: 6px;
	}

	.sn-follow__btn {
		gap: 5px;
		padding: 0 11px 0 9px;
		font-size: 0.8125rem;
	}

	.sn-follow__label,
	.sn-share__label {
		font-size: 0.875rem;
	}
}

/* Author box */
.sn-author {
	display: flex;
	gap: 18px;
	margin-top: 28px;
	padding: 22px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: linear-gradient(135deg, var(--sn-primary-soft), var(--sn-card) 70%);
}

.sn-author__avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border: 3px solid var(--sn-card);
	border-radius: 50%;
	background: var(--sn-primary-soft);
	box-shadow: 0 4px 14px rgba(6, 53, 116, 0.14);
}

.sn-author__body {
	min-width: 0;
}

.sn-author__eyebrow {
	margin: 0 0 2px;
	color: var(--sn-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sn-author__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
}

.sn-author__credential {
	color: var(--sn-primary);
	font-family: var(--sn-font-body);
	font-size: 0.875rem;
	font-weight: 600;
}

.sn-author__bio {
	margin: 8px 0 0;
	color: var(--sn-text-soft);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.sn-author__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	margin-top: 4px;
	color: var(--sn-primary);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

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

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



/* Previous / next */
.sn-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 32px;
}

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

.sn-post-nav__link:hover {
	border-color: var(--sn-primary);
	box-shadow: var(--sn-shadow);
}

.sn-post-nav__link:only-child {
	grid-column: 1 / -1;
}

.sn-post-nav__link--next {
	grid-column: 2;
	border-color: color-mix(in srgb, var(--sn-primary) 35%, var(--sn-border));
	background: linear-gradient(135deg, var(--sn-card) 40%, var(--sn-primary-soft));
	text-align: right;
}

.sn-post-nav__link--next .sn-post-nav__label {
	color: var(--sn-primary);
}

.sn-post-nav__link--next .sn-post-nav__label {
	justify-content: flex-end;
}

.sn-post-nav__label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--sn-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sn-post-nav__title {
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-weight: 800;
	line-height: 1.35;
}


/* More from this subject --------------------------------------------------------
   Three cards on wide screens (title, 2-line summary, reading time); compact
   rows on phones. */
.sn-more {
	margin-top: 40px;
}

.sn-more__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	margin-bottom: 14px;
}

.sn-more__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sn-more__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sn-primary);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.sn-more__all .sn-icon,
.sn-more__arrow {
	transition: transform 0.2s;
}

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

.sn-more__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-more__list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.sn-more__item:hover {
	border-color: color-mix(in srgb, var(--sn-primary) 35%, var(--sn-border));
	box-shadow: 0 10px 26px rgba(6, 53, 116, 0.08);
	transform: translateY(-2px);
}

.sn-more__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.sn-more__item:hover .sn-more__name {
	color: var(--sn-primary);
}

.sn-more__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--sn-muted);
	font-size: 0.8125rem;
	line-height: 1.55;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.sn-more__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 8px;
	color: var(--sn-muted);
	font-size: 0.75rem;
}

.sn-more__arrow {
	color: var(--sn-primary);
}

.sn-more__item:hover .sn-more__arrow {
	transform: translateX(3px);
}

@media (max-width: 640px) {
	/* Phones: one compact row per note. */
	.sn-more__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		border-top: 1px solid var(--sn-border);
	}

	.sn-more__item {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		padding: 14px 2px;
		border: 0;
		border-bottom: 1px solid var(--sn-border);
		border-radius: 0;
		background: none;
	}

	.sn-more__item:hover {
		box-shadow: none;
		transform: none;
	}

	.sn-more__name {
		flex: 1;
		font-size: 0.9375rem;
	}

	.sn-more__excerpt {
		display: none;
	}

	.sn-more__meta {
		gap: 10px;
		margin: 0;
		padding: 0;
		white-space: nowrap;
	}
}

/* Subject card: sidebar copy on large screens, after-note copy on small ones. */
.sn-side-subject--inline {
	margin-top: 32px;
}

@media (min-width: 1024px) {
	.sn-side-subject--inline {
		display: none;
	}
}

@media (max-width: 1023px) {
	.sn-sidebar__sticky .sn-side-subject--sidebar {
		display: none;
	}

	/* Without a sidebar, the subject card (shown after the note) already lists
	   this subject's notes with "View all", so "More from …" would repeat it. */
	.sn-more {
		display: none;
	}
}

/* Phones: compact author box and side-by-side previous / next. */
@media (max-width: 560px) {
	.sn-author {
		flex-direction: row;
		align-items: flex-start;
		gap: 14px;
		padding: 16px;
	}

	.sn-author__avatar {
		width: 48px;
		height: 48px;
		border-width: 2px;
	}

	.sn-author__bio {
		font-size: 0.875rem;
	}

	.sn-post-nav {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.sn-post-nav__link {
		padding: 12px 14px;
	}

	.sn-post-nav__link--next {
		grid-column: 2;
	}

	.sn-post-nav__label {
		font-size: 0.75rem;
	}

	.sn-post-nav__title {
		display: -webkit-box;
		overflow: hidden;
		font-size: 0.875rem;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/* Questions & discussion ------------------------------------------------------ */
.sn-comments {
	max-width: none;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--sn-border);
}

.sn-comments__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 24px;
}

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

.sn-comments__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sn-comments__count {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--sn-primary);
	color: var(--sn-on-primary);
	font-family: var(--sn-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
}

.sn-comments__intro {
	margin: 4px 0 0;
	color: var(--sn-muted);
	font-size: 0.9375rem;
}

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

/* Comment list ----------------------------------------------------------------
   A plain list with thin dividers between conversations (no cards).
   Each comment: one header row (name · author label · date ··· Reply), then
   the text. Replies sit under the question on a thread line; the author's
   replies get a light tint. Threads longer than 2 replies collapse (single.js). */
.sn-comments__list,
.sn-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-comments__list {
	margin-bottom: 28px;
	border-top: 1px solid var(--sn-border);
}

.sn-comments__list > .sn-comment {
	padding: 18px 0;
	border-bottom: 1px solid var(--sn-border);
}

.sn-comment__body {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

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

/* Replies: indented under the question's avatar on a thread line. */
.sn-comments__list .children {
	display: grid;
	gap: 4px;
	margin: 12px 0 0 15px;
	padding-left: 23px;
	border-left: 2px solid var(--sn-border);
}

.sn-comments__list .children > .sn-comment {
	padding: 6px 0;
}

/* Replies to replies stay on the same level: deeper indents squeeze text. */
.sn-comments__list .children .children {
	margin: 4px 0 0;
	padding-left: 0;
	border-left: 0;
}

/* Initials avatar; a real profile photo (if any) covers it. */
.sn-avatar {
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	overflow: hidden;
	border-radius: 50%;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.sn-avatar--shade-0 { background: var(--sn-navy-600); }
.sn-avatar--shade-1 { background: var(--sn-navy-500); }
.sn-avatar--shade-2 { background: var(--sn-navy-700); }
.sn-avatar--shade-3 { background: var(--sn-navy-900); }

.sn-avatar--author {
	background: var(--sn-navy-800);
}

.sn-avatar__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.sn-comments__list .children .sn-avatar {
	width: 26px;
	height: 26px;
	font-size: 0.625rem;
}

/* One header row. */
.sn-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	min-height: 26px;
}

.sn-comment__author,
.sn-comment__author a {
	color: var(--sn-text);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.sn-comment__badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--sn-primary);
	font-size: 0.75rem;
	font-weight: 600;
}

.sn-comment__date {
	padding-block: 8px;
	margin-block: -8px;
	color: var(--sn-muted);
	font-size: 0.75rem;
	text-decoration: none;
}

.sn-comment__date::before {
	content: "·";
	margin-right: 8px;
}

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

/* Question still waiting for the teacher: quiet, not alarming. */
.sn-comment__waiting {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--sn-accent-ink);
	font-size: 0.75rem;
	font-weight: 500;
}

.sn-comment__waiting::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sn-accent);
}

.sn-comment__badge-short {
	display: none;
}

.sn-comment__actions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.sn-comment__actions .comment-reply-link,
.sn-comment__edit a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 0 8px;
	border-radius: 999px;
	color: var(--sn-muted);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	/* Quiet (small, grey, no background) but always readable: dimming it
	   would drop the grey below accessible contrast. */
	transition: color 0.15s, background-color 0.15s;
}

.sn-comment__actions .comment-reply-link:hover,
.sn-comment__edit a:hover {
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-comment__pending {
	display: inline-block;
	margin: 6px 0 0;
	padding: 3px 8px;
	border-radius: var(--sn-radius-sm);
	background: var(--sn-accent-soft);
	color: var(--sn-accent-ink);
	font-size: 0.75rem;
	font-weight: 600;
}

.sn-comment__content {
	margin-top: 2px;
	color: var(--sn-text-soft);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.sn-comment__content > :last-child {
	margin-bottom: 0;
}

.sn-comment__content p {
	margin-bottom: 0.6em;
}

/* The author's reply: light tint, no extra box or border. */
.sn-comment--answer > .sn-comment__body {
	margin-left: -10px;
	padding: 8px 10px;
	border-radius: var(--sn-radius);
	background: color-mix(in srgb, var(--sn-primary-soft) 65%, transparent);
}

.sn-comment--answer .sn-comment__content {
	color: var(--sn-text);
}

/* Collapsed threads (single.js). */
.sn-comments__list .children > .sn-comment.is-collapsed {
	display: none;
}

.sn-comments__list .sn-thread-toggle-item {
	margin: 4px 0 0;
	list-style: none;
}

.sn-thread-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sn-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

.sn-thread-toggle:hover {
	text-decoration: underline;
}

[data-theme="dark"] .sn-avatar--shade-0,
[data-theme="dark"] .sn-avatar--author { background: var(--sn-navy-500); }
[data-theme="dark"] .sn-avatar--shade-1 { background: var(--sn-navy-600); }
[data-theme="dark"] .sn-avatar--shade-2 { background: var(--sn-navy-400); }
[data-theme="dark"] .sn-avatar--shade-3 { background: var(--sn-navy-700); }

@media (max-width: 560px) {
	.sn-comments__list .children {
		margin-left: 6px;
		padding-left: 14px;
	}

	/* Phones: a short "Author" label keeps every header on one line. */
	.sn-comment__badge-full {
		display: none;
	}

	.sn-comment__badge-short {
		display: inline;
	}

	/* Icon-only Reply (WordPress keeps an aria-label on the link). */
	.sn-comment__reply-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.sn-comment__actions .comment-reply-link {
		min-width: 32px;
		justify-content: center;
		padding: 0 6px;
	}
}

/* Form card */
.comment-respond {
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-surface);
}

.sn-comments__list .comment-respond {
	margin-top: 14px;
	background: var(--sn-card);
}

.comment-reply-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 1.0625rem;
	font-weight: 700;
}

.comment-reply-title small a {
	color: var(--sn-muted);
	font-family: var(--sn-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
}

.sn-comment-form {
	display: grid;
	gap: 14px;
}

.sn-comment-form p {
	margin: 0;
}

.sn-comment-form label {
	margin-bottom: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.sn-comment-form .required {
	color: var(--sn-accent-ink);
}

.sn-comment-form textarea,
.sn-comment-form input[type="text"],
.sn-comment-form input[type="email"] {
	border-radius: var(--sn-radius);
	background: var(--sn-card);
	font-size: 0.9375rem;
}

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

.sn-comment-form ::placeholder {
	color: color-mix(in srgb, var(--sn-muted) 75%, transparent);
}

.sn-comment-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
}

.comment-form-cookies-consent input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--sn-primary);
}

.comment-form-cookies-consent label {
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.sn-comment-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 4px;
}

.sn-comment-privacy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.sn-comment-privacy .sn-icon {
	color: var(--sn-primary);
}

.logged-in-as {
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.logged-in-as a {
	color: var(--sn-text-soft);
}

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

	.sn-comment-submit .sn-btn {
		width: 100%;
	}

	.sn-comments__list .children {
		margin-left: 6px;
		padding-left: 12px;
	}
}

/* "Spotted a mistake? Report it" card right after the note (inc/contact-form.php).
   Soft brand navy: visible at the end of a long note, yet clearly not part of
   the content (orange is reserved for exam tips). */
.sn-report {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 40px 0 28px;
	padding: 16px 18px;
	border: 1px solid color-mix(in srgb, var(--sn-primary) 18%, transparent);
	border-radius: var(--sn-radius);
	background: var(--sn-primary-soft);
}

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

.sn-report__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.45;
}

.sn-report__text strong {
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-size: 1rem;
}

.sn-report__text span {
	color: var(--sn-text-soft);
	font-size: 0.9375rem;
}

/* The button carries the visual weight: it's the one thing to click. */
.sn-report__btn {
	flex-shrink: 0;
}

/* Phones: the button moves under the text, lined up with it. */
@media (max-width: 560px) {
	.sn-report {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px 14px;
		padding: 16px;
	}

	.sn-report__text {
		flex-basis: calc(100% - 54px);
	}

	.sn-report__btn {
		margin-left: 54px;
	}
}

/* "Copying this content isn't available" message (single.js). */
/* Placed by single.js beside the text the visitor tried to copy. */
.sn-copy-toast {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	width: max-content;
	max-width: min(360px, calc(100vw - 24px));
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--sn-text);
	box-shadow: 0 10px 30px rgba(2, 26, 60, 0.25);
	color: var(--sn-bg);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
	pointer-events: none;
}

/* Pointer towards the text: under the message, or above it when flipped. */
.sn-copy-toast::after {
	position: absolute;
	top: 100%;
	left: var(--sn-pointer-x, 50%);
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-top-color: var(--sn-text);
	content: "";
	transform: translateX(-50%);
}

.sn-copy-toast.is-below {
	transform: translateY(-4px);
}

.sn-copy-toast.is-below::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--sn-text);
}

.sn-copy-toast.is-pinned::after {
	content: none;
}

.sn-copy-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.sn-copy-toast {
		transition: none;
	}
}