/**
 * Smarter Guides reader.
 *
 * This is read for an hour at a stretch by someone navigating a diagnosis,
 * often tired, often on a phone late at night. Every decision below is for
 * legibility and calm before anything else. Far less blue than the marketing
 * side of the site: blue is for chips, headings and links, and the page is an
 * off-white with the reading itself on white.
 *
 * Colour rules that are not negotiable:
 *   - Aqua #4FB4AD is 2.5:1 on white. It is a wash and a fill, never text and
 *     never the only thing carrying a meaning.
 *   - Raspberry small text uses #C02D61 (5.5:1).
 *   - Blue #004AAD is 8.1:1 on white and 7.3:1 on the blue wash.
 *   - Every state shown in colour is also shown in a word or a shape. The
 *     finished tick is a check mark and says "Finished"; the marker on the
 *     chapter being read is a triangle and says "Reading now". Photocopy this
 *     page in black and white and nothing is lost.
 *
 * Two type families. EB Garamond does the reading; Bebas Neue does headings and
 * chips. Neither is loaded by default — a plugin should not add a third-party
 * request to every page a reader opens — so both fall back through faces that
 * are already on the machine. Point smartg_reader_font_url at a self-hosted
 * stylesheet to get the real ones.
 */

.smartg-reader-shell {
	/*
	 * The page is the ground the reading surfaces sit on, and it is the only
	 * thing that is not white: every card, the chapter body, the sidebar and
	 * the hub's welcome panel are --smartg-surface, so the grey reads as the
	 * gap between them rather than as a colour anybody looks at.
	 */
	--smartg-page: #dfdfdf;
	--smartg-surface: #ffffff;
	--smartg-ink: #1f2933;
	--smartg-ink-muted: #52606d;
	--smartg-hairline: #e4e0da;
	--smartg-hairline-strong: #cfc9c0;

	/* 8.1:1 on white, 7.3:1 on the wash below. Chips, headings and links. */
	--smartg-blue: #004aad;
	--smartg-blue-wash: #eef3fb;

	/* Never text. Fill and wash only. */
	--smartg-aqua: #4fb4ad;
	--smartg-aqua-wash: #eef7f6;

	/* 5.1:1 on white: the readable member of the aqua family. */
	--smartg-teal-ink: #1f7a73;

	/* 5.5:1 on white. The raspberry that is safe at body size. */
	--smartg-raspberry-ink: #c02d61;

	/*
	 * The faintest step off white, for banded rows inside a card. It is a wash
	 * of the surface and not of the page — it never touches the page — so it
	 * stayed where it was when the page went grey. Any stronger and the term
	 * list stripes.
	 */
	--smartg-row-tint: #faf9f6;

	--smartg-measure: 680px;
	--smartg-radius: 4px;
	--smartg-watermark: none;

	/* The rail is a fixed 200px, as designed, and disappears below 1280px. */
	--smartg-rail: 200px;

	--smartg-reading-font: "EB Garamond", "Garamond", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--smartg-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--smartg-display-font: "Bebas Neue", "Oswald", "Haettenschweiler", "Arial Narrow", var(--smartg-ui-font);

	box-sizing: border-box;
	background: var(--smartg-page);
	color: var(--smartg-ink);
	font-size: clamp(19px, 1.02rem + 0.15vw, 21px);
	line-height: 1.7;
	padding: 2rem 1.25rem 4rem;
}

.smartg-reader-shell *,
.smartg-reader-shell *::before,
.smartg-reader-shell *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
 * Reading type
 * ---------------------------------------------------------------------- */

.smartg-prose,
.smartg-card__summary,
.smartg-continue__title,
.smartg-quote__text,
.smartg-takeaway,
.smartg-note__intro,
.smartg-next__body {
	font-family: var(--smartg-reading-font);
}

/*
 * Bebas Neue is a display face: all caps, tight, and unreadable as body copy.
 * It sets the headings, the band labels and the number chips, and nothing that
 * runs longer than a line. Letter-spacing is opened up because a condensed
 * caps face set solid is hard work at small sizes.
 */
.smartg-chapter__title,
.smartg-hub__title,
.smartg-locked__title,
.smartg-hub__band-heading,
.smartg-hub__greeting,
.smartg-card__title,
.smartg-chip,
.smartg-rail__heading,
.smartg-note__heading,
.smartg-next__title,
.smartg-callout__title,
.smartg-saved__headline {
	font-family: var(--smartg-display-font);
	letter-spacing: 0.02em;
	font-weight: 400;
}

/*
 * Everything that is not the prose itself — labels, badges, navigation — is
 * set in the UI face, so the serif belongs to the reading and nothing else.
 */
.smartg-sidebar,
.smartg-badge,
.smartg-card__number,
.smartg-card__meta,
.smartg-chapter__eyebrow,
.smartg-chapter__meta,
.smartg-pager,
.smartg-progress,
.smartg-disclaimer,
.smartg-watermark,
.smartg-hub__standing,
.smartg-continue__standing,
.smartg-locked__eyebrow,
.smartg-video__note,
.smartg-rail,
.smartg-note__status,
.smartg-saved__meta,
.smartg-hub__signed-in,
.smartg-hub__copyright,
.smartg-authoring-warning {
	font-family: var(--smartg-ui-font);
}

/* -------------------------------------------------------------------------
 * Skip link and focus
 * ---------------------------------------------------------------------- */

.smartg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--smartg-surface);
	color: var(--smartg-blue);
	padding: 0.75rem 1.25rem;
	border: 2px solid var(--smartg-blue);
	border-radius: var(--smartg-radius);
	text-decoration: none;
}

.smartg-skip:focus {
	left: 1rem;
	top: 1rem;
	position: fixed;
}

.smartg-reader-shell a:focus-visible,
.smartg-reader-shell button:focus-visible,
.smartg-reader-shell [tabindex]:focus-visible {
	outline: 3px solid var(--smartg-blue);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Browsers without :focus-visible still get a visible ring. */
.smartg-reader-shell a:focus,
.smartg-reader-shell button:focus {
	outline: 3px solid var(--smartg-blue);
	outline-offset: 3px;
}

.smartg-reader-shell a:focus:not(:focus-visible),
.smartg-reader-shell button:focus:not(:focus-visible) {
	outline: none;
}

.smartg-reader-shell .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */

/*
 * Source order is sidebar, article, rail, pager, because that is the order a
 * keyboard should meet them in. Grid puts the pager back under the reading
 * column, which is the only place it makes sense to look at.
 */
.smartg-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	max-width: 1120px;
	margin: 0 auto;
}

@media (min-width: 64em) {
	.smartg-layout {
		grid-template-columns: 16rem minmax(0, 1fr);
		grid-template-areas:
			"sidebar content"
			"sidebar pager";
		gap: 2.5rem 3rem;
		align-items: start;
	}

	.smartg-sidebar {
		grid-area: sidebar;
	}

	.smartg-content {
		grid-area: content;
	}

	.smartg-pager {
		grid-area: pager;
	}
}

