/* =============================================================================
   Individual Document Block
   ============================================================================= */

/* ── Container ─────────────────────────────────────────────────────────────── */

.individual-document {
	background: var(--byu-white);
	padding: 2rem 0 4rem;

	/* Flex, for selection painting rather than for layout. WebKit fills the gaps
	   between the blocks a selection spans at the width of their nearest common
	   ancestor block, so a drag through this section's text painted a highlight
	   the full width of the wrapper rather than of the text column. WebKit skips
	   gap painting inside flex containers. The children here stack with padding
	   and carry no vertical margins, so no margin collapsing is lost. See
	   .individual-speech for the measured case. */
	display: flex;
	flex-direction: column;
}

.individual-document__container {
	/* Match the individual-speech readable, left-anchored column. */
	max-width: 46rem;
	margin-left: max(5%, calc((100% - 1000px) / 2));
	margin-right: max(5%, calc((100% - 1000px) / 2));
}

/* ── Date ──────────────────────────────────────────────────────────────────── */

.individual-document__date {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #747474;
	margin: 0 0 0.5rem;
}

/* ── Title ─────────────────────────────────────────────────────────────────── */

.individual-document__title {
	font-family: var(--f-ibm-plex-sans);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
	margin: 0.5rem 0 0.625rem;
}

@media (min-width: 40rem) {
	.individual-document__title {
		font-size: 2rem;
	}
}

/* ── Speakers ──────────────────────────────────────────────────────────────── */

.individual-document__speakers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin-bottom: 0.25rem;
}

.individual-document__speaker-name {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: #266ec1;
	text-decoration: none;
}

.individual-document__speaker-name:hover {
	text-decoration: underline;
}

/* Non-speaker name is not a link. Show the text I-beam cursor (not the
   default arrow) so it reads as non-interactive text; `pointer-events: none`
   is intentionally omitted because it would suppress the cursor entirely. */
.individual-document__speaker-name--static {
	color: var(--c-navy);
	cursor: text;
}

.individual-document__speaker-name--static:hover {
	text-decoration: none;
}

/* ── Speaker position ──────────────────────────────────────────────────────── */

.individual-document__position {
	font-style: italic;
	font-size: 0.75rem;
	color: #747474;
	margin: 0 0 1.25rem;
}

/* ── Audio Player ──────────────────────────────────────────────────────────── */

.individual-document__audio-wrapper {
	margin: 1.25rem 0 1.5rem;
}

.individual-document__audio-el {
	display: none;
}

/* Stand-in for the audio player on documents that have none, marking the point
   the player would have started so the notes bar can dock there. It occupies no
   space on desktop, where the bar is the edge tab; the responsive block gives it
   the bar's height once the bar docks. */
.individual-document__notes-anchor {
	height: 0;
}

.individual-document__audio-player {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	background: #6aafe6;
	border-radius: 0.313rem;
	padding: 0.75rem 1rem;
	transition: box-shadow 0.2s;
}

.individual-document__audio-player.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
	z-index: 200;
	box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* Sit below the WordPress admin bar for logged-in editors. */
body.admin-bar .individual-document__audio-player.is-sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .individual-document__audio-player.is-sticky {
		top: 46px;
	}
}

.individual-document__audio-play-btn,
.individual-document__audio-skip-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--c-navy);
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.individual-document__audio-play-btn:hover,
.individual-document__audio-skip-btn:hover {
	opacity: 0.75;
}

.individual-document__audio-timeline-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 12rem;
	min-width: 0;
}

.individual-document__audio-time {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--c-navy);
	white-space: nowrap;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.individual-document__audio-timeline {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 0.375rem;
	background: linear-gradient(to right, var(--c-navy) 0%, var(--c-navy) 0%, rgba(255,255,255,0.45) 0%);
	border-radius: 0.25rem;
	cursor: pointer;
	outline: none;
}

.individual-document__audio-timeline::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--c-navy);
	cursor: pointer;
}

.individual-document__audio-timeline::-moz-range-thumb {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--c-navy);
	cursor: pointer;
	border: none;
}

