/**
 * Library additions.
 *
 * Deliberately small. Everything the library renders reuses the theme's
 * existing card, chip, grid and rule vocabulary — these are the four things
 * that vocabulary did not already have.
 */

/* Reading paths. A numbered sequence, because the order is the point. */
.iom-paths { margin-top: 1.5rem; }

.iom-path-steps {
	list-style: none;
	counter-reset: iom-step;
	margin: 0.9rem 0;
	padding: 0;
}

.iom-path-steps li {
	counter-increment: iom-step;
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.45rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.iom-path-steps li::before {
	content: counter(iom-step);
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--gold);
	color: var(--white);
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iom-path-steps a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border-md); }
.iom-path-steps a:hover { border-bottom-color: var(--gold); }

/* Chip counts, so a filter says how much is behind it before it is clicked. */
.wp-chip span {
	margin-left: 0.35rem;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}

/* Download links on a card sit beside the read link, not behind a click. */
.iom-dl { margin-left: 1.2rem; font-size: 0.82rem; letter-spacing: 0.04em; }
.iom-dl a { color: var(--ink-3); text-decoration: none; margin-right: 0.6rem; }
.iom-dl a:hover { color: var(--gold); }

/* A sectioned grid needs air between sections or it reads as one list. */
.iom-section { margin-bottom: 3.5rem; }
.iom-section:last-of-type { margin-bottom: 0; }
.iom-section .section-title { margin-bottom: 0.6rem; }

/* Long-form document body: measure, and headings that survive 47 pages. */
.iom-doc-body { max-width: 68ch; }
.iom-doc-body h2 {
	font-family: var(--serif);
	font-size: 1.5rem;
	color: var(--ink);
	margin: 2.6rem 0 0.8rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--gold);
}
.iom-doc-body h3 {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 1.1rem;
	color: var(--ink);
	margin: 1.9rem 0 0.5rem;
}
.iom-doc-body blockquote {
	margin: 1.6rem 0;
	padding: 0.2rem 0 0.2rem 1.3rem;
	border-left: 3px solid var(--gold);
	font-family: var(--serif);
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--ink-2);
}
.iom-doc-body table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.92rem; }
.iom-doc-body th {
	text-align: left;
	background: var(--rule);
	color: var(--white);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.6rem 0.8rem;
}
.iom-doc-body td { padding: 0.7rem 0.8rem; border-top: 1px solid var(--border); vertical-align: top; }
.iom-doc-body img, .iom-doc-body svg { max-width: 100%; height: auto; }

@media (max-width: 640px) {
	.iom-doc-body h2 { font-size: 1.3rem; }
	.iom-dl { display: block; margin: 0.5rem 0 0; }
}

/* Diagram previews. The artwork is the document, so it leads the card. */
.iom-thumb {
	display: block;
	margin: -0.25rem 0 1rem;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.9rem;
	line-height: 0;
}
.iom-thumb img {
	width: 100%;
	height: auto;
	/* An SVG with no intrinsic aspect ratio resolves height:auto to zero.
	   The floor means a broken diagram is visibly broken rather than silently
	   absent, and the grid keeps its shape either way. */
	min-height: 6rem;
	max-height: 12rem;
	object-fit: contain;
}
.iom-thumb:hover { border-color: var(--gold); }

.iom-doc-figure {
	margin: 0;
	background: var(--white);
	border: 1px solid var(--border);
	padding: 1.5rem;
	text-align: center;
}
.iom-doc-figure img { max-width: 100%; height: auto; }