@media (min-width: 80em) {
	.smartg-layout {
		max-width: 1360px;
		grid-template-columns: 16rem minmax(0, 1fr) var(--smartg-rail);
		grid-template-areas:
			"sidebar content rail"
			"sidebar pager   rail";
	}

	.smartg-rail {
		grid-area: rail;
	}
}

.smartg-content {
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 2.5rem 1.5rem 3rem;
	min-width: 0;
}

@media (min-width: 48em) {
	.smartg-content {
		padding: 3.5rem 3rem 4rem;
	}
}

.smartg-content:focus {
	outline: none;
}

.smartg-chapter,
.smartg-prose,
.smartg-disclaimer,
.smartg-pager,
.smartg-video {
	max-width: var(--smartg-measure);
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
 * Chapter header
 * ---------------------------------------------------------------------- */

.smartg-chapter__eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.78em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--smartg-ink-muted);
}

.smartg-chapter__title {
	margin: 0 0 0.5rem;
	font-size: 2.15em;
	line-height: 1.2;
	font-weight: 600;
}

.smartg-chapter__meta {
	margin: 0 0 2.5rem;
	font-size: 0.8em;
	color: var(--smartg-ink-muted);
}

/* -------------------------------------------------------------------------
 * Prose
 * ---------------------------------------------------------------------- */

.smartg-prose > * + * {
	margin-top: 1.25em;
}

.smartg-prose p {
	margin: 0;
}

.smartg-prose h2,
.smartg-prose h3,
.smartg-prose h4 {
	margin-top: 2.4em;
	margin-bottom: 0.6em;
	line-height: 1.25;
	font-weight: 600;
}

.smartg-prose h2 {
	font-size: 1.5em;
}

.smartg-prose h3 {
	font-size: 1.2em;
	letter-spacing: 0.01em;
}

.smartg-prose a {
	color: var(--smartg-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.smartg-prose ul,
.smartg-prose ol {
	margin: 0;
	padding-left: 1.4em;
}

.smartg-prose li + li {
	margin-top: 0.4em;
}

.smartg-prose figure {
	margin: 2em 0;
}

.smartg-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--smartg-radius);
}

.smartg-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92em;
	display: block;
	overflow-x: auto;
}

.smartg-prose th,
.smartg-prose td {
	text-align: left;
	padding: 0.6em 0.9em;
	border-bottom: 1px solid var(--smartg-hairline);
	vertical-align: top;
}

.smartg-prose thead th {
	border-bottom: 2px solid var(--smartg-hairline-strong);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * The term list
 *
 * Over 400 pairs in the first guide, so this is the dominant reading pattern,
 * not a component that appears occasionally. It is set as a two-column
 * definition list separated by hairlines rather than a boxed grid: boxes at
 * this density turn a page of explanation into a spreadsheet.
 * ---------------------------------------------------------------------- */

.smartg-prose .smartg-terms {
	margin: 2em 0;
	display: grid;
	grid-template-columns: 30% minmax(0, 70%);
	column-gap: 1.75rem;
}

.smartg-prose .smartg-terms dt {
	grid-column: 1;
	font-weight: 600;
	line-height: 1.45;
	padding: 0.85em 0.75rem 0.85em 0.75rem;
	margin: 0;
	hyphens: auto;
}

.smartg-prose .smartg-terms dd {
	grid-column: 2;
	margin: 0;
	padding: 0.85em 0.75rem;
}

/* The hairline sits above every pair but the first, spanning both columns. */
.smartg-prose .smartg-terms dt:not(:first-of-type),
.smartg-prose .smartg-terms dd:not(:first-of-type) {
	border-top: 1px solid var(--smartg-hairline);
}

/*
 * dt and dd are counted separately by nth-of-type, so the same index picks out
 * both halves of one pair. That is what makes the tint land on a whole row.
 */
.smartg-prose .smartg-terms dt:nth-of-type(even),
.smartg-prose .smartg-terms dd:nth-of-type(even) {
	background: var(--smartg-row-tint);
}

.smartg-prose .smartg-terms dd > * + * {
	margin-top: 0.75em;
}

.smartg-prose .smartg-terms dd p {
	margin: 0;
}

@media (max-width: 47.99em) {
	.smartg-prose .smartg-terms {
		display: block;
	}

	.smartg-prose .smartg-terms dt {
		padding: 0.9em 0.75rem 0.15em;
	}

	.smartg-prose .smartg-terms dd {
		padding: 0 0.75rem 0.9em;
	}

	/* Stacked, only the term carries the rule, so it separates entries. */
	.smartg-prose .smartg-terms dd:not(:first-of-type) {
		border-top: 0;
	}
}

/* -------------------------------------------------------------------------
 * Sidebar
 * ---------------------------------------------------------------------- */

.smartg-sidebar {
	font-size: 0.82em;
	line-height: 1.45;
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 1.25rem 1rem;
}

/*
 * NO INNER SCROLL REGION ON THE SIDEBAR, AND THE STICKY WENT WITH IT.
 *
 * This rule used to read:
 *
 *     position: sticky; top: 2rem;
 *     max-height: calc(100vh - 4rem); overflow-y: auto;
 *
 * and the chapter list had its own scrollbar. The max-height was not a
 * decoration on the sticky, it was the price of it. A sticky box is pinned
 * while the page scrolls past, so any part of it below the fold is unreachable
 * — you cannot scroll to it, because scrolling is exactly what it is ignoring.
 * The cap and the overflow are what made the lower chapters reachable again,
 * by giving the box a scrollbar of its own.
 *
 * So the scrollbar could not be removed on its own. Capping the height is what
 * creates it, and not capping the height is what makes a tall sticky sidebar
 * lose its bottom. The sticky had to go too, and this is a trade rather than a
 * fix: the sidebar no longer follows the reader down a long chapter. What is
 * bought with it is that a guide of a foreword and twelve chapters is visible
 * in one glance, at any window height, with no second scrollbar to find and no
 * chapter parked below the fold of a box inside a page.
 *
 * WHAT HAPPENS TO A GUIDE WITH FAR MORE CHAPTERS THAN THAT, deliberately: the
 * list simply gets longer and scrolls with the page, like any other column of
 * content. Nothing is unreachable and nothing is hidden — the reader scrolls
 * the page they were already scrolling. That is the behaviour at every chapter
 * count, which is why there is no threshold here and no second case to keep
 * working.
 *
 * Below 64em none of this applies. The drawer is a <details> that folds the
 * list away behind its summary, and it is untouched.
 *
 * The right rail still sticks, and still caps its height — see .smartg-rail.
 * It holds a jump list for the chapter on screen plus two buttons, so it is
 * short by construction and staying in view is most of its value.
 */
@media (min-width: 64em) {
	.smartg-sidebar {
		align-self: start;
	}
}

/*
 * The drawer. Below 64em the summary is a real control and the list folds away
 * behind it; above, the summary is gone and the panel is simply the sidebar.
 * A <details> does all of that with no script, which is why it is one.
 */
.smartg-sidebar__summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.86em;
	color: var(--smartg-blue);
	border-top: 1px solid var(--smartg-hairline);
}

