/* The Compound Index — front end */

.ci-wrap {
	/* Read the theme's own tokens where they exist, so the index always matches
	   the site around it. No automatic dark mode: flipping on the visitor's OS
	   setting made these panels dark inside an otherwise light page. */
	--ci-ink: var(--ink, #16181d);
	--ci-muted: var(--muted, #5f6672);
	--ci-line: var(--line, #e3e9f5);
	/* The theme has no neutral surface token, and --accent-soft is a blue tint
	   that would colour every panel, so these two stay neutral by hand. */
	--ci-line-soft: rgba(19, 27, 46, 0.07);
	--ci-surface: var(--paper, #fff);
	--ci-panel: #f4f6fa;
	--ci-accent: var(--accent, #3458fa);
	--ci-accent-2: var(--data, #ec4899);
	--ci-radius: var(--radius, 12px);
	--ci-mono: var(--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);

	/* Follow the theme's own page width rather than capping lower than it. */
	max-width: var(--wrap, 1480px);
	margin: 0 auto;
	padding: 2rem var(--gutter, 1.25rem) 4rem;
	color: var(--ci-ink);
}

.ci-wrap *,
.ci-wrap *::before,
.ci-wrap *::after {
	box-sizing: border-box;
}

.ci-page-head {
	margin-bottom: 2rem;
}

/* Masthead. Serif display over a mono eyebrow, matching the prototype. */

.ci-masthead {
	border-bottom: 1px solid var(--ci-line);
	padding: 34px 0 22px;
	margin-bottom: 4px;
}

.ci-masthead-eyebrow {
	font-family: var(--ci-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--faint, #878e9e);
	margin: 0;
}

.ci-masthead-title {
	font-family: var(--body, 'PT Serif', Georgia, serif);
	font-size: clamp(30px, 5vw, 44px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 6px 0 5px;
	color: var(--ci-ink);
}

.ci-masthead-sub {
	color: var(--muted, #4a5060);
	max-width: 64ch;
	font-size: 15.5px;
	line-height: 1.55;
	margin: 0;
}

.ci-eyebrow {
	margin: 0 0 0.35rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ci-color, var(--ci-accent));
}

.ci-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.ci-sep {
	opacity: 0.5;
	margin: 0 0.35em;
}

.ci-page-head h1 {
	margin: 0;
	font-size: 2rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ci-title-abbr {
	font-family: var(--ci-mono);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--ci-muted);
	margin-left: 0.5rem;
	vertical-align: middle;
}

.ci-lede {
	margin: 0.75rem 0 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--ci-muted);
	max-width: 62ch;
}

.ci-synonyms {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--ci-muted);
}

/* Index tiles */

.ci-axis-note {
	font-family: var(--ci-mono);
	font-size: 11px;
	color: var(--faint, #878e9e);
	letter-spacing: 0.04em;
}

.ci-search-wrap {
	margin-left: auto;
	position: relative;
	flex: 0 1 300px;
	min-width: 190px;
}

@media (max-width: 600px) {
	.ci-search-wrap {
		margin-left: 0;
		flex-basis: 100%;
	}

	.ci-axis-note {
		display: none;
	}
}

.ci-index-views {
	display: inline-flex;
	position: relative;
	background: var(--ci-surface);
	border: 1px solid var(--ci-line);
	border-radius: 10px;
	padding: 4px;
	flex: none;
}

/* The knob slides rather than the buttons repainting, so the change reads as
   one control moving instead of two swapping. */
.ci-view-knob {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 0;
	background: var(--ci-accent);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(52, 88, 250, 0.32);
	z-index: 1;
	transition:
		left 0.34s cubic-bezier(0.4, 0.9, 0.3, 1),
		width 0.34s cubic-bezier(0.4, 0.9, 0.3, 1);
}

.ci-view {
	position: relative;
	z-index: 2;
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: var(--ci-muted);
	padding: 8px 18px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.28s ease;
}

.ci-view[aria-selected="true"] {
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.ci-view-knob {
		transition: none;
	}
}

.ci-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
	gap: 7px;
	margin-bottom: 0;
}

/* One row: name on the left, count on the right, colour down the edge. */
.ci-tile {
	appearance: none;
	font: inherit;
	font-family: var(--display, system-ui, sans-serif);
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	background: var(--ci-surface);
	border: 1px solid var(--ci-line);
	border-left: 4px solid var(--ci-color, var(--ci-accent));
	border-radius: 0 7px 7px 0;
	padding: 9px 12px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ci-tile:hover,
.ci-tile:focus-visible {
	background: var(--ci-panel);
}

.ci-tile.is-active {
	background: var(--ci-color, var(--ci-accent));
	border-color: var(--ci-color, var(--ci-accent));
}

.ci-tile-name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ci-ink);
	line-height: 1.25;
	min-width: 0;
}

.ci-tile-count {
	font-family: var(--ci-mono);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--faint, #878e9e);
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.ci-tile.is-active .ci-tile-name,
.ci-tile.is-active .ci-tile-count {
	color: #fff;
}

/* The narrowing row, beneath the tiles */

.ci-cross {
	border-top: 1px solid var(--ci-line);
	padding-top: 14px;
	margin: 16px 0 18px;
}

.ci-cross-label {
	font-family: var(--ci-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--faint, #878e9e);
	margin: 0 0 9px;
}

.ci-cross-hint {
	color: var(--line-strong, #d3d8e3);
	font-style: italic;
	font-weight: 500;
}

.ci-cross-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.ci-chips-empty {
	font-size: 13.5px;
	color: var(--faint, #878e9e);
	font-style: italic;
	max-width: 66ch;
	margin: 0;
	line-height: 1.5;
}

.ci-chip-filter {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 13px;
	border: 1px solid var(--ci-line);
	border-radius: 999px;
	background: var(--ci-surface);
	color: var(--muted, #4a5060);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ci-chip-filter:hover,
.ci-chip-filter:focus-visible {
	border-color: var(--ci-color, var(--ci-accent));
	color: var(--ci-ink);
}

.ci-chip-filter.is-active {
	border-color: var(--ci-color, var(--ci-accent));
	color: var(--ci-ink);
	box-shadow: inset 0 0 0 1px var(--ci-color, var(--ci-accent));
}

.ci-chip-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
	/* Routes have no colour of their own, so they take the neutral. */
	background: var(--ci-color, var(--faint, #878e9e));
}

.ci-chip-name {
	white-space: nowrap;
}

.ci-chip-count {
	font-family: var(--ci-mono);
	font-size: 11px;
	opacity: 0.6;
}

.ci-chip-clear {
	appearance: none;
	font: inherit;
	font-size: 13px;
	color: var(--ci-accent);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 6px 4px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Controls */

.ci-search {
	width: 100%;
	font: inherit;
	font-size: 0.9rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--line-strong, #d3d8e3);
	border-radius: 999px;
	background: var(--ci-surface);
	color: var(--ci-ink);
}

.ci-search:focus {
	outline: 2px solid var(--ci-accent);
	outline-offset: 1px;
}

.ci-count {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	color: var(--ci-muted);
	font-variant-numeric: tabular-nums;
}

.ci-loading,
.ci-empty {
	color: var(--ci-muted);
	font-size: 0.95rem;
	padding: 2rem 0;
}

/* Cards */

/* Square, tinted with its category colour. The background declaration is
   repeated so browsers without color-mix still get a readable card. */
/* The abbreviation is the visual anchor, one size on every card. The handful
   that are too long for the box ellipsis rather than changing size. */
@media (max-width: 480px) {
	.ci-grid {
		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
		gap: 7px;
	}
}

.ci-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.ci-chip {
	font-size: 0.72rem;
	padding: 2px 8px;
	border-radius: 8px;
	background: var(--ci-panel);
	color: var(--ci-muted);
	text-decoration: none;
	border: 1px solid transparent;
}

a.ci-chip:hover {
	border-color: var(--ci-accent);
	color: var(--ci-accent);
}

.ci-chip.is-primary {
	background: var(--ci-color, var(--ci-accent));
	color: #fff;
}

a.ci-chip[style*="--ci-color"]:not(.is-primary) {
	border-color: color-mix( in srgb, var(--ci-color) 35%, transparent );
	color: var(--ci-color);
}

a.ci-chip[style*="--ci-color"]:not(.is-primary):hover {
	border-color: var(--ci-color);
}

a.ci-chip.is-primary {
	background: var(--ci-color, var(--ci-accent));
	border-color: var(--ci-color, var(--ci-accent));
	color: #fff;
}

.ci-single .ci-page-head {
	border-left: 5px solid var(--ci-color, transparent);
	padding-left: 1rem;
	margin-left: -1rem;
}

.ci-section h2 {
	border-left: 3px solid var(--ci-color, transparent);
	padding-left: 0.7rem;
	margin-left: -0.7rem;
}

/* Sections */

.ci-section {
	margin-top: 2.5rem;
}

.ci-section h2 {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.ci-section h2 a {
	color: inherit;
	text-decoration: none;
}

.ci-section-count {
	font-family: var(--ci-mono);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--ci-muted);
}

.ci-section-desc {
	margin: 0 0 0.9rem;
	font-size: 0.88rem;
	color: var(--ci-muted);
	max-width: 62ch;
}

/* Facts and chemistry */

.ci-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border-radius: var(--ci-radius);
	border: 1px solid #e3e9f5;
}

.ci-fact-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ci-muted);
	margin-bottom: 6px;
}

/* Four columns, declared rather than fitted: the four short identifiers are
   meant to share the first row, and auto-fit would give a different number of
   them per row at every container width. */
.ci-dl {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--ci-line-soft);
	border: 1px solid var(--ci-line-soft);
	border-radius: var(--ci-radius);
	overflow: hidden;
	margin: 0;
}

.ci-dl > div {
	background: var(--ci-surface);
	padding: 0.8rem 1rem;
	min-width: 0;
}

@media (max-width: 760px) {
	.ci-dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 420px) {
	.ci-dl {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ci-dl > div.is-wide {
	grid-column: 1 / -1;
}

.ci-dl > div.is-wide dd {
	font-size: 0.82rem;
	line-height: 1.5;
	word-break: break-word;
}

.ci-dl dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ci-muted);
	margin-bottom: 4px;
}

.ci-dl dd {
	margin: 0;
	font-family: var(--ci-mono);
	font-size: 0.95rem;
}

/* Variants */

.ci-table-wrap {
	overflow-x: auto;
}

.ci-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.ci-table th {
	text-align: left;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ci-muted);
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--ci-line);
}

.ci-table td {
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--ci-line-soft);
	vertical-align: top;
}

.ci-formula {
	display: block;
	font-family: var(--ci-mono);
	font-size: 0.75rem;
	color: var(--ci-muted);
}

.ci-body {
	max-width: 68ch;
	line-height: 1.7;
}

/* Structure viewer */

.ci-structure {
	border: 1px solid var(--ci-line);
	border-radius: var(--ci-radius);
	overflow: hidden;
	background: var(--ci-surface);
}

.ci-structure-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid var(--ci-line-soft);
}

.ci-structure-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.ci-structure-of {
	font-weight: 400;
	color: var(--ci-muted);
}

.ci-structure-formula {
	font-family: var(--ci-mono);
	font-weight: 700;
	color: var(--ci-color, var(--ci-accent));
}

.ci-structure-formula sub {
	font-size: 0.72em;
	vertical-align: baseline;
	position: relative;
	bottom: -0.22em;
}

.ci-structure-hint {
	margin: 0;
	font-size: 0.82rem;
	color: var(--ci-muted);
}

.ci-structure-stage {
	position: relative;
	width: 100%;
	height: clamp(280px, 48vh, 460px);
	background: var(--ci-panel);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ci-structure-stage canvas {
	display: block;
}

.ci-structure-status {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ci-muted);
}

.ci-structure-status:empty {
	display: none;
}

/* A quiet pulse while the library and the model arrive. */
.ci-structure.is-loading .ci-structure-stage {
	animation: ci-pulse 1.4s ease-in-out infinite;
}

@keyframes ci-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
	.ci-structure.is-loading .ci-structure-stage {
		animation: none;
	}
}

.ci-structure-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0.75rem 1.1rem;
	border-top: 1px solid var(--ci-line-soft);
}

/* Element legend */

.ci-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ci-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.ci-legend-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex: 0 0 auto;
	/* Hydrogen is white, so every dot needs an edge to stay visible. */
	border: 1px solid rgba(22, 24, 29, 0.28);
	box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.16);
}

.ci-legend-name {
	font-size: 0.85rem;
	color: var(--ci-muted);
}

/* Play and pause */

.ci-structure-spin {
	appearance: none;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--ci-line);
	background: var(--ci-surface);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease;
}