.individual-document__audio-speed {
	display: flex;
	align-items: center;
}

.individual-document__speed-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-navy);
	gap: 0.125rem;
	cursor: pointer;
}

.individual-document__speed-select {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--c-navy);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: center;
}

.individual-document__audio-download {
	display: flex;
	align-items: center;
	color: var(--c-navy);
	transition: opacity 0.15s;
	margin-left: auto;
}

.individual-document__audio-download:hover {
	opacity: 0.75;
}

/* ── Envisioning BYU link ──────────────────────────────────────────────────── */

.individual-document__envisioning {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.75rem;
	padding: 0.75rem 1rem;
	background: #f4f4f6;
	border: 0.0625rem solid #e0e0e3;
	border-radius: var(--brad-card);
}

.individual-document__envisioning-icon {
	flex-shrink: 0;
}

.individual-document__envisioning-text {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.8125rem;
	color: #747474;
}

.individual-document__envisioning-link {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #266ec1;
	text-decoration: none;
}

.individual-document__envisioning-link:hover {
	text-decoration: underline;
}

/* ── Callout / Pull Quote ──────────────────────────────────────────────────── */

.individual-document__callout {
	font-family: var(--f-ibm-plex-sans);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.6;
	color: #266ec1;
	margin: 0 0 2rem;
	padding: 0.25rem 0;
}

.individual-document__callout p {
	margin: 0;
}

/* ── Body Content ──────────────────────────────────────────────────────────── */

.individual-document__content {
	font-family: "Source Serif Pro", "Georgia", serif;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-navy);
	margin-bottom: 2.5rem;
}

.individual-document__content p {
	margin: 0 0 1rem;
}

.individual-document__content h2,
.individual-document__content h3 {
	font-family: var(--f-ibm-plex-sans);
	font-weight: 600;
	color: var(--c-navy);
	margin: 1.75rem 0 0.5rem;
}

.individual-document__content h2 {
	font-size: 1.3125rem;
}

.individual-document__content h3 {
	font-size: 0.9375rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.individual-document__content blockquote {
	border-left: 0.25rem solid #e0e0e3;
	margin: 1.5rem 0;
	padding-left: 1.25rem;
	font-style: italic;
	color: #494949;
}

.individual-document__content a {
	color: #266ec1;
}

.individual-document__unavailable {
	color: #747474;
	font-style: italic;
}

/* ── Footnote references (inline, in body) ─────────────────────────────────── */

.individual-document__footnote-ref {
	color: #266ec1;
	font-size: 0.65em;
	vertical-align: super;
	text-decoration: none;
	font-family: var(--f-ibm-plex-sans);
	font-weight: 600;
}

.individual-document__footnote-ref:hover {
	text-decoration: underline;
}

/* ── Notes Drawer ──────────────────────────────────────────────────────────────
 * Permanently on screen as a 50px collapsed bar that expands in place. Desktop
 * parks it in the empty column to the right of the text, vertically centred;
 * mobile goes full-bleed, docked under the audio player (see the responsive
 * block below). Mirrors the speech page's drawer.
 */

/* --id-drawer-viewport-inset is the clearance kept above and below the drawer,
   so a tall notes list cannot grow up into the header. Because the drawer is
   centred, its top edge sits at (100vh - height) / 2 — capping the height at
   100vh minus twice the inset therefore guarantees that clearance at any
   viewport height. One value to tune. */
.individual-document__notes-drawer {
	--id-drawer-viewport-inset: 10rem;

	position: fixed;
	top: 50%;

	/* Pinned to the screen's right edge, per the design — not to the content
	   column, which is where it used to sit above 72rem. */
	right: 0;
	left: auto;
	width: 22rem;
	max-width: calc(100% - 3rem);
	max-height: min(70vh, calc(100vh - 2 * var(--id-drawer-viewport-inset)));
	transform: translateY(-50%);
	background: #e5e5e5;

	/* Rounded only on the left, where the tab faces the page. The right side
	   meets the viewport edge, and a rounded corner there reads as a gap
	   rather than a detail — the same reason the docked bar squares off
	   against the screen at smaller widths. overflow clips the notes body to
	   this shape, so the open panel follows without a rule of its own. */
	border-radius: 0.5rem 0 0 0.5rem;
	overflow: hidden;
	z-index: 301;
	display: flex;
	flex-direction: column;
}

/* Being fixed, the tab has nothing to bound it and would otherwise float on over
   the footer once the page runs out — so it steps aside when the footer arrives.
   Deliberately not animated: a fade is the one part of this a reader can outrun,
   and it left the tab visibly hanging over the footer when they scrolled there
   in a hurry. Cutting it makes the exit as quick as the observer can report,
   which is a frame or two and imperceptible. visibility rather than opacity, so
   it leaves the tab order as well as the page. The docked layout below overrides
   this: there the bar travels with the audio player, which keeps its own
   behaviour over the footer. */
.individual-document__notes-drawer.is-past-content {
	visibility: hidden;
}

/* ── Toggle bar ── */

/* Heading only carries the accordion semantics; the bar's look is on the button. */
.individual-document__notes-heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	flex-shrink: 0;
}