.smartg-sidebar__summary::-webkit-details-marker {
	display: none;
}

.smartg-sidebar__summary::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.15rem);
	flex: 0 0 auto;
}

.smartg-sidebar__drawer[open] > .smartg-sidebar__summary::after {
	transform: rotate(225deg) translateY(-0.15rem);
}

.smartg-sidebar__summary-count {
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--smartg-ink-muted);
}

@media (min-width: 64em) {
	.smartg-sidebar__summary {
		display: none;
	}
}

.smartg-sidebar__guide {
	margin: 0 0 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.smartg-sidebar__guide a {
	color: var(--smartg-blue);
	text-decoration: none;
}

.smartg-sidebar__guide a:hover {
	text-decoration: underline;
}

.smartg-progress {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--smartg-hairline);
}

.smartg-progress__label {
	margin: 0 0 0.4rem;
	color: var(--smartg-ink-muted);
	font-size: 0.92em;
}

.smartg-progress__track {
	height: 8px;
	border-radius: 4px;
	background: #edeae5;

	/* The fill is aqua, which is below 3:1, so the track carries a border to
	   give the component a visible boundary, and the label above states the
	   number. The colour is never the only thing saying how far along you are. */
	border: 1px solid var(--smartg-hairline-strong);
	overflow: hidden;
}

.smartg-progress__fill {
	display: block;
	height: 100%;
	background: var(--smartg-aqua);
}

.smartg-chapters {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.smartg-chapters__item + .smartg-chapters__item {
	border-top: 1px solid var(--smartg-hairline);
}

/*
 * WHY THE WORD MARKERS ARE ON A ROW OF THEIR OWN
 *
 * They used to sit in a third column beside the title, which is fine until a
 * title wraps — and real chapter titles wrap, because this column is 16rem
 * wide. "Reading now" is nowrap and about 90px, the number takes 1.6rem, and
 * what is left for the title is under half the column. minmax(0, 1fr) then does
 * exactly what it is asked to and lets the title column collapse toward zero,
 * at which point a long word overflows its cell and is painted underneath the
 * marker: the marker reads as a strikethrough through the middle of the title.
 *
 * Every item is now placed explicitly, so no two can ever share a cell at any
 * title length. The tick stays on row one because it is a single glyph — its
 * screen-reader text is absolutely positioned and contributes no width, so that
 * column cannot grow and squeeze anything. The two word markers go to row two,
 * under the title, where the title has the whole column to wrap into.
 */
.smartg-chapters__link {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr) auto;
	column-gap: 0.5rem;
	row-gap: 0.15rem;
	align-items: baseline;
	padding: 0.55rem 0.4rem;
	color: var(--smartg-ink);
	text-decoration: none;
	border-radius: 3px;
}

.smartg-chapters__number {
	grid-column: 1;
	grid-row: 1;
}

.smartg-chapters__title {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;

	/* The title column is allowed to be narrow, so a long word breaks inside
	   it rather than escaping the cell. */
	overflow-wrap: anywhere;
}

.smartg-chapters__tick {
	grid-column: 3;
	grid-row: 1;
}

.smartg-chapters__here,
.smartg-chapters__locked {
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
}

/*
 * WHY FRONT MATTER GETS A ROW OF ITS OWN TOO
 *
 * The same failure as above, one cell to the left. Column one is 1.6rem, which
 * is the width of "12" and nothing else, and front matter puts a word there —
 * "Foreword", or whatever the editor typed in its place. The word did not fit,
 * did not wrap, and was painted across the title in column two: "FOREWORD" laid
 * over "Forward by: Dr. Chad Levitt".
 *
 * Widening column one is not the fix, because there is no width that holds
 * every label somebody might type. So on a front matter row the label is not in
 * a column at all. It takes a full-width line above everything else and each
 * remaining item moves down one row, leaving the stack the screenshot asks for:
 * label, then title, then the word marker. There is no length at which the
 * label can reach the title, because there is no longer a column boundary
 * between them to overflow — they are on different rows.
 *
 * The tick stays beside the title for the reason it stays beside it on a
 * numbered row: one glyph, and a screen-reader label that is out of flow and
 * cannot widen the column.
 */
.smartg-chapters__link--front {
	grid-template-columns: minmax(0, 1fr) auto;
}

.smartg-chapters__label {
	grid-column: 1 / -1;
	grid-row: 1;
	min-width: 0;
	font-family: var(--smartg-display-font);
	font-size: 0.76em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smartg-blue);

	/* A label long enough to need two lines takes two, rather than escaping
	   the row it was given. */
	overflow-wrap: anywhere;
}

.smartg-chapters__link--front .smartg-chapters__title {
	grid-column: 1;
	grid-row: 2;
}

.smartg-chapters__link--front .smartg-chapters__tick {
	grid-column: 2;
	grid-row: 2;
}

.smartg-chapters__link--front .smartg-chapters__here,
.smartg-chapters__link--front .smartg-chapters__locked {
	grid-column: 1 / -1;
	grid-row: 3;
}

a.smartg-chapters__link:hover {
	background: var(--smartg-blue-wash);
}

.smartg-chapters__number {
	font-family: var(--smartg-display-font);
	color: var(--smartg-blue);
	font-variant-numeric: tabular-nums;
	font-size: 1em;
	letter-spacing: 0.02em;
	text-align: center;
}

.smartg-chapters__item.is-current > .smartg-chapters__link {
	background: var(--smartg-blue-wash);
	box-shadow: inset 3px 0 0 var(--smartg-blue);
	font-weight: 600;
	color: var(--smartg-blue);
}

/*
 * Finished and reading-now are both a glyph plus a word, and the word is the
 * accessible name. Take the colour away and a check mark and a triangle are
 * still two different things.
 */
.smartg-chapters__tick-mark {
	color: var(--smartg-teal-ink);
	font-weight: 700;
}

.smartg-chapters__here {
	font-size: 0.76em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smartg-raspberry-ink);
	white-space: nowrap;
}

.smartg-chapters__link--locked {
	color: var(--smartg-ink-muted);
	cursor: default;
}

.smartg-chapters__locked {
	font-size: 0.8em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--smartg-ink-muted);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Video facade
 * ---------------------------------------------------------------------- */

.smartg-video {
	margin: 0 auto 2.5rem;
}

.smartg-video__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #223038;
	border-radius: var(--smartg-radius);
	overflow: hidden;
}

.smartg-video__button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 1rem;
	border: 0;

	/* A poster that fails to load leaves this solid panel rather than a broken
	   image, and covers the moment before a proxied poster arrives. */
	background-color: #223038;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	text-align: center;
}

.smartg-video__icon {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	position: relative;
}

.smartg-video__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.15rem;
	border-color: transparent transparent transparent #1f2933;
}

.smartg-video__label {
	background: rgba(31, 41, 51, 0.72);
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
}