.ci-structure-spin:hover,
.ci-structure-spin:focus-visible {
	border-color: var(--ci-color, var(--ci-accent));
}

.ci-icon-pause {
	position: relative;
	display: block;
	width: 12px;
	height: 14px;
}

/* Two bars for pause. */
.ci-structure-spin.is-playing .ci-icon-pause::before,
.ci-structure-spin.is-playing .ci-icon-pause::after {
	content: "";
	position: absolute;
	top: 0;
	width: 4px;
	height: 14px;
	border-radius: 1px;
	background: var(--ci-color, var(--ci-accent));
}

.ci-structure-spin.is-playing .ci-icon-pause::before { left: 0; }
.ci-structure-spin.is-playing .ci-icon-pause::after { right: 0; }

/* A triangle for play. */
.ci-structure-spin:not(.is-playing) .ci-icon-pause::before {
	content: "";
	position: absolute;
	top: 0;
	left: 2px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid var(--ci-color, var(--ci-accent));
}

.ci-structure-note {
	margin: 0;
	padding: 0 1.1rem 0.9rem;
	font-size: 0.8rem;
	color: var(--ci-muted);
}

@media (max-width: 600px) {
	.ci-structure-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.ci-legend {
		gap: 6px 14px;
	}
}

/* Two column compound page. Mirrors the theme's own 7fr / 3fr entry layout
   and its 980px breakpoint, so the page reads as part of the site. */

.ci-layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	gap: 30px;
	align-items: start;
	margin-top: 1.5rem;
}

.ci-layout.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.ci-main,
.ci-aside {
	min-width: 0;
}

.ci-aside-sticky {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (max-width: 980px) {
	.ci-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ci-aside-sticky {
		position: static;
	}
}

.ci-main > .ci-section:first-child {
	margin-top: 0;
}

/* Panels */

.ci-panel {
	background: var(--ci-surface);
	border: 1px solid var(--ci-line);
	border-radius: var(--ci-radius);
	padding: 1rem 1.1rem 1.1rem;
}

.ci-panel-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	font-weight: 600;
	border: 0;
	padding: 0;
}

.ci-panel-count {
	font-family: var(--ci-mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ci-muted);
	background: var(--ci-panel);
	border-radius: 999px;
	padding: 1px 8px;
}

.ci-panel-note {
	margin: 0.9rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--ci-line-soft);
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--ci-muted);
}

/* Brands */

.ci-brand + .ci-brand {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--ci-line-soft);
}

.ci-brand-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ci-brand-name {
	font-size: 0.92rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

/* A rectangle the whole mark fits inside, letterboxed rather than cropped, so
   a wide brand lockup stays readable. */
.ci-brand-logo {
	width: 132px;
	height: 38px;
	object-fit: contain;
	object-position: left center;
	display: block;
}

.ci-brand-name:hover {
	color: var(--ci-color, var(--ci-accent));
}

.ci-brand-rating {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--ci-mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: #1c7a4a;
	background: #e8f6ee;
	border-radius: 999px;
	padding: 3px 10px 3px 8px;
}

.ci-brand-star {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linejoin: round;
	flex: none;
}

/* A way through to everything written, rather than implying these three are
   all there is. */
.ci-view-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 0.9rem;
	padding: 0.7rem;
	border: 1px solid var(--ci-line);
	border-radius: 10px;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--ci-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ci-view-all:hover {
	border-color: var(--ci-accent);
	color: var(--ci-accent);
}

.ci-brand-products {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
}

.ci-brand-products li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0.35rem 0;
	list-style: none;
}

.ci-brand-products li + li {
	border-top: 1px dashed var(--ci-line-soft);
}