.individual-document__notes-toggle {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	height: 3.125rem;
	padding: 0 1.75rem;
	background: #e5e5e5;
	border: none;
	cursor: pointer;
	text-align: left;
}

.individual-document__notes-icon {
	flex-shrink: 0;
	color: #747474;
}

.individual-document__notes-icon--collapse,
.individual-document__notes-toggle[aria-expanded="true"] .individual-document__notes-icon--expand {
	display: none;
}

.individual-document__notes-toggle[aria-expanded="true"] .individual-document__notes-icon--collapse {
	display: block;
}

.individual-document__notes-title {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--c-navy);
}

/* ── Notes body ── */

/* Notes are citation-heavy and routinely contain bare URLs, which are a
   single unbroken word wider than this box. Without a break opportunity the
   content overflows horizontally, and because overflow-y is auto here the
   spec computes the visible overflow-x to auto too, producing a sideways
   scrollbar. "anywhere" breaks only when needed and lets the box shrink to
   its container as a flex item. */
.individual-document__notes-body {
	flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  background: #e5e5e5;
  padding: 0.5rem 1.5rem 1.5rem;
  font-family: var(--f-ibm-plex-sans);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-navy);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #858585 transparent;
}

/* Explicit so that adding any display to the rule above cannot silently beat
   the hidden attribute. */
.individual-document__notes-body[hidden] {
	display: none;
}

.individual-document__notes-body::-webkit-scrollbar {
	width: 0.5rem;
}

.individual-document__notes-body::-webkit-scrollbar-thumb {
	background: #858585;
	border-radius: 0.25rem;
}

.individual-document__notes-body p,
.individual-document__notes-body li {
	margin-bottom: 1rem;
	padding-left: 0.75rem;
	border-left: 0.1875rem solid transparent;
}

.individual-document__notes-body a {
  color: var(--c-navy);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* Persistent light-blue line beside the note whose footnote was clicked. */
.individual-document__notes-body .is-active-note {
	border-left-color: #7aade1;
}

/* ── Notes (static fallback) ─────────────────────────────────────────────────────
   Old-school bottom-of-page notes, shown only when a post has notes but no
   clickable footnote refs to open the drawer. */

.individual-document__section-heading {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--c-navy);
	margin: 0 0 0.75rem;
}

.individual-document__notes-static {
	margin: 2.5rem 0;
	padding-top: 1.5rem;
	border-top: 0.0625rem solid #e0e0e3;
}

.individual-document__notes-static-body {
	overflow-wrap: anywhere;
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-navy);
}

.individual-document__notes-static-body p,
.individual-document__notes-static-body li {
	margin-bottom: 0.75rem;
}

.individual-document__notes-static-body a {
	overflow-wrap: anywhere;
	color: #266ec1;
}

/* ── Speaker Blurb ─────────────────────────────────────────────────────────── */

.individual-document__blurb {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 2rem;
}

.individual-document__blurb-photo {
	width: 96px;
	height: 124px;
	border-radius: var(--brad-image);
	object-fit: cover;
	object-position: top;
	flex-shrink: 0;
}