.smartg-video__frame,
.smartg-video__player {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/*
 * The stage is 16:9 and a rendition may not be, so the player is contained
 * rather than cropped: a video letterboxes into the panel instead of having its
 * edges cut off. The panel behind it is already the dark solid the poster sits
 * on, so the bars are not a visible seam.
 */
.smartg-video__player {
	object-fit: contain;
	background: #223038;
}

.smartg-video__note {
	margin: 0.5rem 0 0;
	font-size: 0.75em;
	color: var(--smartg-ink-muted);
}

/*
 * The editor's line about the video, above the standing note about how the
 * button behaves. Its own block and its own colour, because one is about this
 * video and the other is about every video on the site.
 */
.smartg-video__caption {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 1.15em;
	color: var(--smartg-ink);
}

/* -------------------------------------------------------------------------
 * Disclaimer, pager, watermark
 * ---------------------------------------------------------------------- */

.smartg-disclaimer {
	margin: 3rem auto 0;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--smartg-hairline-strong);
	background: var(--smartg-page);
	color: var(--smartg-ink-muted);
	font-size: 0.78em;
	line-height: 1.55;
	border-radius: 0 var(--smartg-radius) var(--smartg-radius) 0;
}

.smartg-pager {
	display: grid;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--smartg-hairline);
}

@media (min-width: 40em) {
	.smartg-pager {
		grid-template-columns: 1fr 1fr;
	}
}

.smartg-pager__link {
	display: block;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	text-decoration: none;
	color: var(--smartg-ink);
	background: var(--smartg-surface);
}

.smartg-pager__link:hover {
	border-color: var(--smartg-blue);
	background: var(--smartg-blue-wash);
}

.smartg-pager__link--next {
	text-align: right;
}

.smartg-pager__direction {
	display: block;
	font-size: 0.72em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--smartg-ink-muted);
	margin-bottom: 0.15rem;
}

.smartg-pager__title {
	display: block;
	color: var(--smartg-blue);
	font-weight: 600;
	line-height: 1.35;
}

.smartg-watermark {
	max-width: 1120px;
	margin: 2rem auto 0;
	text-align: center;
	font-size: 0.72em;
	color: var(--smartg-ink-muted);
	letter-spacing: 0.03em;
}

/*
 * The tile is a data URI generated on the server and handed in through an
 * enqueued stylesheet, so it is present whether or not scripts run.
 */
.smartg-sensitive {
	background-image: var(--smartg-watermark);
	background-repeat: repeat;
}

/* -------------------------------------------------------------------------
 * Guide hub
 * ---------------------------------------------------------------------- */

.smartg-hub__main,
.smartg-locked__main {
	max-width: 1000px;
	margin: 0 auto;
}

.smartg-hub__welcome {
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 2rem 1.75rem;
}

.smartg-hub__title {
	margin: 0;
	font-size: 2.6em;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.smartg-hub__subtitle {
	margin: 0.5rem 0 0;
	color: var(--smartg-ink-muted);
}

.smartg-continue {
	margin-top: 2.5rem;
}

/*
 * Every band label — continue, contents, saved work, what's next — carries
 * .smartg-hub__band-heading and takes its treatment from there. They used to
 * each have their own rule in the UI face, which then won on source order and
 * quietly undid the display face they had just been given.
 */

.smartg-continue__card {
	display: block;
	padding: 1.4rem 1.6rem;
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-blue);
	border-left-width: 4px;
	border-radius: var(--smartg-radius);
	text-decoration: none;
	color: var(--smartg-ink);
}

.smartg-continue__card:hover {
	background: var(--smartg-blue-wash);
}

.smartg-continue__title {
	display: block;
	font-size: 1.3em;
	line-height: 1.3;
	color: var(--smartg-blue);
	font-weight: 600;
}

.smartg-continue__meta {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.78em;
	color: var(--smartg-ink-muted);
}

.smartg-hub__contents {
	margin-top: 2.5rem;
}

.smartg-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 46em) {
	.smartg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * THE HUB'S CONTENTS ARE ONE CHAPTER PER ROW, AT EVERY WIDTH.
 *
 * .smartg-grid is two-up from 46em because the library shelves guides that way
 * and a shelf of covers wants the width. A guide's own contents do not: the
 * list is read down, in the order it is numbered, and two columns make the eye
 * cross the page to find out what comes after chapter one. Scoped to
 * .smartg-hub__contents so the library is untouched, and outside the media
 * query so it holds above 46em as well — the descendant selector outranks the
 * two-column rule whatever the source order.
 */
.smartg-hub__contents .smartg-grid {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Front matter is its own list above the grid, and now that the grid is a
 * single column too, the only thing left to say is the gap between them. The
 * gap is the grid's own, restated as a margin because the two lists are
 * siblings rather than cells of one grid.
 */
.smartg-grid--front-matter {
	margin-bottom: 1rem;
}

.smartg-card {
	height: 100%;
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 1.25rem 1.4rem 1.1rem;
}

.smartg-grid__item.is-locked .smartg-card {
	background: #fbfaf8;
}

.smartg-card__number {
	margin: 0 0 0.3rem;
	font-size: 0.72em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smartg-ink-muted);
}

.smartg-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.2em;
	line-height: 1.3;
	font-weight: 600;
}

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

.smartg-card__title a:hover {
	text-decoration: underline;
}

.smartg-card__summary {
	margin: 0 0 0.9rem;
	font-size: 0.92em;
	color: var(--smartg-ink-muted);
	line-height: 1.55;
}

.smartg-card__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.75em;
	color: var(--smartg-ink-muted);
}

.smartg-badge {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.95em;
	letter-spacing: 0.04em;
	border: 1px solid currentColor;
	line-height: 1.5;
}

.smartg-badge--free {
	color: var(--smartg-teal-ink);
}

.smartg-badge--locked {
	color: var(--smartg-ink-muted);
}

.smartg-badge--read {
	color: var(--smartg-teal-ink);
	border-color: var(--smartg-aqua);
	background: #f0f8f7;
}

.smartg-saved {
	margin-top: 2.5rem;
	padding: 1.5rem 1.6rem;
	background: var(--smartg-surface);
	border: 1px dashed var(--smartg-hairline-strong);
	border-radius: var(--smartg-radius);
}

.smartg-saved__empty {
	margin: 0;
	color: var(--smartg-ink-muted);
	font-size: 0.9em;
}

/* -------------------------------------------------------------------------
 * Locked screen
 * ---------------------------------------------------------------------- */

.smartg-locked__header {
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 2.25rem 1.75rem;
}

.smartg-locked__eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.78em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--smartg-raspberry-ink);
}

.smartg-locked__title {
	margin: 0;
	font-size: 2.3em;
	line-height: 1.15;
	font-weight: 600;
}

.smartg-locked__subtitle,
.smartg-locked__lead {
	margin: 0.6rem 0 0;
	color: var(--smartg-ink-muted);
}