.ci-product-name {
	font-size: 0.8rem;
	line-height: 1.35;
	min-width: 0;
}

.ci-seller {
	flex: 0 0 auto;
	font-size: 0.74rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.32rem 0.7rem;
	border-radius: 999px;
	background: var(--ci-color, var(--ci-accent));
	color: #fff;
	transition: opacity 0.15s ease;
}

.ci-seller:hover,
.ci-buy:focus-visible {
	opacity: 0.85;
	color: #fff;
}

/* Articles */

.ci-articles {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ci-articles li {
	list-style: none;
}

.ci-articles li + li {
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--ci-line-soft);
}

.ci-articles a {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}

.ci-article-thumb {
	flex: 0 0 52px;
}

.ci-article-thumb img {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 7px;
}

.ci-article-text {
	min-width: 0;
}

.ci-article-title {
	display: block;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.35;
}

.ci-articles a:hover .ci-article-title {
	color: var(--ci-color, var(--ci-accent));
}

.ci-article-date {
	display: block;
	font-size: 0.7rem;
	color: var(--ci-muted);
	margin-top: 2px;
}


/* The board */

/* Only once it has actually stuck, so it does not float over nothing. */
/* Authored layout: explicit positions on a fixed grid. */
.ci-results.is-placed {
	display: grid;
	grid-template-columns: repeat(var(--ci-cols, 26), var(--ci-tile, 50px));
	grid-auto-rows: var(--ci-tileh, 60px);
	gap: var(--ci-gap, 3px);
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

.ci-results.is-placed /* Tiles
   -----
   A metallic edge in the family colour with a near-white face, carrying five
   fields: index number and molecular weight along the top, symbol and name in
   the middle, formula along the bottom. */

.ci-node {
	position: absolute;
	border: 1.5px solid color-mix(in srgb, var(--tc, #8a93a1) 52%, #fff);
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	appearance: none;
	font: inherit;
	/* A pale wash of the family colour. The face carries the colour; a white
	   face with only a coloured edge reads as washed out at this size. */
	background: color-mix(in srgb, var(--tc, #8a93a1) 12%, #fff);
	/* Opacity and saturation only: those carry the narrowing, which fades
	   tiles in and out as filters change. Nothing moves on hover. */
	transition: opacity 0.26s, filter 0.26s;
}

.ci-node-in {
	position: relative;
	height: 100%;
	border-radius: 6px;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 3px 4px 2px;
	overflow: hidden;
}

.ci-node-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2px;
	line-height: 1;
}

.ci-node-num {
	font-size: 8px;
	font-weight: 500;
	color: color-mix(in srgb, var(--tc, #8a93a1) 46%, #2a3350);
}

.ci-node-ms {
	font-family: var(--ci-mono);
	font-size: 6.5px;
	color: #98a0ad;
	text-align: right;
}

.ci-node-sym-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	gap: 1px;
}

.ci-node-sym {
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	/* The symbol carries its family's colour, darkened so it holds up against
	   the tile's tint.
	   ------------------------------------------------------------------------
	   It used to be one grey for every family, on the reasoning that the symbol
	   is the constant across the board and colouring it makes the eye read it
	   as data. That is a fair argument, and it was overruled deliberately: at
	   the sizes most tiles are read, the symbol is the only thing legible, and
	   a grey symbol on a tinted tile looked unfinished rather than neutral. */
	color: color-mix(in srgb, var(--tc, #8a93a1) 72%, #101725);
}

.ci-node-nm {
	font-size: 6.1px;
	line-height: 1.12;
	color: color-mix(in srgb, var(--tc, #8a93a1) 55%, #1c2230);
	font-weight: 600;
	text-align: center;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-width: 100%;
}

.ci-node-fm {
	font-family: var(--ci-mono);
	font-size: 5.6px;
	color: #98a0ad;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.ci-node:focus-visible {
	outline: 2px solid var(--ci-accent);
	outline-offset: 2px;
	z-index: 9;
}

.ci-node.is-off {
	opacity: 0.14;
	filter: saturate(0.2);
}

/* Level of detail
   ---------------
   Zoomed out, the text is too small to read, so the tile becomes a solid
   colour and only the symbol survives. Zoomed in, there is room for the name. */

.ci-board.is-far .ci-node {
	border-radius: 4px;
	background: var(--tc, #8a93a1);
	border-color: var(--tc, #8a93a1);
	padding: 0;
}

.ci-board.is-far .ci-node-in {
	background: transparent;
}

.ci-board.is-far .ci-node-sym {
	color: #fff;
	font-size: 12px;
}

.ci-board.is-far .ci-node-num,
.ci-board.is-far .ci-node-ms,
.ci-board.is-far .ci-node-fm,
.ci-board.is-far .ci-node-nm {
	display: none;
}

.ci-board.is-far .ci-node.is-off {
	opacity: 0.1;
}

.ci-board.is-near .ci-node-nm {
	display: -webkit-box;
}

/* Compounds the layout has no place for yet. */
.ci-stray {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--ci-line);
}

.ci-stray-label {
	font-family: var(--ci-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint, #878e9e);
	margin: 0 0 8px;
}

.ci-stray-row {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.ci-results {
	position: relative;
	width: 100%;
	height: 100%;
}

.ci-results.is-pulsing {
	animation: ci-pulse 1s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ci-results.is-pulsing {
		animation: none;
	}

	.ci-node {
		transition: none;
	}
}

@media (max-width: 600px) {
	.ci-node {
		--ci-node-w: 46px;
		--ci-node-h: 40px;
	}
}

/* Board and floating chrome
   ------------------------
   The panel is a fixed viewport that scrolls. Only its contents scale, so
   zooming never touches the panel's own background, border or padding. */

/* The atlas takes the whole window, not the article measure.
   -------------------------------------------------------
   A board of 431 tiles is a map: the more of it on screen at once the better,
   and the reading measure that suits prose works against it. This breaks out
   of whatever column it was placed in, whatever that column happens to be. */
/* A modal has to outrank everything the theme puts on top: this theme's sticky
   header sits at 100 with its drawer at 200. Set once here and inherited by
   both the backdrop and the panel, which have to move together — raise one
   without the other and the panel ends up behind its own backdrop. Below the
   WordPress admin bar at 99999, so that stays reachable. */
.ci-index {
	--ci-modal-layer: 1000;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Scrollbar width is not in 100vw, so a page with a vertical scrollbar would
   otherwise gain a horizontal one. */
@supports (width: 100dvw) {
	.ci-index {
		width: 100dvw;
		max-width: 100dvw;
		margin-left: calc(50% - 50dvw);
		margin-right: calc(50% - 50dvw);
	}
}

.ci-index > * {
	max-width: none;
}

.ci-board {
	/* A little breathing room from the window edge. */
	margin: 0 12px;
	position: relative;
	width: 100%;
	/* Height is set from the board's own scaled height, so the page scrolls to
	   the bottom of the atlas rather than trapping it in a window. Only the
	   sideways overflow is hidden, which is what dragging is for. */
	min-height: 320px;
	overflow: hidden;
	background: var(--ci-surface);
	border: 1px solid var(--ci-line);
	border-radius: 16px;
	box-shadow: 0 12px 32px -8px rgba(52, 88, 250, 0.16);
	/* The browser must not claim the gesture, or dragging scrolls the page. */
	touch-action: none;
	cursor: grab;
	user-select: none;
}

.ci-board.is-dragging {
	cursor: grabbing;
}

.ci-board:focus-visible {
	outline: 2px solid var(--ci-accent);
	outline-offset: 2px;
}

/* Everything on the board moves as one, on the compositor. */
/* will-change is set while dragging, not permanently.
   ---------------------------------------------------------------------------
   It promotes the board to its own compositor layer, which is what keeps a drag
   of four hundred tiles smooth. The cost is that the layer is rasterised once
   at one scale and then stretched as a bitmap, so every zoom that is not 100%
   renders soft — and unevenly, because a tile whose edge lands at x.4 is
   resampled across two pixel columns while one at x.0 is not. That is why some
   tiles looked crisp and their neighbours washed out.

   Adding it only for the duration of a drag keeps the smoothness where it
   matters and lets the browser lay the text out properly the rest of the
   time. */
.ci-canvas {
	position: relative;
	transform-origin: 0 0;
}

.ci-board.is-dragging .ci-canvas {
	will-change: transform;
}

/* Text is what suffers most from being scaled, so ask for the geometry to be
   preserved rather than snapped — it keeps letter spacing even at fractional
   sizes instead of drifting as each glyph rounds to the nearest pixel. */
.ci-node,
.ci-key-tile {
	text-rendering: geometricPrecision;
}

/* Carries the scaled dimensions, so the scrollbar reflects what is actually
   drawn. Centred when the board is narrower than the panel. */
.ci-board-sizer {
	margin: 0 auto;
	position: relative;
}

.ci-board-inner {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
}

.ci-zoom {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
	border: 1px solid var(--ci-line);
	border-radius: 999px;
	overflow: hidden;
	background: var(--ci-surface);
}

.ci-zoom button {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	color: var(--ci-ink);
	min-width: 26px;
	height: 28px;
	cursor: pointer;
	padding: 0 2px;
	border-radius: 8px;
}

.ci-zoom button:hover,
.ci-zoom button:focus-visible {
	background: var(--ci-panel);
	color: var(--ci-accent);
}

.ci-zoom-in,
.ci-zoom-out {
	font-weight: 700;
}

.ci-zoom-level {
	font-family: var(--ci-mono);
	font-size: 10px !important;
	min-width: 42px !important;
	border-left: 1px solid var(--ci-line) !important;
	border-right: 1px solid var(--ci-line) !important;
	font-variant-numeric: tabular-nums;
	border-radius: 8px;
}

/* Filter tray, floating bottom right */

.ci-tray-head .ci-view {
	padding: 7px 14px;
	font-size: 13px;
}

.ci-tray-head .ci-zoom {
	margin-left: auto;
}

.ci-tray-toggle:hover,
.ci-tray-toggle:focus-visible {
	border-color: var(--ci-accent);
	color: var(--ci-accent);
}

.ci-tray-chevron {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.28s ease;
}

.ci-tray[data-open="0"] .ci-tray-chevron {
	transform: rotate(180deg);
}

/* The 0fr collapse only ever collapses the first grid row, so everything that
   folds has to live inside one child. Three siblings meant the tiles and chips
   sat in implicit rows and kept their height. */
.ci-tray[data-open="0"] .ci-tray-body {
	grid-template-rows: 0fr;
	opacity: 0;
	border-top-color: transparent;
	pointer-events: none;
}

.ci-tray-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 10px !important;
	flex-wrap: wrap;
}

.ci-tray .ci-tiles {
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	margin-top: 10px;
}

.ci-tray .ci-cross {
	margin: 10px 0 0;
	padding-bottom: 12px;
	border-top: 1px solid var(--ci-line-soft);
	padding-top: 12px;
	max-height: 34vh;
	overflow-y: auto;
}

.ci-tray .ci-search-wrap {
	flex: 1 1 150px;
	margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ci-tray-body,
	.ci-tray-chevron {
		transition: none;
	}
}

@media (max-width: 600px) {
	.ci-tray {
		right: 10px;
		left: 10px;
		bottom: 10px;
		width: auto;
	}
}


/* Filter tray
   -----------
   A floating panel rather than a column beside the board, so the atlas keeps
   the full width. Collapses to its top row, which stays usable. */

.ci-tray {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 60;
	/* Wide enough for the view switch, the zoom slider and the collapse button
	   to share one row, with room for the family chips below. */
	width: 550px;
	max-width: calc(100vw - 48px);
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(14px);
	border: 1px solid var(--ci-line);
	border-radius: 14px;
	box-shadow: 0 16px 40px -12px rgba(52, 88, 250, 0.24);
	padding: 14px 16px 16px;
	overflow: hidden;
}

.ci-tray-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	padding: 10px 12px;
}

.ci-tray-toggle {
	width: 26px;
	height: 26px;
	flex: none;
	margin-left: auto;
	border-radius: 8px;
	border: 1px solid var(--ci-line-strong, #d3d8e3);
	background: var(--ci-panel);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ci-muted);
	padding: 0;
	transition: transform 0.22s, background 0.15s;
	appearance: none;
}

.ci-tray-toggle:hover {
	background: var(--ci-surface);
}

.ci-tray[data-open="0"] .ci-tray-toggle {
	transform: rotate(180deg);
}

/* Height rather than grid rows: the panel has one child and a transition on
   max-height animates without needing a measured value. */
.ci-tray-body {
	margin-top: 13px;
	overflow: hidden;
	max-height: 800px;
	opacity: 1;
	transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease;
	display: grid;
	grid-template-rows: 1fr;
	border-top: 1px solid var(--ci-line-soft);
}

.ci-tray[data-open="0"] .ci-tray-body {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	pointer-events: none;
}

.ci-tray-inner {
	min-height: 0;
	overflow: hidden;
	padding: 0 12px;
}

/* Key card
   --------
   A sample tile with each field named, connected by a rule ending in a dot on
   the tile's edge. Fixed at 384 by 152 so the connectors can be drawn at known
   coordinates instead of chased with CSS. */

.ci-legend-card {
	position: absolute;
	background: var(--ci-surface);
	border: 1px solid var(--ci-line);
	border-radius: 14px;
	box-shadow: 0 16px 36px -12px rgba(52, 88, 250, 0.22);
	padding: 16px 22px 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	z-index: 15;
}

.ci-key-title {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ci-muted);
	margin: 0 0 8px;
	align-self: flex-start;
}

.ci-key-diagram {
	position: relative;
	/* Fixed, and never squashed. The SVG connectors scale with their viewBox
	   while the sample tile is positioned in pixels, so letting the box shrink
	   pulls the lines away from the fields they point at. Where the card is
	   too small, the whole diagram is scaled as one instead. */
	width: 384px;
	height: 152px;
	flex: none;
	transform: scale(var(--ci-key-scale, 1));
	transform-origin: center center;
}

.ci-key-diagram svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ci-key-diagram svg line {
	stroke: var(--ci-line-strong, #d3d8e3);
	stroke-width: 1;
}

.ci-key-diagram svg circle {
	fill: var(--ci-muted);
}

.ci-key-label {
	position: absolute;
	font-size: 9.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ci-muted);
	font-weight: 700;
	white-space: nowrap;
	transform: translateY(-50%);
}

.ci-key-label.is-num,
.ci-key-label.is-name,
.ci-key-label.is-formula {
	left: 0;
}

.ci-key-label.is-mass,
.ci-key-label.is-sym {
	right: 0;
	text-align: right;
}

/* The sample tile, larger than a real one so its fields are legible. */
.ci-node.ci-key-tile {
	position: absolute;
	left: 148px;
	top: 22px;
	width: 104px;
	height: 120px;
	cursor: default;
}

/* The key tile is a diagram, not a real tile: it is drawn larger so every
   field can be read, and the numbers sit out at the edges where the connectors
   meet them rather than tucked into the middle. */
.ci-key-tile .ci-node-in {
	width: 100%;
	padding: 7px 6px 7px;
}

.ci-key-tile .ci-node-top {
	/* Pushed out past the inner padding, so the index number and the weight
	   land on the left and right edges the lines point at. */
	margin: 0 -3px;
}

.ci-key-tile .ci-node-sym {
	font-size: 25px;
}

.ci-key-tile .ci-node-nm {
	font-size: 11px;
	-webkit-line-clamp: 2;
}

.ci-key-tile .ci-node-ms {
	font-size: 10px;
}

.ci-key-tile .ci-node-num {
	font-size: 12px;
	font-weight: 600;
}

.ci-key-tile .ci-node-fm {
	font-size: 9.5px;
}

/* The key is a fixed size, so a board zoomed far out should not shrink its
   text into nothing along with everything else. */
.ci-board.is-far .ci-key-tile .ci-node-sym {
	color: #8a93a1;
	font-size: 19px;
}

.ci-board.is-far .ci-key-tile .ci-node-num,
.ci-board.is-far .ci-key-tile .ci-node-ms,
.ci-board.is-far .ci-key-tile .ci-node-fm,
.ci-board.is-far .ci-key-tile .ci-node-nm {
	display: block;
}



.ci-board.is-far .ci-node.ci-key-tile {
	background: color-mix(in srgb, var(--tc, #8a93a1) 12%, #fff);
	border-color: color-mix(in srgb, var(--tc, #8a93a1) 52%, #fff);
	border-radius: 8px;
}

.ci-board.is-far .ci-key-tile .ci-node-in {
	background: transparent;
}

/* Compound detail panel
   ---------------------
   Two columns: the structure and identity on a tinted left, everything else on
   the right. Ported from the design. */

.ci-modal-scrim {
	position: fixed;
	inset: 0;
	background: rgba(19, 27, 46, 0.32);
	backdrop-filter: blur(2px);
	z-index: var(--ci-modal-layer, 1000);
}

.ci-modal-scrim[hidden] {
	display: none;
}

.ci-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: min(980px, 94vw);
	/* Dynamic viewport units where they exist: on a phone the browser chrome
	   comes and goes, and 100vh measures the taller state, so a panel sized to
	   it hangs off the screen. */
	max-height: calc(100vh - 28px);
	max-height: calc(100dvh - 28px);
	display: flex;
	flex-direction: column;
	background: var(--ci-surface);
	border: 1px solid var(--ci-line);
	border-radius: 16px;
	box-shadow: 0 30px 70px -20px rgba(19, 27, 46, 0.35);
	transform: translate(-50%, -50%);
	z-index: calc(var(--ci-modal-layer, 1000) + 1);
	overflow: hidden;
	padding: 0;
}

.ci-modal[hidden] {
	display: none;
}

body.ci-modal-open {
	overflow: hidden;
}

/* Pinned to the panel, which does not scroll, so it stays reachable however
   far down the content the reader is. */
.ci-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	box-shadow: 0 2px 8px rgba(19, 27, 46, 0.14);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--ci-line);
	background: var(--ci-surface);
	font-size: 16px;
	color: var(--ci-muted);
	cursor: pointer;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: 0.15s;
}

.ci-modal-close:hover,
.ci-modal-close:focus-visible {
	background: var(--ci-panel);
	color: var(--ci-ink);
}

.ci-modal-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	/* One scroll for the whole panel rather than one per column. Two
	   independent scrolls on a short screen meant the top of the panel, and
	   with it the close button, could sit above the viewport. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Left: identity and structure */

.ci-p-left {
	display: flex;
	flex-direction: column;
	background: var(--ci-panel);
	border-right: 1px solid var(--ci-line);
	min-width: 0;
}

.ci-p-identity {
	padding: 22px 24px 18px;
}

.ci-p-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--dc, #3458fa) 68%, #202729);
	background: color-mix(in srgb, var(--dc, #3458fa) 15%, #fff);
	padding: 5px 11px;
	border-radius: 8px;
	margin-bottom: 13px;
	width: auto;
	height: auto;
}

.ci-p-name {
	font-family: var(--body, Georgia, serif);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 0 0 3px;
	color: var(--ci-ink);
}

.ci-p-abbr {
	font-family: var(--ci-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--ci-accent);
	margin: 0;
}

.ci-p-alias {
	font-size: 12.5px;
	color: var(--ci-muted);
	font-style: italic;
	margin: 4px 0 0;
}

/* Inset rather than full bleed, so the panel's own colour shows down each
   side and the viewer reads as a thing sitting on the page. */
.ci-p-stage {
	position: relative;
	height: 200px;
	max-height: 30vh;
	flex-shrink: 0;
	background: #eef1ff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 15px;
	border-radius: 8px;
}

.ci-p-stage canvas {
	display: block;
}

.ci-p-stage-status {
	margin: 0;
	font-size: 12px;
	color: var(--ci-muted);
}

.ci-p-spin {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	appearance: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--ci-line);
	background: var(--ci-surface);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--ci-accent);
}

.ci-p-spin-icon {
	position: relative;
	display: block;
	width: 10px;
	height: 12px;
}

.ci-p-spin.is-playing .ci-p-spin-icon::before,
.ci-p-spin.is-playing .ci-p-spin-icon::after {
	content: "";
	position: absolute;
	top: 0;
	width: 3px;
	height: 12px;
	border-radius: 1px;
	background: currentColor;
}

.ci-p-spin.is-playing .ci-p-spin-icon::before { left: 0; }
.ci-p-spin.is-playing .ci-p-spin-icon::after { right: 0; }

.ci-p-spin:not(.is-playing) .ci-p-spin-icon::before {
	content: "";
	position: absolute;
	top: 0;
	left: 2px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid currentColor;
}

.ci-p-stage-note {
	font-size: 11px;
	color: var(--ci-muted);
	text-align: center;
	margin: 8px 0 0;
	padding: 0 24px;
}

/* Sits directly under the structure rather than being pushed to the bottom of
   the column: the space it left looked like something had failed to load. */
.ci-p-left-foot {
	padding: 14px 24px 18px;
}

.ci-p-section-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ci-ink);
	margin: 0 0 10px;
}

.ci-p-elements {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ci-p-element {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--ci-muted);
}

.ci-p-element-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid rgba(19, 27, 46, 0.2);
	flex: 0 0 auto;
}

.ci-p-styles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 12px;
}

.ci-p-style {
	appearance: none;
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	padding: 7px 4px;
	border: 1px solid var(--ci-line);
	border-radius: 8px;
	background: var(--ci-surface);
	color: var(--ci-muted);
	cursor: pointer;
}

.ci-p-style:hover {
	border-color: var(--ci-accent);
}

.ci-p-style.is-active {
	border-color: var(--ci-accent);
	color: var(--ci-accent);
	background: var(--accent-soft, #e9edfe);
}

/* Right: everything else */

.ci-p-right {
	padding: 22px 24px 24px;
	min-width: 0;
}

.ci-p-excerpt {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ci-muted);
	margin: 12px 0 0;
	padding: 11px 13px;
	background: var(--ci-panel);
	border-left: 3px solid var(--dc, var(--ci-accent));
	border-radius: 0 8px 8px 0;
}

.ci-p-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--ci-line);
	border: 1px solid var(--ci-line);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
}

.ci-p-fact {
	background: var(--ci-surface);
	padding: 9px 11px;
	border: 0;
	border-radius: 0;
}

.ci-p-fact-label {
	display: block;
	font-size: 9px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ci-muted);
	margin-bottom: 3px;
}

.ci-p-fact-value,
.ci-p-formula {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ci-ink);
	font-family: var(--ci-mono);
	overflow: hidden;
	text-overflow: ellipsis;
}

.ci-p-formula sub {
	font-size: 0.72em;
	vertical-align: baseline;
	position: relative;
	bottom: -0.22em;
}

/* Where to buy */

.ci-p-resources {
	border: 1px solid var(--ci-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--data-soft, #fce7f3);
	padding: 4px 12px;
	margin-bottom: 16px;
}

.ci-p-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
}

.ci-p-brand + .ci-p-brand {
	border-top: 1px solid rgba(236, 72, 153, 0.18);
}

.ci-p-brand-mark {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ci-p-brand-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ci-p-brand-mark.is-letter {
	font-size: 12px;
	font-weight: 700;
	color: var(--data, #ec4899);
}

.ci-p-brand-text {
	display: flex;
	align-items: baseline;
	gap: 7px;
	min-width: 0;
	flex: 1 1 auto;
}

.ci-p-brand-name {
	font-size: 12.5px;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ci-p-brand-rating {
	font-family: var(--ci-mono);
	font-size: 11px;
	color: var(--ci-muted);
	flex: 0 0 auto;
}

.ci-p-buy {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--data, #ec4899);
	color: #fff;
}

.ci-p-buy:hover {
	opacity: 0.88;
	color: #fff;
}

/* Reading */

.ci-p-reading {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ci-line);
	border-radius: 12px;
	overflow: hidden;
	background: transparent;
	padding: 2px 14px 4px;
	margin-bottom: 16px;
}

/* Each row lights up on its own rather than the block carrying a permanent
   tint: the colour then means "this one", not "this section". */
.ci-p-article {
	border-radius: 7px;
	margin: 0 -8px;
	padding-left: 8px;
	padding-right: 8px;
	transition: background 0.14s ease, color 0.14s ease;
}

.ci-p-article:hover,
.ci-p-article:focus-visible {
	background: color-mix(in srgb, var(--accent-soft, #e9edfe) 60%, #fff);
	color: var(--ci-accent);
}

.ci-p-article:hover .ci-p-article-arrow {
	color: var(--ci-accent);
}

.ci-p-article {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--ci-ink);
	text-decoration: none;
	padding: 8px 0;
}

.ci-p-article + .ci-p-article {
	border-top: 1px solid rgba(52, 88, 250, 0.16);
}

.ci-p-article:hover {
	color: var(--ci-accent);
}

.ci-p-iupac {
	font-family: var(--ci-mono);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ci-muted);
	margin: 0 0 16px;
	word-break: break-word;
}

.ci-p-effects {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.ci-p-effect {
	font-size: 12px;
	font-weight: 600;
	padding: 5px 11px;
	border-radius: 8px;
	border: 1px solid var(--ci-line);
	color: var(--ci-muted);
	background: var(--ci-panel);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ci-p-effect.is-primary {
	background: var(--dc, var(--ci-accent));
	border-color: var(--dc, var(--ci-accent));
	color: #fff;
}

.ci-p-status {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--ci-line);
	border: 1px solid var(--ci-line);
	border-radius: 12px;
	overflow: hidden;
}

.ci-p-status-cell {
	background: var(--ci-surface);
	padding: 9px 11px;
	border: 0;
}

.ci-p-status-label {
	display: block;
	font-size: 9px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ci-muted);
	margin-bottom: 3px;
}

.ci-p-status-value {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ci-ink);
}

.ci-p-status-value.is-banned {
	color: #c0392b;
}

.ci-p-cta {
	display: block;
	width: auto;
	margin: 0 24px 22px;
	text-align: center;
	background: var(--ci-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 13px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	margin-top: 18px;
	box-shadow: 0 5px 16px rgba(52, 88, 250, 0.3);
	transition: 0.13s;
}

.ci-p-cta:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(52, 88, 250, 0.36);
}

.ci-p-cta-title {
	display: block;
	font-weight: 700;
}

.ci-p-cta-sub {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	opacity: 0.85;
	margin-top: 2px;
}

.ci-p-loading,
.ci-p-res-empty {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 12.5px;
	color: var(--ci-muted);
	padding: 40px 0;
	margin: 0;
}

@media (max-width: 860px) {
	.ci-modal-body {
		grid-template-columns: minmax(0, 1fr);
		overflow-y: auto;
	}

	.ci-p-left {
		border-right: 0;
		border-bottom: 1px solid var(--ci-line);
		overflow: visible;
	}

	.ci-p-right {
		overflow: visible;
	}
}


/* Cards, used by the category archives which list one section at a time
   rather than showing the whole board. */

.ci-card-name {
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}

.ci-card-abbr {
	font-family: var(--ci-mono);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--ci-color, var(--ci-muted));
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ci-card-chem {
	margin-top: auto;
	padding-top: 0.35rem;
	display: block;
	min-width: 0;
	min-height: 1.7rem;
}

.ci-card-formula,
.ci-card-mass {
	display: block;
	font-family: var(--ci-mono);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ci-card-formula {
	font-size: 0.66rem;
	color: var(--ci-ink);
}

.ci-card-mass {
	font-size: 0.62rem;
	color: var(--ci-muted);
}

.ci-card-pending {
	display: block;
	font-size: 0.6rem;
	color: var(--ci-muted);
	font-style: italic;
}

/* Zoom slider
   -----------
   A filled track behind the thumb, the way a volume control shows how far
   along its range it sits. Range inputs need their track and thumb styled
   separately per engine, hence the repetition. */

.ci-zoom {
	flex: 1 1 auto;
	min-width: 0;
}

.ci-zoom-range {
	flex: 1 1 auto;
	min-width: 54px;
	height: 20px;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: pointer;
}

.ci-zoom-range:focus-visible {
	outline: 2px solid var(--ci-accent);
	outline-offset: 3px;
	border-radius: 8px;
}

.ci-zoom-range::-webkit-slider-runnable-track {
	height: 5px;
	border-radius: 8px;
	background: linear-gradient(
		to right,
		var(--ci-accent) 0 var(--ci-filled, 40%),
		var(--ci-line-strong, #d3d8e3) var(--ci-filled, 40%) 100%
	);
}

.ci-zoom-range::-moz-range-track {
	height: 5px;
	border-radius: 8px;
	background: linear-gradient(
		to right,
		var(--ci-accent) 0 var(--ci-filled, 40%),
		var(--ci-line-strong, #d3d8e3) var(--ci-filled, 40%) 100%
	);
}

.ci-zoom-range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -4.5px;
	border-radius: 50%;
	background: var(--ci-surface);
	border: 2px solid var(--ci-accent);
	box-shadow: 0 1px 4px rgba(19, 27, 46, 0.25);
}

.ci-zoom-range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid var(--ci-accent);
	border-radius: 50%;
	background: var(--ci-surface);
	box-shadow: 0 1px 4px rgba(19, 27, 46, 0.25);
}

/* Everything in the tray shares one corner, including the narrowing chips and
   the sub-category chips inside them. */

.ci-tray .ci-chip,
.ci-tray .ci-tile,
.ci-tray button,
.ci-tray input,
.ci-tray select,
.ci-cross-tiles > * {
	border-radius: 8px;
}

.ci-tray .ci-zoom-range,
.ci-tray .ci-chip-dot {
	border-radius: 50%;
}

/* Where to buy
   ------------
   The brand's mark rather than its name, the discount beside it, and the price
   and the way out on the row below. */

.ci-seller-block {
	padding: 18px 24px 22px;
	border-top: 1px solid var(--ci-line);
}

.ci-seller-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ci-seller {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid var(--ci-line);
	border-radius: 12px;
	padding: 11px 13px;
	background: var(--ci-surface);
	transition: border-color 0.15s ease;
}

.ci-seller:hover {
	border-color: var(--ci-accent);
}

.ci-seller-top,
.ci-seller-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* A rectangle the whole mark fits inside, rather than a box the mark is cut to.
   Brand logos are wide lockups; giving them a square or squeezing them by
   height leaves the lettering unreadable. */
.ci-seller-mark {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	width: 140px;
	height: 42px;
	min-width: 0;
	overflow: hidden;
}

.ci-seller-mark img {
	width: 100%;
	height: 100%;
	/* Contain, never cover: the whole logo is the point, so it letterboxes
	   inside the box rather than being cropped to fill it. */
	object-fit: contain;
	object-position: left center;
	display: block;
	border-radius: 0;
}

/* No logo uploaded: the name stands in rather than a gap. */
.ci-seller-mark.is-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--ci-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ci-seller-promo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px dashed color-mix(in srgb, var(--data, #ec4899) 45%, transparent);
	background: var(--data-soft, #fce7f3);
	padding: 4px 5px 4px 9px;
	border-radius: 7px;
	font-size: 11.5px;
	flex: 0 0 auto;
}

.ci-seller-code {
	font-weight: 700;
	color: var(--ci-ink);
	white-space: nowrap;
}

.ci-seller-off {
	color: var(--data, #ec4899);
	font-weight: 600;
	white-space: nowrap;
}

.ci-seller-copy {
	appearance: none;
	border: 0;
	background: var(--data, #ec4899);
	color: #fff;
	font: inherit;
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ci-seller-copy.is-done {
	background: #1c7a4a;
}

.ci-seller-facts {
	display: flex;
	align-items: baseline;
	gap: 9px;
	min-width: 0;
}

.ci-seller-price {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ci-ink);
}

.ci-seller-stock {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #1c7a4a;
}

.ci-seller-rating {
	font-family: var(--ci-mono);
	font-size: 12px;
	color: var(--ci-muted);
}

.ci-seller-go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 10px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: var(--ci-accent);
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ci-seller-go:hover {
	background: var(--accent-hover, #2b49e0);
	color: #fff;
	transform: translateY(-1px);
}

.ci-seller-arrow {
	font-size: 14px;
	line-height: 1;
}

/* Reading */

.ci-p-reading-label {
	font-family: var(--ci-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ci-muted);
	margin: 0 0 4px;
}

.ci-p-article {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ci-p-article-arrow {
	color: var(--ci-muted);
	flex: 0 0 auto;
}

.ci-p-sub-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--ci-ink);
	margin: 16px 0 5px;
}

.ci-p-effect-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.ci-p-effect.is-primary .ci-p-effect-dot {
	background: rgba(255, 255, 255, 0.9) !important;
}

/* Opening
   -------
   The panel is drawn at its final size and squeezed onto the tile for a frame,
   so the browser animates outwards from it. A transform throughout, so the
   panel is never laid out at any size but its own. */

.ci-modal.is-arriving {
	transition: none;
}

.ci-modal.is-growing {
	transition:
		transform 0.42s cubic-bezier(0.16, 0.84, 0.3, 1),
		opacity 0.26s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ci-modal.is-growing {
		transition: none;
	}
}


/* A way through to the rest, so three does not read as all there is. */

.ci-p-more {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--ci-accent);
	text-decoration: none;
	padding: 9px 0 7px;
	border-top: 1px solid rgba(52, 88, 250, 0.16);
	margin-top: 2px;
}

.ci-p-more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ci-p-more--buy {
	border-top: 0;
	padding: 10px 0 0;
	margin-top: 0;
}


/* Star ratings */

.ci-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.ci-star {
	width: 15px;
	height: 15px;
	display: block;
	flex: none;
}

.ci-star .is-full {
	fill: #f5a623;
}

.ci-star .is-empty {
	fill: var(--ci-line-strong, #d3d8e3);
}

.ci-star-lit {
	stop-color: #f5a623;
}

.ci-star-dim {
	stop-color: var(--ci-line-strong, #d3d8e3);
}

.ci-stars-value {
	font-family: var(--ci-mono);
	font-size: 11.5px;
	color: var(--ci-muted);
	margin-left: 5px;
}

/* Where to buy, on the compound page
   ---------------------------------
   One card per seller: who they are and how they rate, a line on what they
   are, then the discount and the way out on a row of their own. */

.ci-brand-outof {
	font-weight: 400;
	color: var(--ci-muted);
	margin-left: 1px;
}

.ci-brand-blurb {
	margin: 0.5rem 0 0;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--ci-muted);
}

/* One line. The coupon gives way before the button does, since a shortened
   code is still readable where a wrapped button leaves the coupon stretched
   across the full width on its own. */
.ci-brand-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	margin-top: 0.85rem;
}

.ci-brand-coupon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Sized by its contents and allowed to shrink, never to grow: growing is
	   what made it fill the row whenever the button wrapped beneath it. */
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	/* Dashed, because a coupon is something to tear off. */
	border: 1px dashed color-mix(in srgb, var(--data, #ec4899) 45%, transparent);
	background: var(--data-soft, #fce7f3);
	border-radius: 10px;
	padding: 8px 8px 8px 12px;
	margin: 0;
}

.ci-coupon-tag {
	width: 15px;
	height: 15px;
	flex: none;
	fill: none;
	stroke: var(--data, #ec4899);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.ci-coupon-tag circle {
	fill: var(--data, #ec4899);
	stroke: none;
}

.ci-brand-coupon code {
	font-family: var(--ci-mono);
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ci-ink);
	background: none;
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.ci-brand-off {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--data, #ec4899);
	white-space: nowrap;
}

.ci-coupon-copy {
	flex: none;
	appearance: none;
	border: 0;
	background: var(--data, #ec4899);
	color: #fff;
	font: inherit;
	font-size: 0.74rem;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ci-coupon-copy.is-done {
	background: #1c7a4a;
}

.ci-brand-go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 20px;
	border-radius: 10px;
	background: var(--ci-accent);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ci-brand-go:hover {
	color: #fff;
	background: var(--accent-hover, #2b49e0);
	transform: translateY(-1px);
}

/* Only where there is genuinely no room for both. */
@media (max-width: 420px) {
	.ci-brand-actions {
		flex-wrap: wrap;
	}

	.ci-brand-coupon,
	.ci-brand-go {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* The per-product list is folded away: the card already links to the first
   one, and a second list of the same names underneath it read as clutter. */
.ci-brand-products.is-hidden {
	display: none;
}

/* ---------------------------------------------------------------------------
   Beta badge, beside the index title.

   Sits inside the <h1>, so it wraps with the title and is announced as part of
   it. Sized in em rather than px: the title is a clamp() that ranges from 30px
   to 44px, and a fixed badge would look pinned on at one end of that and lost
   at the other.
   --------------------------------------------------------------------------- */
.ci-masthead-title .ci-beta {
	display: inline-block;
	/* Lifted off the baseline so it sits with the cap height rather than
	   hanging below the descenders. */
	vertical-align: 0.28em;
	margin-left: 0.32em;
	padding: 0.34em 0.62em;
	border: 1px solid #254CFE;
	border-radius: 8px;
	background: #F0F3FF;
	font-family: var(--ci-mono, ui-monospace, monospace);
	font-size: 0.34em;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: #254CFE;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.ci-masthead-title .ci-beta {
		/* A shade larger relative to the title, which is at its smallest here
		   and would otherwise render the badge close to unreadable. */
		font-size: 0.4em;
		vertical-align: 0.22em;
	}
}

/* ---------------------------------------------------------------------------
   Masthead buttons and the feedback popup.
   --------------------------------------------------------------------------- */
.ci-masthead-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.ci-masthead-copy {
	flex: 1 1 340px;
	min-width: 0;
}

/* The buttons and the line explaining why they are there, as one block.
   ---------------------------------------------------------------------------
   Two bare buttons beside a title do not say why anyone would press them. The
   card gives them a reason, and marks the whole thing as a notice about the
   page rather than part of it. */
.ci-beta-card {
	flex: 0 1 420px;
	padding: 18px 20px;
	border: 1px solid #D5DDFB;
	border-radius: 14px;
	background: #EDF0FD;
}

.ci-beta-card__text {
	margin: 0 0 14px;
	font-family: var(--body, 'PT Serif', Georgia, serif);
	font-size: 15px;
	line-height: 1.6;
	color: #22308A;
}

.ci-beta-card__text strong {
	font-weight: 700;
	color: #16215E;
}

.ci-masthead-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Matched to the site's own buttons.
   ---------------------------------------------------------------------------
   They were mono uppercase, which is this plugin's idiom for labels and
   readouts — right for "MG → ML" on a tile, wrong for something you click. The
   theme's .btn is the display face at .98rem in sentence case, with a two-pixel
   lift on hover. These follow it, at a size that suits sitting beside a title
   rather than in a hero. */
.ci-mbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--display, 'Public Sans', system-ui, sans-serif);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease,
		border-color .18s ease, color .18s ease, filter .18s ease;
}

.ci-mbtn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	flex: 0 0 auto;
}

/* The tour is the outlined one — the same shape as the theme's ghost button. */
/* White on the tinted card, so it reads as a raised control rather than a
   panel of the card itself. */
.ci-mbtn--tour {
	border-color: transparent;
	background: #fff;
	color: var(--ci-ink, #131B2E);
	box-shadow: 0 1px 2px rgba(19, 27, 46, .1);
}

.ci-mbtn--tour:hover,
.ci-mbtn--tour:focus-visible {
	color: var(--accent, #3458FA);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -8px rgba(19, 27, 46, .3);
}

/* And feedback is the filled one, in the site's pink. A beta page asking to be
   told what is wrong should look like it means it. */
.ci-mbtn--feedback {
	background: var(--data, #EC4899);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(236, 72, 153, .5);
}

.ci-mbtn--feedback:hover,
.ci-mbtn--feedback:focus-visible {
	color: #fff;
	filter: brightness(1.07);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -14px rgba(236, 72, 153, .55);
}

.ci-mbtn:focus-visible {
	outline: 2px solid var(--accent, #3458FA);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ci-mbtn:hover,
	.ci-mbtn:focus-visible {
		transform: none;
	}
}

/* ---- the popup ---- */
.ci-fb-locked {
	overflow: hidden;
}

/* The hidden attribute has to win here.
   ---------------------------------------------------------------------------
   [hidden]{display:none} comes from the browser's own stylesheet and carries
   the same weight as a class — and an author rule beats a user-agent one. So
   "display:flex" on this class quietly overrode it, leaving a fixed, full
   screen, fully transparent overlay sitting on top of the index and swallowing
   every click: no zoom, no tiles, nothing.

   Stating it explicitly costs one line and removes the whole class of bug. */
.ci-fb-scrim[hidden] {
	display: none;
}

.ci-fb-scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--ci-modal-layer, 1000) + 200);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(10, 14, 28, .55);
	opacity: 0;
	/* Belt and braces: even mid-fade it must not intercept anything meant for
	   the page underneath. */
	pointer-events: none;
	transition: opacity .18s;
}

.ci-fb-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ci-fb-modal {
	width: min(520px, 100%);
	max-height: 88vh;
	overflow: auto;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 30px 70px -24px rgba(10, 14, 28, .55);
	transform: translateY(8px);
	transition: transform .18s;
}

.ci-fb-scrim.is-open .ci-fb-modal {
	transform: none;
}

.ci-fb-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.ci-fb-title {
	margin: 0;
	font-family: var(--body, 'PT Serif', Georgia, serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.ci-fb-title .ci-beta {
	font-size: .42em;
	vertical-align: .24em;
}

.ci-fb-x {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border: 1px solid var(--ci-line, #E3E9F5);
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 1;
	color: var(--faint, #878e9e);
	cursor: pointer;
}

.ci-fb-x:hover {
	border-color: var(--line-strong, #C7D0E8);
	color: var(--ci-ink, #131B2E);
}

.ci-fb-intro {
	margin: 6px 0 18px;
	font-family: var(--body, 'PT Serif', Georgia, serif);
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted, #4a5060);
}

.ci-fb-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	margin: 0 0 7px;
}

.ci-fb-opt {
	font-weight: 400;
	color: var(--faint, #878e9e);
}

.ci-fb-kinds {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

/* Radios rather than buttons: one choice, keyboard-operable, and it still works
   with no script at all. */
.ci-fb-kind input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ci-fb-kind span {
	display: inline-block;
	padding: 7px 12px;
	border: 1px solid var(--ci-line, #E3E9F5);
	border-radius: 999px;
	font-size: 12.5px;
	color: var(--muted, #4a5060);
	cursor: pointer;
}

.ci-fb-kind span:hover {
	border-color: var(--line-strong, #C7D0E8);
}

.ci-fb-kind input:checked + span {
	border-color: transparent;
	background: #254CFE;
	color: #fff;
	font-weight: 700;
}

.ci-fb-kind input:focus-visible + span {
	outline: 2px solid #254CFE;
	outline-offset: 2px;
}

.ci-fb-text {
	width: 100%;
	min-height: 104px;
	padding: 11px 12px;
	border: 1px solid var(--line-strong, #C7D0E8);
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	resize: vertical;
}

.ci-fb-mail {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line-strong, #C7D0E8);
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
}

.ci-fb-text:focus,
.ci-fb-mail:focus {
	outline: 2px solid #254CFE;
	outline-offset: 1px;
	border-color: transparent;
}

.ci-fb-count {
	display: block;
	text-align: right;
	margin-top: 4px;
	font-family: var(--ci-mono, ui-monospace, monospace);
	font-size: 10.5px;
	color: var(--faint, #878e9e);
}

/* Off screen rather than display:none — a robot reads the stylesheet too, and
   skips anything obviously hidden. */
.ci-fb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ci-fb-ctx {
	margin: 14px 0 0;
	padding: 10px 12px;
	border: 1px dashed var(--line-strong, #C7D0E8);
	border-radius: 10px;
	background: var(--paper-2, #F7F9FD);
}

.ci-fb-ctx summary {
	font-family: var(--ci-mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--faint, #878e9e);
	cursor: pointer;
}

.ci-fb-ctx dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 14px;
	margin: 9px 0 0;
	font-size: 12px;
}

.ci-fb-ctx dt {
	color: var(--faint, #878e9e);
}

.ci-fb-ctx dd {
	margin: 0;
	font-family: var(--ci-mono, ui-monospace, monospace);
	font-size: 11px;
	overflow-wrap: anywhere;
}

.ci-fb-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
}

.ci-fb-cancel {
	border: 0;
	background: none;
	font: inherit;
	font-size: 13.5px;
	color: var(--faint, #878e9e);
	cursor: pointer;
	padding: 8px 2px;
}

.ci-fb-cancel:hover {
	color: var(--ci-ink, #131B2E);
}

.ci-fb-send {
	padding: 11px 22px;
	border: 0;
	border-radius: 9px;
	background: #254CFE;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.ci-fb-send:disabled {
	opacity: .4;
	cursor: default;
}

.ci-fb-error {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-left: 3px solid #B32D2E;
	border-radius: 0 8px 8px 0;
	background: #FDF0F0;
	font-size: 13px;
	line-height: 1.5;
	color: #7A1F20;
}

.ci-fb-priv {
	margin: 12px 0 0;
	font-family: var(--body, 'PT Serif', Georgia, serif);
	font-size: 12px;
	line-height: 1.5;
	color: var(--faint, #878e9e);
}

.ci-fb-done {
	text-align: center;
	padding: 26px 8px 10px;
}

.ci-fb-done b {
	display: block;
	margin-bottom: 18px;
	font-family: var(--body, 'PT Serif', Georgia, serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

@media (max-width: 720px) {
	.ci-beta-card {
		flex: 1 1 100%;
		padding: 16px;
	}

	.ci-masthead-actions .ci-mbtn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ci-fb-modal {
		padding: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ci-fb-scrim,
	.ci-fb-modal,
	.ci-mbtn {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   The short description.

   Three places, three treatments:

     the index panel   two lines, cut with an ellipsis. There is no room for
                       more and the full text is one tap away on the compound's
                       own page.

     a phone           two lines with a More toggle, because there is nowhere
                       else to send the reader.

     a desktop         the lot, full width, no toggle. Nothing hidden.
   --------------------------------------------------------------------------- */
.ci-p-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- the compound page ---- */
.ci-lede-wrap {
	position: relative;
}

/* The toggle exists in the markup at every width but is only shown where the
   text is actually cut. A button that expands nothing is worse than none. */
.ci-lede-more {
	display: none;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #254CFE;
	cursor: pointer;
}

.ci-lede-more__shut {
	display: none;
}

@media (max-width: 782px) {
	.ci-lede-wrap:not(.is-open) .ci-lede {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.ci-lede-more {
		display: inline-block;
	}

	.ci-lede-wrap.is-open .ci-lede-more__open {
		display: none;
	}

	.ci-lede-wrap.is-open .ci-lede-more__shut {
		display: inline;
	}
}

/* ---------------------------------------------------------------------------
   The index number in the panel badge, and the More toggle beneath it.
   --------------------------------------------------------------------------- */
.ci-p-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* The number sits in its own disc, so the badge's own padding has to give
	   way on the left. */
	padding-left: 5px;
}

.ci-p-badge__n {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: 999px;
	/* A shade of the compound's own colour, like everything else in the badge,
	   so the two read as one object rather than a label with a sticker on it. */
	background: color-mix(in srgb, var(--dc, var(--ci-accent)) 22%, #fff);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: 0;
}

.ci-p-excerpt-wrap {
	margin: 12px 0 0;
}

.ci-p-excerpt-wrap .ci-p-excerpt {
	margin: 0;
}

/* Expanded, the clamp comes off. */
.ci-p-excerpt-wrap.is-open .ci-p-excerpt {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}

.ci-p-more-toggle {
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--dc, var(--ci-accent));
	cursor: pointer;
}

.ci-p-more-toggle:hover {
	text-decoration: underline;
}

.ci-p-more-toggle__shut {
	display: none;
}

.ci-p-excerpt-wrap.is-open .ci-p-more-toggle__open {
	display: none;
}

.ci-p-excerpt-wrap.is-open .ci-p-more-toggle__shut {
	display: inline;
}

/* ---- the index number on the compound page ---- */
.ci-index-no {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 0;
	padding: 4px 12px 4px 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ci-color, var(--ci-accent)) 12%, #fff);
	font-family: var(--ci-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ci-color, var(--ci-accent)) 70%, #101725);
}

.ci-index-no b {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ci-color, var(--ci-accent)) 26%, #fff);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}