.individual-document__blurb-text {
	font-family: "Source Serif Pro", "Georgia", serif;
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #494949;
	margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 39.9375rem) {
	.individual-document__container {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 0 1rem;
	}

	.individual-document__title {
		font-size: 1.5rem;
	}

	.individual-document__audio-player {
		flex-wrap: wrap;
		gap: 0.375rem;
	}

	.individual-document__audio-timeline-wrap {
		flex-basis: 100%;
		order: 5;
	}

	.individual-document__audio-speed {
		margin-left: auto;
	}

	.individual-document__audio-download {
		margin-left: 0.75rem;
		margin-right: 0.5rem;
	}
}

/* Tablet and down: the drawer leaves the screen edge and docks under the audio
   player, the two scrolling as one stacked block. Its own breakpoint, because
   this is about the drawer's layout rather than the page's — and previously it
   was tied to the 639px block above, so the document drawer docked far later
   than the speech one did. */
@media (max-width: 1024px) {

	/* The bar sits below the player and is out of flow, so nothing else reserves
	   its height — without this it paints over whatever follows, on this page
	   the "See more from" link. The bar meets the player with no gap, per the
	   design, so the reservation is the bar's 3.125rem plus the single 1.5rem
	   beneath it, matching the speech page. The mobile block further down drops
	   that remaining gap too. Only when the drawer actually renders, or
	   audio-only documents gain a dead gap. */
	.individual-document__audio-wrapper--with-notes-bar {
		margin-bottom: calc(1.5rem + 3.125rem);
	}

	/* Same for the no-audio stand-in, which has no height of its own, so the
	   whole space below it belongs to the bar and the gap beneath it. */
	.individual-document__notes-anchor {
		margin-bottom: calc(1.5rem + 3.125rem);
	}

	/* Docked here rather than fixed to the screen edge, travelling with the
	   audio player — which stays put over the footer itself, so the bar should
	   too. Hiding one and not the other would read as a glitch. */
	.individual-document__notes-drawer.is-past-content {
		visibility: visible;
	}

	/* Docked beneath the audio player, matching its width: inset to the content
	   column while the player is inline, edge to edge once it pins. The two
	   states are separate positioning modes rather than one tracked position,
	   which is what keeps the bar from lagging behind the player during a
	   scroll — see initDrawerDocking(), which publishes the values below.

	   Absolute here, so the browser scrolls the bar along with the inline player
	   natively. The expanded body insets from the left and overlays content.

	   The fallbacks cover the moment before the geometry is first measured. */
	.individual-document__notes-drawer {
		position: absolute;

		/* The published offset is the player's exact bottom edge, and the bar
		   sits straight on it: the two read as one stacked block here, as they
		   already do on a phone and on the speech page. The wrapper's
		   reservation above covers the bar and the gap beneath it. */
		top: var(--id-bar-inline-top, 0);
		left: var(--id-bar-inline-left, 0);
		width: var(--id-bar-inline-width, 100%);
		right: auto;
		max-width: none;

		/* Positioned in the page, so the viewport bottom is not a fixed distance
		   away and cannot be subtracted from exactly as it can when pinned
		   below. A plain cap keeps a long notes list from swamping the screen. */
		max-height: 70vh;

		/* Docked to a measured offset, so the desktop centring must not apply. */
		transform: none;
		background: transparent;
		border-radius: 0;
	}

	/* Pinned to the top of the viewport, whether by the player pinning or by a
	   document with no audio scrolling past where the player would have been.
	   Fixed to a constant, so this state cannot jitter either. */
	.individual-document__notes-drawer.is-full-bleed {
		position: fixed;
		top: var(--id-bar-pinned-top, 0px);
		left: 0;
		width: 100%;

		/* Stop short of the bottom edge rather than running off it. The 0px
		   fallback keeps its unit because calc() rejects a bare zero. */
		max-height: calc(100vh - var(--id-bar-pinned-top, 0px) - 1rem);
	}

	/* The bar now meets the player with no gap, so the two facing edges square
	   off and the pair reads as one block — a rounded corner butting against
	   another rounded corner leaves a pinched seam. Only the join is squared;
	   the outer corners stay rounded, since the pair is still inset from the
	   page here rather than running edge to edge as it does on a phone.

	   Scoped to the wrapper's modifier so a document whose player has no bar
	   beneath it keeps a fully rounded player. */
	.individual-document__audio-wrapper--with-notes-bar
	.individual-document__audio-player {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	/* Rounded like the inline player it sits beneath, minus the top corners it
	   shares with it. The pinned player squares its corners off as it goes edge
	   to edge, so the bar follows suit below. */
	.individual-document__notes-toggle {
		justify-content: center;
		gap: 1.25rem;
		padding: 0 1rem;
		border-radius: 0 0 0.313rem 0.313rem;
	}

	.individual-document__notes-drawer.is-full-bleed .individual-document__notes-toggle {
		border-radius: 0;
	}

	.individual-document__notes-title {
		font-size: 1.125rem;
	}

	/* Sits a little below the bar, per the design, with the page showing through
	   the gap — the drawer itself is transparent here. The bottom corner is
	   rounded to match the top now that the panel stops short of the viewport
	   bottom and that edge is visible; the right edge stays flush and square. */
	.individual-document__notes-body {
		margin-top: 0.375rem;
		margin-left: 2.625rem;
		border-top-left-radius: 0.5rem;
		border-bottom-left-radius: 0.5rem;
		padding: 1.5rem 1.25rem 1.5rem 1.875rem;
	}

	.individual-document__notes-body p,
	.individual-document__notes-body li {
		padding-left: 1rem;
		border-left-width: 0.25rem;
	}
}

/* Tablet only, and only once the bar has pinned. Docked under the player the
   panel is as wide as the player and reads fine; pinned it spans the whole
   screen and buries the text under it — on a phone that reads as a sheet because
   there is no room beside it, but a tablet plainly has room. Insetting the
   pinned panel keeps the document visible alongside, the way the desktop panel
   sits next to the text rather than on it.

   The inset is the container's own gutter plus the 2.625rem the docked panel
   already carries, so the panel lines up with the text column instead of
   landing on an arbitrary offset. Mirrors the speech part, and the gutter
   expression is copied from __container above — change one, change both.

   Bounded below at 40rem so the phone treatment is untouched, matching where
   __container swaps its 5% margins for a 1rem gutter. */
@media (min-width: 40rem) and (max-width: 1024px) {

	.individual-document__notes-drawer.is-full-bleed
	.individual-document__notes-body {
		margin-left: calc(2.625rem + (max(5%, calc((100% - 1000px) / 2))));
	}
}

/* ── Mobile media treatment ─────────────────────────────────────────────────────
 * Must follow the max-width: 1024px block above rather than join the
 * 39.9375rem block further up: these override the tablet drawer rules, and at
 * equal specificity the later one wins. The width matches where __container
 * swaps its 5% margins for a 1rem gutter, since that gutter is what the
 * full-bleed rule negates. Documents reach that point at 39.9375rem where
 * speeches reach it at 768px — a difference that predates this work.
 */
@media (max-width: 39.9375rem) {

	/* The player runs edge to edge here while the text keeps its gutter, so it
	   pulls back out through the container's 1rem padding. The notes bar is not
	   listed because it is not in flow: its left and width are measured from the
	   player, so widening the player widens the bar with it. Corners square off
	   at the same time, the way they already do when the two pin to the top. */
	.individual-document__audio-wrapper {
		margin-left: -1rem;
		margin-right: -1rem;
	}

	.individual-document__audio-player,
	.individual-document__notes-toggle {
		border-radius: 0;
	}

	/* No gaps around the bar at this width. The player and bar run edge to edge
	   and read as one stacked block; the 1.5rem either side is a tablet
	   treatment, where the media is still inset from the page. */
	.individual-document__audio-wrapper--with-notes-bar,
	.individual-document__notes-anchor {
		margin-bottom: 3.125rem;
	}

	.individual-document__notes-drawer {
		top: var(--id-bar-inline-top, 0);
	}
}