.smartg-locked__actions {
	margin: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.smartg-button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var(--smartg-blue);
	color: #ffffff;
	border-radius: var(--smartg-radius);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9em;
}

.smartg-button:hover,
.smartg-button:focus {
	background: #163f7d;
	color: #ffffff;
}

/*
 * The label, said again with enough specificity to hold.
 *
 * .smartg-prose a above sets link colour to --smartg-blue and scores 0,0,1,1;
 * .smartg-button scores 0,0,1,0. So inside a chapter — which is where the
 * checklist's "Print this list" lives — the prose rule won and the button
 * printed blue text on a blue fill: a dark rectangle with an invisible label,
 * readable only on hover, because .smartg-button:hover scores 0,0,2,0 and won
 * it back. That is the whole bug. The palette was never wrong: #ffffff on
 * --smartg-blue is 7.9:1, past AA and past AAA.
 *
 * Stated as three selectors rather than one so it does not depend on source
 * order, which is the thing that failed here.
 */
.smartg-prose a.smartg-button,
a.smartg-button,
.smartg-button {
	color: #ffffff;
}

.smartg-prose a.smartg-button:hover,
.smartg-prose a.smartg-button:focus,
a.smartg-button:hover,
a.smartg-button:focus {
	background: #163f7d;
	color: #ffffff;
}

.smartg-locked__account {
	margin: 0;
	font-size: 0.82em;
	color: var(--smartg-ink-muted);
}

.smartg-locked__account a {
	color: var(--smartg-blue);
}

/*
 * The sign-in link form. Styled as a peer of the buy button rather than as an
 * afterthought: someone who has already paid and cannot remember a password is
 * a reader with a problem, not a lead to be nudged past.
 */
.smartg-magic {
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 1.75rem;
}

.smartg-magic__title {
	margin: 0 0 0.5rem;
	font-size: 1.05em;
}

.smartg-magic__intro {
	margin: 0 0 1rem;
	font-size: 0.88em;
	color: var(--smartg-ink-muted);
}

.smartg-magic__field {
	margin: 0 0 1rem;
}

.smartg-magic__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.82em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--smartg-ink-muted);
}

.smartg-magic__input {
	width: 100%;
	max-width: 22rem;
	padding: 0.7rem 0.8rem;
	font: inherit;
	font-size: 1em;
	color: var(--smartg-ink);
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline-strong);
	border-radius: var(--smartg-radius);
}

.smartg-magic__input:focus {
	outline: 3px solid var(--smartg-blue);
	outline-offset: 1px;
}

.smartg-magic__actions {
	margin: 0;
}

/*
 * The overview on the locked screen, above the chapter list. It takes the
 * list's heading treatment because the two are one answer in two halves: what
 * the guide is, and what is in it.
 */
.smartg-locked__overview {
	margin: 1.5rem 0;
}

.smartg-locked__contents {
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 1.75rem;
}

.smartg-locked__overview h2,
.smartg-locked__contents h2 {
	margin: 0 0 1rem;
	font-size: 0.82em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smartg-ink-muted);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.smartg-locked__chapters {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.92em;
}

.smartg-locked__chapter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: baseline;
	padding: 0.65rem 0;
}

.smartg-locked__chapter + .smartg-locked__chapter {
	border-top: 1px solid var(--smartg-hairline);
}

.smartg-locked__chapter a {
	color: var(--smartg-blue);
}

.smartg-locked__chapter-title {
	color: var(--smartg-ink-muted);
}

.smartg-locked__minutes {
	margin-left: auto;
	font-size: 0.8em;
	color: var(--smartg-ink-muted);
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.smartg-reader-shell * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * Saved work panel
 * ---------------------------------------------------------------------- */

.smartg-saved__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.smartg-saved__item {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--smartg-hairline);
}

.smartg-saved__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.smartg-saved__link {
	display: block;
	text-decoration: none;
	color: var(--smartg-blue);
}

.smartg-saved__link:hover .smartg-saved__title {
	text-decoration: underline;
}

.smartg-saved__title {
	display: block;
	font-weight: 600;
}

.smartg-saved__chapter {
	display: block;
	font-size: 0.8em;
	color: var(--smartg-ink-muted);
}

.smartg-saved__meta {
	margin: 0.25rem 0 0;
	font-size: 0.78em;
	color: var(--smartg-ink-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* -------------------------------------------------------------------------
 * Number chips
 *
 * The one place blue is used as a fill. Small, so the display face has to be
 * given room to breathe, and always aria-hidden in the markup because the words
 * beside it already say "Chapter 6" — a screen reader should not hear the
 * number twice.
 * ---------------------------------------------------------------------- */

.smartg-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.4rem;
	border-radius: 3px;
	background: var(--smartg-blue);
	color: #fff;
	font-size: 1.05rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

/*
 * THE CHIP WHEN IT CARRIES A WORD INSTEAD OF A NUMBER
 *
 * Every measurement above is sized for one or two characters: a fixed 2rem
 * height, line-height 1 with no room for a second line, and flex: 0 0 auto so
 * it never shrinks. That is right for "12" and wrong for "Foreword", and wrong
 * in a way that does not show until somebody types a long one — the chip grows
 * along the row until it pushes its neighbour out of the container, and text
 * inside it that does wrap spills out through the fixed height.
 *
 * Front matter therefore gets a chip that is allowed to be a label: it may take
 * a second line, it may shrink when the row is narrow, and 2rem becomes a floor
 * rather than a ceiling so a one-line label still matches the numbered chips
 * beside it exactly.
 */
.smartg-chip--label {
	height: auto;
	min-height: 2rem;
	padding: 0.3rem 0.5rem;
	font-size: 0.9rem;
	line-height: 1.2;
	text-align: center;
	flex-shrink: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Badges
 *
 * Every one carries its own word. The mark in front of it is decoration on top
 * of that, never instead of it.
 * ---------------------------------------------------------------------- */

.smartg-badge--anchor {
	background: var(--smartg-blue-wash);
	color: var(--smartg-blue);
	border: 1px solid var(--smartg-blue);
}

.smartg-badge--reading {
	background: transparent;
	color: var(--smartg-raspberry-ink);
	border: 1px solid currentColor;
}

.smartg-badge__mark {
	font-size: 0.9em;
	margin-right: 0.2em;
}

/* -------------------------------------------------------------------------
 * The right rail
 *
 * 200px, sticky, and gone below 1280px. Everything in it is a shortcut to
 * something the page already has, so losing it costs a reader nothing.
 * ---------------------------------------------------------------------- */

.smartg-rail {
	display: none;
	font-size: 0.78em;
	line-height: 1.45;
}

@media (min-width: 80em) {
	.smartg-rail {
		display: block;
		position: sticky;
		top: 2rem;
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
	}
}

.smartg-rail__heading {
	margin: 0 0 0.6rem;
	font-size: 1.15em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smartg-ink-muted);
}

.smartg-rail__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	border-left: 2px solid var(--smartg-hairline);
}

.smartg-rail__item--level-3 {
	padding-left: 0.75rem;
}

.smartg-rail__link {
	display: block;
	padding: 0.3rem 0 0.3rem 0.7rem;
	color: var(--smartg-ink-muted);
	text-decoration: none;
}

.smartg-rail__link:hover,
.smartg-rail__link:focus {
	color: var(--smartg-blue);
	text-decoration: underline;
}

.smartg-rail__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--smartg-hairline);
}

.smartg-rail__action {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--smartg-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	text-align: left;
}

/* -------------------------------------------------------------------------
 * The chapter note
 * ---------------------------------------------------------------------- */

.smartg-note {
	max-width: var(--smartg-measure);
	margin: 3rem auto 0;
	padding: 1.5rem;
	border: 1px solid var(--smartg-hairline-strong);
	border-radius: var(--smartg-radius);
	background: var(--smartg-row-tint);
}

.smartg-note__heading {
	margin: 0 0 0.35rem;
	font-size: 1.4em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--smartg-blue);
}

.smartg-note__intro {
	margin: 0 0 1rem;
	font-size: 0.92em;
	color: var(--smartg-ink-muted);
}

.smartg-note__status {
	margin: 0 0 0.75rem;
	font-size: 0.82em;
	color: var(--smartg-teal-ink);
}

.smartg-note__field {
	width: 100%;
	font-family: var(--smartg-reading-font);
	font-size: 1em;
	line-height: 1.6;
	padding: 0.75rem;
	border: 1px solid var(--smartg-hairline-strong);
	border-radius: var(--smartg-radius);
	background: var(--smartg-surface);
	color: var(--smartg-ink);
	resize: vertical;
}

.smartg-note__actions {
	margin: 0.75rem 0 0;
}

.smartg-button--quiet {
	background: transparent;
	color: var(--smartg-blue);
	border: 2px solid var(--smartg-blue);
}

.smartg-button--quiet:hover,
.smartg-button--quiet:focus {
	background: var(--smartg-blue-wash);
	color: var(--smartg-blue);
}

/* -------------------------------------------------------------------------
 * Authoring components
 *
 * What the four shortcodes produce. None of them relies on a fill to be
 * understood, because print drops fills: the rules and the borders do the
 * work and the wash is a bonus on screen.
 * ---------------------------------------------------------------------- */

.smartg-prose .smartg-quote {
	margin: 2.5rem 0;
	padding-top: 1.5rem;
	border-top: 3px solid var(--smartg-blue);
	break-inside: avoid;
	page-break-inside: avoid;
}

.smartg-prose .smartg-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.25em;
	line-height: 1.5;
	color: var(--smartg-ink);
}

.smartg-prose .smartg-quote__text p {
	margin: 0 0 0.5em;
}

.smartg-prose .smartg-quote__cite {
	margin-top: 0.75rem;
	font-family: var(--smartg-ui-font);
	font-size: 0.8em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--smartg-ink-muted);
}

.smartg-prose .smartg-takeaway {
	margin: 2rem 0;
	padding: 0.85rem 0 0.85rem 1.15rem;
	border-left: 4px solid var(--smartg-aqua);
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.5;
	break-inside: avoid;
	page-break-inside: avoid;
}

.smartg-prose .smartg-callout {
	margin: 2.5rem 0;
	border: 1px solid var(--smartg-hairline-strong);
	border-radius: var(--smartg-radius);
	overflow: hidden;
	break-inside: avoid;
	page-break-inside: avoid;
}

.smartg-prose .smartg-callout__title {
	margin: 0;
	padding: 0.75rem 1.15rem;
	background: var(--smartg-blue-wash);
	border-bottom: 2px solid var(--smartg-blue);
	color: var(--smartg-blue);
	font-size: 1.25em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.smartg-prose .smartg-callout__body {
	padding: 0.5rem 1.15rem 1.15rem;
	background: var(--smartg-aqua-wash);
}

.smartg-prose .smartg-callout__body > *:first-child {
	margin-top: 0.75rem;
}

.smartg-prose .smartg-callout__body > *:last-child {
	margin-bottom: 0;
}

/*
 * Editors only. A reader never receives this element at all, so it does not
 * have to be quiet — the person who can fix the sentence is the only person
 * looking at it.
 */
.smartg-authoring-warning {
	margin: 1.5rem 0;
	padding: 0.85rem 1.15rem;
	border: 2px dashed var(--smartg-raspberry-ink);
	border-radius: var(--smartg-radius);
	background: #fff;
	color: var(--smartg-raspberry-ink);
	font-size: 0.85em;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * The guide hub, styled
 * ---------------------------------------------------------------------- */

.smartg-hub__welcome {
	text-align: left;
}

.smartg-hub__greeting {
	margin: 0 0 0.15rem;
	font-size: 1.6em;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smartg-blue);
}

.smartg-hub__signed-in {
	margin: 0 0 1.5rem;
	font-size: 0.78em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-variant-caps: all-small-caps;
	color: var(--smartg-ink-muted);
}

/*
 * The band label above each section. Small, wide-tracked caps in the display
 * face, with a short rule under it, so the page reads as a run of named bands
 * rather than a list of headings of the same weight.
 */
.smartg-hub__band-heading {
	margin: 0 0 1rem;
	font-size: 1.3em;
	line-height: 1.15;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--smartg-ink);
}

.smartg-hub__band-heading::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.5rem;
	background: var(--smartg-aqua);
}

.smartg-hub__start {
	margin: 0 0 3rem;
}

/*
 * The public overview, directly under the welcome band. Same rhythm as the
 * band below it, and full content width through the --lead variant, because it
 * is answering "what is this guide" rather than sitting inside the reading
 * measure.
 */
.smartg-hub__overview {
	margin: 0 0 3rem;
}

.smartg-video--lead {
	max-width: none;
	margin-bottom: 0;
}

/*
 * A flow item in the button's own flex column, not an absolutely positioned
 * corner label. Nothing in the chapter print path is taken out of flow, and
 * that includes things print is going to hide anyway.
 */
.smartg-video__duration {
	padding: 0.15rem 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 3px;
	color: #fff;
	font-family: var(--smartg-ui-font);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

/* The continue card: chip, title, standing, and the button. */
.smartg-continue__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
}

@media (min-width: 40em) {
	.smartg-continue__card {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
}

.smartg-continue__body {
	min-width: 0;
}

.smartg-continue__standing {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--smartg-ui-font);
	font-size: 0.78em;
	color: var(--smartg-ink-muted);
}

.smartg-continue__remaining::before {
	content: " · ";
}

.smartg-continue__cta {
	grid-column: 1 / -1;
	justify-self: start;
	padding: 0.6rem 1.25rem;
	border-radius: var(--smartg-radius);
	background: var(--smartg-blue);
	color: #fff;
	font-family: var(--smartg-ui-font);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (min-width: 40em) {
	.smartg-continue__cta {
		grid-column: auto;
		justify-self: end;
	}
}

/* The chapter grid. */
.smartg-card__number {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.smartg-card__number-label {
	font-size: 0.92em;
}

.smartg-card__title {
	font-size: 1.35em;
	line-height: 1.15;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/*
 * An anchor chapter gets a corner accent as well as its badge. The accent is
 * decoration — the badge is the statement — so it is aqua, which is a fill and
 * never has to be read.
 */
.smartg-grid__item.is-anchor .smartg-card {
	border-color: var(--smartg-hairline-strong);
	position: relative;
	overflow: hidden;
}

.smartg-grid__item.is-anchor .smartg-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 2.25rem solid var(--smartg-aqua);
	border-left: 2.25rem solid transparent;
}

.smartg-grid__item.is-reading .smartg-card {
	border-left: 4px solid var(--smartg-raspberry-ink);
}

.smartg-grid__item.is-complete .smartg-card {
	border-left: 4px solid var(--smartg-teal-ink);
}

/* Saved work. */
.smartg-saved__list {
	display: grid;
	gap: 1rem;
}

@media (min-width: 46em) {
	.smartg-saved__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.smartg-saved__item {
	background: var(--smartg-surface);
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 1.25rem;
}

.smartg-saved__headline {
	margin: 0 0 0.35rem;
	font-size: 1.2em;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--smartg-blue);
}

.smartg-saved__meta {
	margin: 0 0 0.75rem;
	font-size: 0.78em;
	color: var(--smartg-ink-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.smartg-saved__link {
	font-family: var(--smartg-ui-font);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smartg-blue);
}

/* What's next: three quiet cards, and the restraint that goes with them. */
.smartg-next {
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--smartg-hairline);
}

.smartg-next__framing {
	margin: -0.5rem 0 1.5rem;
	font-size: 0.9em;
	color: var(--smartg-ink-muted);
}

.smartg-next__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 46em) {
	.smartg-next__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smartg-next__item {
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	padding: 1.25rem;
	background: var(--smartg-surface);
}

.smartg-next__title {
	margin: 0 0 0.5rem;
	font-size: 1.1em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--smartg-ink);
}

.smartg-next__body {
	margin: 0 0 0.75rem;
	font-size: 0.92em;
	color: var(--smartg-ink-muted);
}

.smartg-next__link {
	font-family: var(--smartg-ui-font);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smartg-blue);
}

.smartg-hub__colophon {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--smartg-hairline);
}

.smartg-hub__copyright {
	margin: 0.75rem 0 0;
	font-size: 0.75em;
	color: var(--smartg-ink-muted);
}

/* -------------------------------------------------------------------------
 * The pager, with both neighbours named
 * ---------------------------------------------------------------------- */

.smartg-pager__number {
	display: block;
	font-family: var(--smartg-display-font);
	font-size: 0.9em;
	letter-spacing: 0.06em;
	color: var(--smartg-blue);
}

/*
 * The printed copy of a note. Hidden on screen, where the textarea above it is
 * the real thing; see the print stylesheet for why it exists at all.
 */
.smartg-note__print {
	display: none;
}

/*
 * The diagonal identity marks are a print-only element. They ship in the server
 * HTML rather than being added later, because a watermark JavaScript adds is a
 * watermark that turning JavaScript off removes — so they are hidden here and
 * revealed by the print stylesheet.
 */
.smartg-chapter-watermark {
	display: none;
}

/* =========================================================================
 * The library
 *
 * /my-guides/ — one card per guide the reader holds. The card system is the
 * hub's, used as it is: .smartg-grid, .smartg-card and .smartg-badge already
 * describe "a thing you can open, with a standing on it", and a guide card is
 * a chapter card at a larger scale. What is added here is the cover and the
 * pair of actions under it, which a chapter card has no equivalent of.
 * ====================================================================== */

.smartg-library__main {
	max-width: 60rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

.smartg-library__welcome {
	margin: 0 0 2rem;
}

.smartg-library__title {
	margin: 0 0 0.3rem;
	font-family: var(--smartg-display-font);
}

.smartg-library__signed-in {
	margin: 0;
	color: var(--smartg-ink-muted);
	font-size: 0.95rem;
}

.smartg-library__band-heading {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-family: var(--smartg-display-font);
}

.smartg-library__empty-lead {
	max-width: 40rem;
	margin: 0 0 1.25rem;
	color: var(--smartg-ink-muted);
}

.smartg-library__browse-heading {
	margin: 1.75rem 0 0.85rem;
	font-size: 1rem;
}

/*
 * The cover sits above the title at the top of the card. Capped rather than
 * fluid: covers are supplied at whatever size the designer had, and a card
 * whose height depends on the artwork makes a grid of them ragged.
 */
.smartg-card__cover {
	margin: 0 0 0.85rem;
}

.smartg-card__cover img {
	display: block;
	width: 100%;
	max-height: 11rem;
	object-fit: cover;
	border-radius: 3px;
	background: var(--smartg-page);
}

.smartg-card__standing {
	color: var(--smartg-ink-muted);
}

/*
 * Two actions, and they are not the same weight on purpose. Continuing is what
 * the reader came for; opening the hub is the way to everything else. The
 * chapter title beside the button is what makes "Continue reading" mean
 * something before it is pressed.
 */
.smartg-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.85rem;
	margin: 0.9rem 0 0;
}

.smartg-card__resume-title {
	flex: 1 1 8rem;
	min-width: 0;
	color: var(--smartg-ink-muted);
	font-size: 0.9rem;
}

.smartg-card__hub-link {
	color: var(--smartg-blue);
	font-size: 0.9rem;
}

.smartg-library__colophon {
	margin: 3rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--smartg-hairline);
}

/*
 * The sign-in prompt on a devices page somebody reached while signed out. It
 * used to render nothing at all, which read as a broken page.
 */
.smartg-sessions--signed-out {
	max-width: 34rem;
}

.smartg-sessions--signed-out .smartg-sessions__intro {
	color: var(--smartg-ink-muted);
}

/* -------------------------------------------------------------------------
 * The print frame, neutralised on screen
 *
 * templates/chapter.php wraps the chapter in a real <table> so that a printed
 * page gets a repeating <tfoot> — the only construct a browser gives you that
 * reserves its height on every fragment, and therefore the only thing that
 * stops chapter text printing over the identity line. See the long note at the
 * top of assets/css/print.css.
 *
 * That table is in the document on screen as well, where it has no business
 * behaving like one. Left alone it shrinks to its content instead of filling
 * the column, picks up the 1px cell padding from the user agent, and shows the
 * running foot — a second copy of a disclaimer that is already on the page. A
 * theme that styles tables generally, as Divi does, would add borders, row
 * fills and a horizontal scroll wrapper on top of that.
 *
 * THIS BLOCK LIVES HERE AND NOT IN print.css, AND THAT IS THE WHOLE POINT.
 * print.css is enqueued with media="print" by both Reader\Assets and
 * Printing\Assets, so a screen block inside it is dead code — it was written
 * there first and never ran. reader.css is the stylesheet loaded for every
 * medium, so this is the only file where a screen rule can reach a screen. It
 * is wrapped in @media screen so it stays out of the way on paper, where the
 * frame has to be a table again.
 * ---------------------------------------------------------------------- */

@media screen {

	.smartg-chapter-frame,
	.smartg-chapter-frame > tbody,
	.smartg-chapter-frame > tbody > tr,
	.smartg-chapter-frame > tbody > tr > td {
		display: block;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	/*
	 * Print only. On screen the same two sentences are already on the page in
	 * their usual places — the chapter's own disclaimer and its watermark line —
	 * and a second copy under the reading would be the reader reading the
	 * disclaimer twice.
	 */
	.smartg-chapter-frame > tfoot {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * In-guide search
 *
 * The field lives in two places — the hub header and the chapter sidebar —
 * and is the same component in both. It is deliberately quiet: a reading page
 * with a search box painted like a call to action is a page that looks like a
 * shop.
 *
 * The locked half of the results list carries no link, so it must not look
 * like one. It is muted, it is not underlined, it says "Locked" in words next
 * to a padlock, and the cursor stays the default. Nothing about it invites a
 * click that would do nothing.
 * ---------------------------------------------------------------------- */

.smartg-search {
	display: flex;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	max-width: 26rem;
}

.smartg-sidebar .smartg-search {
	margin: 0 0 1rem;
	max-width: none;
}

.smartg-search__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--smartg-hairline-strong);
	border-radius: var(--smartg-radius);
	background: var(--smartg-surface);
	color: var(--smartg-ink);
	font-family: var(--smartg-ui-font);
	font-size: 0.95rem;
	line-height: 1.4;
}

.smartg-search__field:focus-visible,
.smartg-search__submit:focus-visible {
	outline: 3px solid var(--smartg-blue);
	outline-offset: 2px;
}

.smartg-search__submit {
	flex: 0 0 auto;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--smartg-blue);
	border-radius: var(--smartg-radius);
	background: var(--smartg-surface);
	color: var(--smartg-blue);
	font-family: var(--smartg-ui-font);
	font-size: 0.9rem;
	cursor: pointer;
}

.smartg-search__submit:hover {
	background: var(--smartg-blue-wash);
}

.smartg-search-results {
	margin: 0 0 2.5rem;
	padding: 1.25rem 1.35rem 1.5rem;
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	background: var(--smartg-surface);
}

.smartg-search-results__summary {
	margin: 0 0 1rem;
	color: var(--smartg-ink-muted);
	font-size: 0.95rem;
}

.smartg-search-results__clear {
	margin-left: 0.6rem;
	color: var(--smartg-blue);
	font-size: 0.9rem;
}

.smartg-search-results__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.smartg-search-results__item {
	padding: 0.9rem 0;
	border-top: 1px solid var(--smartg-hairline);
}

.smartg-search-results__item:first-child {
	border-top: 0;
}

.smartg-search-results__link {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	color: var(--smartg-blue);
	text-decoration: none;
}

.smartg-search-results__title {
	font-family: var(--smartg-display-font);
	font-size: 1.15rem;
	letter-spacing: 0.01em;

	/*
	 * The row is a flex line of chip then title. A flex item defaults to
	 * min-width: auto, which refuses to shrink below its longest word, so a
	 * long chip beside a long title pushed the line straight out of the
	 * container instead of wrapping it. The same guard .smartg-more__title has
	 * carried all along, and for the same reason.
	 */
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.smartg-search-results__link:hover .smartg-search-results__title {
	text-decoration: underline;
}

.smartg-search-results__snippet {
	margin: 0.35rem 0 0;
	color: var(--smartg-ink);
	font-size: 0.95rem;
	line-height: 1.6;
}

/*
 * A wash rather than the browser default yellow, which fights everything else
 * on the page. 4.5:1 is still met because the ink is unchanged and only the
 * ground moves.
 */
.smartg-search__mark {
	padding: 0 0.12em;
	border-radius: 2px;
	background: var(--smartg-aqua-wash);
	color: inherit;
	box-shadow: inset 0 -1px 0 var(--smartg-aqua);
}

.smartg-search-results__count {
	margin: 0.3rem 0 0;
	color: var(--smartg-ink-muted);
	font-size: 0.85rem;
}

.smartg-search-results__locked {
	margin: 1.5rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--smartg-hairline-strong);
}

.smartg-search-results__locked-heading {
	margin: 0 0 0.5rem;
	color: var(--smartg-ink-muted);
	font-family: var(--smartg-ui-font);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.smartg-search-results__item.is-locked .smartg-search-results__link {
	color: var(--smartg-ink-muted);
	cursor: default;
}

.smartg-search-results__item.is-locked .smartg-search-results__link:hover .smartg-search-results__title {
	text-decoration: none;
}

.smartg-search-results__item.is-locked .smartg-chip--chapter {
	background: var(--smartg-hairline);
	color: var(--smartg-ink-muted);
}

.smartg-search-results__lock {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	margin-left: auto;
	color: var(--smartg-ink-muted);
	font-family: var(--smartg-ui-font);
	font-size: 0.8rem;
}

/* -------------------------------------------------------------------------
 * The rest of the guide, at the foot of a free chapter
 *
 * Titles and a padlock. There is no summary in the markup to style, which is
 * the point — see templates/parts/more-chapters.php.
 * ---------------------------------------------------------------------- */

.smartg-more {
	margin: 3rem 0 0;
	padding: 1.5rem 1.5rem 1.75rem;
	border: 1px solid var(--smartg-hairline);
	border-radius: var(--smartg-radius);
	background: var(--smartg-blue-wash);
}

.smartg-more__heading {
	margin: 0 0 0.4rem;
	font-family: var(--smartg-display-font);
	font-size: 1.5rem;
	letter-spacing: 0.02em;
}

.smartg-more__standfirst {
	margin: 0 0 1.1rem;
	color: var(--smartg-ink-muted);
	font-size: 0.95rem;
}

.smartg-more__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.smartg-more__item {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--smartg-hairline);
	font-size: 0.98rem;
}

.smartg-more__item:first-child {
	border-top: 0;
}

.smartg-more__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

a.smartg-more__title {
	color: var(--smartg-blue);
}

.smartg-more__item.is-locked .smartg-more__title {
	color: var(--smartg-ink-muted);
}

.smartg-more__free,
.smartg-more__lock {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	color: var(--smartg-ink-muted);
	font-family: var(--smartg-ui-font);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.smartg-more__free {
	color: var(--smartg-teal-ink);
}

.smartg-more__cta {
	margin: 1.4rem 0 0;
}

.smartg-more__button {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: var(--smartg-radius);
	background: var(--smartg-blue);
	color: #ffffff;
	font-family: var(--smartg-ui-font);
	font-size: 0.95rem;
	text-decoration: none;
}

.smartg-more__button:hover,
.smartg-more__button:focus {
	background: #003a86;
	color: #ffffff;
}

.smartg-more__button:focus-visible {
	outline: 3px solid var(--smartg-blue);
	outline-offset: 3px;
}