/**
 * Documentation — the two-column reading layout and the contents pages.
 *
 * Loaded only on the doc templates; see owldraftdotcom_docs_styles().
 *
 * Every colour is one of Stoat's own tokens, so the docs follow the Customizer
 * with the rest of the site.
 *
 * @package owldraftdotcom
 */

/* ---------- a single doc ---------- */

/*
 * The layout breaks out of Stoat's --content-width, because a reading column
 * with a sidebar beside it is narrower than a reading column on its own, and
 * documentation is the one place on this site where the sidebar earns the
 * width back. The cap is the theme's own container width, so it still stops
 * where every other full-width element on the site stops.
 */
.owldraft-doc-layout {
	display: grid;
	/*
	 * 15rem of track holding 13rem of list: the rest is the padding that
	 * carries the rule, so the hairline lands halfway between the columns
	 * rather than tight against one of them.
	 *
	 * The two side columns are the same width, because they are the same kind
	 * of thing — a list of links either side of the reading column — and two
	 * near-but-not-quite widths read as a mistake rather than as a decision.
	 * 15 is the narrowest that holds the longest doc title on one line; going
	 * under it buys the reading column thirty pixels and costs the contents a
	 * wrapped row on every page, which is the worse trade.
	 */
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: 2rem;
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
}

/*
 * The "On this page" rail, once there is room for it without taking the
 * reading column below Stoat's --content-width. Below this the doc is already
 * one screen wide and the headings are a flick apart.
 */
@media (min-width: 1200px) {
	.owldraft-doc-layout.has-rail {
		grid-template-columns: 15rem minmax(0, 1fr) 15rem;
	}
}

/* One column below the breakpoint, contents first — on a phone the contents is
   how you got here and skipping past it costs one flick. */
@media (max-width: 900px) {
	.owldraft-doc-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/*
 * The two side columns start level with the doc's own first line, which gets
 * its inset from .single-header's top padding. So they take the same token —
 * and the font-size that shrinks this column sits on the list inside it rather
 * than here, because --spacing-lg is an em and would come out short against a
 * smaller font.
 */
/*
 * Left, not centred. .stoat-single centres itself in whatever it is given,
 * which is right for a page with nothing beside it; here the cell is wider
 * than the reading column whenever there is no rail, and a centred article
 * would start 120px further from the rule than the same article on a doc with
 * one. The text lines up between the two pages instead.
 */
.owldraft-doc-layout > .owldraft-doc {
	margin-inline: 0;
}

.owldraft-doc-nav {
	padding-top: var(--spacing-lg);
	line-height: 1.4;
}

@media (min-width: 901px) {
	.owldraft-doc-nav {
		/*
		 * Static, not sticky. A doc is read top to bottom and left behind; the
		 * contents is what you came in through, not something to keep in view
		 * the whole way down — and a panel that detaches and follows the
		 * scroll is movement on a page that should hold still.
		 *
		 * The rule is the nav's own right edge rather than a border on the
		 * article, so it stretches with the grid row: it runs the full height
		 * of the page, which is what separates two columns. Drawn against the
		 * nav's padding so it sits in the middle of the gutter.
		 */
		padding-right: 2rem;
		border-right: 1px solid var(--border);
	}

	/*
	 * The rule is the grid row's full height, and the row ends where the
	 * content does — leaving it stopping in mid-air above the footer, with the
	 * footer's own top margin as the gap. So the columns carry that space
	 * themselves and the footer gives it up: the row now ends exactly on the
	 * footer's hairline and the two lines meet.
	 *
	 * On both columns rather than just the article, because either one can be
	 * the taller and it is the taller that sets where the row ends.
	 */
	.owldraft-doc-nav,
	.owldraft-doc,
	.owldraft-doc-toc {
		padding-bottom: var(--spacing-2xl);
	}

	body.single-doc .site-footer {
		margin-top: 0;
	}
}

.owldraft-doc-nav__title {
	margin: 0 0 0.5em;
	padding-left: 0.6em;
	font-size: 0.76em;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--meta);
}

.owldraft-doc-nav__title a {
	color: inherit;
	text-decoration: none;
}

/* The contents page is the one place this heading is also a destination you
   can be standing on. */
.owldraft-doc-nav__title.is-current {
	color: var(--text);
}

/*
 * No spine, and no marker on it. The hairline down the left of a contents list
 * is a line the eye has to keep crossing to read the words beside it, and with
 * a caret now on the right of every row the column already has two vertical
 * edges without adding a third. Where you are and what you are pointing at are
 * both said with a filled row instead, which is the same cue twice at two
 * strengths rather than two different cues.
 *
 * The title above the list takes the same left padding as the rows, so the
 * heading and the docs under it stand in one column.
 */
.owldraft-doc-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.92em;
}

.owldraft-doc-nav__list li {
	margin: 0;
}

/* A breath between top-level groups, and none between the rows inside one:
   the gap is what says where a group ends now that no rule does. */
.owldraft-doc-nav > .owldraft-doc-nav__list > li + li {
	margin-top: 0.2em;
}

/*
 * The row, not the link, is what is filled: the caret sits in the row too, and
 * a highlight that stopped at the edge of the text would leave it hanging
 * outside the thing it belongs to.
 */
/*
 * Centred, not stretched. With both children set to stretch, the caret and the
 * title were each sizing themselves against the other and a row with a caret
 * came out half as tall again as one without — the fill on it then read as a
 * button rather than as a line in a list. The title alone decides the height
 * now; the caret is a fixed square that sits in the middle of it.
 */
.owldraft-doc-nav__row {
	display: flex;
	align-items: center;
	transition: background-color 0.12s ease;
}

.owldraft-doc-nav__row > a {
	flex: 1 1 auto;
	padding: 0.35em 0.2em 0.35em 0.6em;
	color: var(--dark-gray);
	text-decoration: none;
	text-wrap: pretty;
}

/* Grey on hover, accent on the page you are on — the same gesture at two
   strengths, so one reads as "under the pointer" and the other as "here". */
.owldraft-doc-nav__row:hover {
	background: color-mix(in srgb, var(--text) 5%, transparent);
}

.owldraft-doc-nav__row:hover > a {
	color: var(--text);
}

.owldraft-doc-nav__list li.is-current > .owldraft-doc-nav__row,
.owldraft-doc-nav__list li.is-current > .owldraft-doc-nav__row:hover {
	background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.owldraft-doc-nav__list li.is-current > .owldraft-doc-nav__row > a {
	color: var(--text);
	font-weight: 600;
}

/*
 * The pages above this one in the tree. Marked, but quietly: the question is
 * which branch is open, and a second row shouting is a second answer to a
 * question with one.
 */
.owldraft-doc-nav__list li.is-ancestor > .owldraft-doc-nav__row > a {
	color: var(--text);
	font-weight: 600;
}

.owldraft-doc-nav__list li.is-depth-1 > .owldraft-doc-nav__row > a { padding-left: 1.7em; }
.owldraft-doc-nav__list li.is-depth-2 > .owldraft-doc-nav__row > a { padding-left: 2.8em; }

/* THE CARET
------------------------------------------------ */

/*
 * On the right of the row, and pointing right when the branch is shut. A
 * separate control from the title beside it, because the title is a doc you
 * can read in its own right — clicking the word should open the page, not
 * unfold the list under it.
 */
.owldraft-doc-nav__toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	/*
	 * Stoat gives every <button> a 48px touch target, which is right for a
	 * button and wrong for a caret at the end of a line in a list: min-height
	 * beats height, so the row it sat in came out half as tall again as its
	 * neighbours. The hit area is the row anyway, not the glyph.
	 */
	min-height: 0;
	padding: 0;
	margin-right: 0.15em;
	background: none;
	border: 0;
	/* The button's own font metrics are the UA's, not the list's; zeroed so
	   they cannot add a line box under a 12px glyph. */
	font: inherit;
	line-height: 0;
	color: var(--meta);
	cursor: pointer;
}

.owldraft-doc-nav__toggle:hover {
	color: var(--text);
}

.owldraft-doc-nav__toggle svg {
	display: block;
	transition: transform 0.15s ease;
}

.owldraft-doc-nav__list li.is-open > .owldraft-doc-nav__row .owldraft-doc-nav__toggle svg {
	transform: rotate(90deg);
}

/* The state itself. Set on the server, so the list is right in the first
   frame rather than folding itself up after the page has been painted. */
.owldraft-doc-nav__list li:not(.is-open) > .owldraft-doc-nav__kids {
	display: none;
}

.owldraft-doc-nav__sub {
	font-size: 1em;
}

.owldraft-doc__product {
	margin: 0 0 0.6em;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.owldraft-doc__product a {
	color: var(--accent);
	text-decoration: none;
}

/*
 * The trail above the title.
 *
 * Not set in the small caps the product eyebrow used: four levels of it would
 * be a line of shouting above the headline, and the trail is meant to be read
 * only when the reader wonders where they are.
 */
.owldraft-doc-crumbs {
	margin: 0 0 0.7em;
	font-size: 0.82em;
	line-height: 1.5;
	color: var(--meta);
}

.owldraft-doc-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.45em;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The separator belongs to the crumb that follows, so it wraps with it — a
   chevron left hanging at the end of a line is a trail that looks broken. */
.owldraft-doc-crumbs li + li::before {
	content: "›";
	margin-right: 0.45em;
	color: var(--border-strong, var(--gray));
}

.owldraft-doc-crumbs a {
	color: inherit;
	text-decoration: none;
}

.owldraft-doc-crumbs a:hover,
.owldraft-doc-crumbs a:focus {
	color: var(--text);
	text-decoration: underline;
}

/* The last crumb is the page you are on. Darker, because it is the answer to
   the question the trail asks. */
.owldraft-doc-crumbs [aria-current="page"] {
	color: var(--text);
}

.owldraft-doc__footer {
	margin-top: var(--spacing-xl);
	padding-top: 1.2em;
	border-top: 1px solid var(--border);
	font-size: 0.88em;
	color: var(--meta);
}

.owldraft-doc__footer p {
	margin: 0 0 0.35em;
}

.owldraft-doc__topics a {
	display: inline-block;
	margin-right: 0.5em;
}

/* ---------- the "on this page" rail ---------- */

/*
 * The one thing on the page that follows the scroll. The contents on the left
 * says where the doc sits in the book and does not change while you read it;
 * this says where you are inside the doc, which does.
 */
/*
 * The column. Stretched by the grid like the nav opposite it, and carrying the
 * matching rule on its inner edge: the doc is then a reading column with a
 * hairline down either side of it, rather than one bounded on the left and
 * running out into the margin on the right.
 */
.owldraft-doc-toc {
	padding-left: 2rem;
	border-left: 1px solid var(--border);
	line-height: 1.4;
}

/* The part that follows the scroll. Separate from the column because a sticky
   box is as tall as its contents, and the rule has to be as tall as the page.

   Margin, not padding: it sets where the rail starts, and then hands over to
   `top` once the page has scrolled far enough to stick it. Padding would ride
   along inside the box and hold it 2.8em below the window. */
.owldraft-doc-toc__inner {
	position: sticky;
	top: 2rem;
	margin-top: var(--spacing-lg);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
}

/* Hidden rather than dropped from the markup below 1200px: the column is not
   there to put it in, and the contents on the left still navigates. */
@media (max-width: 1199px) {
	.owldraft-doc-toc {
		display: none;
	}
}

.owldraft-doc-toc__title {
	margin: 0 0 0.7em;
	font-size: 0.76em;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--meta);
}

/* No hairline down this list, unlike the contents opposite: the column itself
   now carries one, and a second line 2rem inside the first is a line with
   nothing on the other side of it. */
.owldraft-doc-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.82em;
}

.owldraft-doc-toc__list li {
	margin: 0;
}

.owldraft-doc-toc__list a {
	display: block;
	/* A little more between rows than inside a wrapped one, so a heading that
	   takes two lines still reads as one entry. */
	padding: 0.35em 0;
	color: var(--meta);
	text-decoration: none;
	text-wrap: pretty;
}

.owldraft-doc-toc__list a:hover,
.owldraft-doc-toc__list a:focus {
	color: var(--text);
}

/*
 * Where the reader is, set by assets/doc-toc.js. Weight and colour only: the
 * rail has no hairline for a marker to sit against any more, and a bar
 * floating on its own would be a second thing to explain.
 */
.owldraft-doc-toc__list li.is-current > a {
	color: var(--text);
	font-weight: 600;
}

/* An h3 is a step inside the section above it, not a sibling of it. */
.owldraft-doc-toc__list li.is-depth-1 a {
	padding-left: 1em;
}

/* ---------- a product's contents page ---------- */

/*
 * The product page is a doc that happens to be a list, so it takes the doc
 * column, the doc typography and the doc nav wholesale. What is different is
 * below: the facts panel, and the topic list that stands in for a body.
 */

/* THE FACTS
------------------------------------------------ */

/*
 * Rows of label and value, hairlined like the tables in the docs themselves.
 * A grid rather than a floated dl: the labels then share one column and line
 * up, which is the whole reason for putting the facts in fields.
 */
.owldraft-product-info {
	margin: 0;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 0.94em;
	line-height: 1.5;
	overflow: hidden;
}

.owldraft-product-info__row {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	border-top: 1px solid var(--border);
}

.owldraft-product-info__row:first-child {
	border-top: 0;
}

.owldraft-product-info dt,
.owldraft-product-info dd {
	margin: 0;
	padding: 0.5em 0.8em;
}

.owldraft-product-info dt {
	color: var(--meta);
	background: color-mix(in srgb, var(--text) 3%, transparent);
}

.owldraft-product-info dd {
	font-weight: 600;
}

/* On a phone the label column would leave the values in a gutter; stacked,
   the label is a caption over its value. */
@media (max-width: 600px) {
	.owldraft-product-info__row {
		grid-template-columns: 1fr;
	}

	.owldraft-product-info dt {
		padding-bottom: 0;
		background: none;
	}

	.owldraft-product-info dd {
		padding-top: 0.15em;
	}
}

/* ---------- the doc itself: reading a manual, not an essay ---------- */

/*
 * WHAT THIS SECTION IS FOR
 * ------------------------------------------------
 * Stoat styles an article: one voice, read top to bottom, where the writer's
 * job is to keep you going. A reference page is read the opposite way — you
 * arrive from a search, look for one heading, take one table or one code
 * block, and leave. The rules below are what the docs sites that get read
 * (GitHub, Stripe, MDN) all do to serve that, and none of them are decoration:
 *
 *   1. A section boundary you can see from a scroll position. GitHub rules off
 *      every h2; that hairline is doing more work than any amount of extra
 *      white space, because a gap is ambiguous — it could be a wide paragraph
 *      break — and a line is not.
 *   2. Headings that belong to what follows them. Four times as much space
 *      above an h2 as below it, so a heading is never read as the tail of the
 *      section it ends.
 *   3. A tighter flow than prose. Paragraphs in a manual are short and there
 *      are many of them; the editorial gap between two of them reads as a
 *      missing sentence.
 *   4. Looser lines within a paragraph. Technical sentences carry names,
 *      paths and numbers that the eye has to fix on rather than sweep past.
 *   5. Every furniture element — table, screenshot, note, code — drawn with
 *      the same hairline in the same grey, so the page reads as one object
 *      and the writer's separator is the only strong line on it.
 *
 * Scoped to .owldraft-doc throughout: this is how a doc reads, not how the
 * marketing pages should.
 */

/*
 * The title block's own bottom padding is Stoat's --spacing-lg, set for an
 * article where the headline is the whole of the opening. Here the subtitle
 * runs straight into the first paragraph of the instructions, and two and a
 * half paragraph-gaps between them reads as a missing line rather than as a
 * heading. The top padding stays: it is what the two side columns line up
 * against.
 */
.owldraft-doc .single-header {
	padding-bottom: 1.8em;
}

.owldraft-doc .entry-content {
	line-height: 1.65;
}

/* THE SECTION RULE
------------------------------------------------ */

.owldraft-doc .entry-content h2 {
	margin-top: 1.8em;
	margin-bottom: 0.55em;
	padding-top: 1.1em;
	border-top: 1px solid var(--border);
	font-size: 1.45em;
	letter-spacing: -0.01em;
}

/* A separator the writer typed is already a section break, and the h2 that
   follows it would draw a second line 1.4em under the first. */
.owldraft-doc .entry-content .wp-block-separator + h2 {
	margin-top: var(--spacing);
	padding-top: 0;
	border-top: 0;
}

.owldraft-doc .entry-content h3 {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	font-size: 1.12em;
}

.owldraft-doc .entry-content h4 {
	margin-top: 1.6em;
	margin-bottom: 0.4em;
	font-size: 1em;
}

/* Jumping to a heading should not land its rule against the top of the
   window — and the rule, not the text, is the top of the section. */
.owldraft-doc .entry-content :is(h2, h3, h4) {
	scroll-margin-top: 1.5rem;
}

/* FLOW
------------------------------------------------ */

/* Closer than Stoat's --spacing. Beats the parent's own flow rule on
   specificity rather than by !important; the :not() list has to match it, or
   headings would lose the rhythm set above. */
.owldraft-doc .entry-content > *:not(h2, h3, h4, h5, h6) {
	margin-top: 1.1em;
}

.owldraft-doc .entry-content ul,
.owldraft-doc .entry-content ol {
	padding-left: 1.4em;
}

/* Tighter than prose, but not so tight that a two-line item runs into the
   next one — the gap between items stays bigger than the gap between lines. */
.owldraft-doc .entry-content li + li {
	margin-top: 0.35em;
}

.owldraft-doc .entry-content li > ul,
.owldraft-doc .entry-content li > ol {
	margin-top: 0.35em;
}

/* A link in a paragraph of a manual is often the next thing you are meant to
   do, so it is underlined rather than left to colour alone. */
.owldraft-doc .entry-content p a,
.owldraft-doc .entry-content li a,
.owldraft-doc .entry-content td a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* TABLES
------------------------------------------------ */

/*
 * Core's own block CSS draws the cell borders in currentColor, which is the
 * body's near-black: a five-row table then arrives as a grid of heavy lines
 * that outweighs every heading around it. Same hairline as everything else,
 * and the header carries a wash instead of a 3px underscore.
 */
.owldraft-doc .entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94em;
	line-height: 1.5;
}

.owldraft-doc .entry-content .wp-block-table th,
.owldraft-doc .entry-content .wp-block-table td {
	padding: 0.55em 0.8em;
	border: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.owldraft-doc .entry-content .wp-block-table thead {
	border-bottom: 0;
}

.owldraft-doc .entry-content .wp-block-table thead th {
	background: color-mix(in srgb, var(--text) 4%, transparent);
	font-weight: 600;
}

/* A table is the one block allowed to scroll sideways on a narrow screen:
   reflowing a grid of values loses the thing that made it a table. */
.owldraft-doc .entry-content .wp-block-table {
	overflow-x: auto;
}

/* SCREENSHOTS
------------------------------------------------ */

/*
 * A screenshot of an interface is mostly white, and without an edge it bleeds
 * into the page and the reader cannot tell where the software stops. The same
 * hairline as the table does the job.
 */
.owldraft-doc .entry-content .wp-block-image img {
	display: block;
	border: 1px solid var(--border);
	border-radius: 4px;
}

.owldraft-doc .entry-content figcaption,
.owldraft-doc .entry-content .wp-element-caption {
	margin-top: 0.6em;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--meta);
	text-align: left;
	text-wrap: pretty;
}

/* NOTES
------------------------------------------------ */

/*
 * Stoat sets a blockquote in grey, which is right for a quotation — somebody
 * else's words, at one remove. In a manual the same block is a warning, and a
 * warning printed quieter than the text around it is a warning nobody reads.
 * So: body colour, and a tinted panel that is visible at a scroll rather than
 * a line you have to be looking at.
 */
.owldraft-doc .entry-content blockquote {
	padding: 0.9em 1.1em;
	border-left: 3px solid var(--accent);
	border-radius: 0 4px 4px 0;
	background: color-mix(in srgb, var(--accent) 5%, transparent);
	color: var(--text);
}

.owldraft-doc .entry-content blockquote > p + p {
	margin-top: 0.6em;
}

/* CODE
------------------------------------------------ */

/*
 * Stoat's `monospace` keyword leaves the browser to pick, and most pick
 * Courier at a size that does not match the body text beside it. The stack
 * below is the one every code host has converged on.
 */
.owldraft-doc .entry-content code,
.owldraft-doc .entry-content pre,
.owldraft-doc .entry-content kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Bordered like the table and the screenshots, so the three read as one family
   of boxes rather than three different ideas about what a box is. */
.owldraft-doc .entry-content pre {
	border: 1px solid var(--border);
	border-radius: 4px;
	background: color-mix(in srgb, var(--text) 3%, transparent);
}

.owldraft-doc .entry-content code {
	background: color-mix(in srgb, var(--text) 6%, transparent);
	border-radius: 4px;
}

/* A path or an option name broken across two lines is unreadable, but one
   long enough to overflow the column is worse. */
.owldraft-doc .entry-content :not(pre) > code {
	overflow-wrap: break-word;
}

/* ---------- /docs/ — the landing page ---------- */

/*
 * Container width, not the reading column: this is a page to pick from rather
 * than a page to read, and the choice is between products, so two of them
 * beside each other is the comparison the page is for.
 *
 * No .archive-wrap here — that is what narrows Stoat's archives to
 * --content-width, and the parent has already opened a .container around us.
 */
.owldraft-docs-archive {
	padding-top: var(--spacing-lg);
}

.owldraft-docs-archive__head {
	margin-bottom: var(--spacing-lg);
	padding-bottom: 1.2em;
	border-bottom: 1px solid var(--border);
}

.owldraft-docs-archive__title {
	margin: 0;
}

.owldraft-docs-archive__intro {
	margin: 0.4em 0 0;
	font-size: 1.05em;
	color: var(--meta);
	text-wrap: pretty;
}

/*
 * Two, and never three. A third column would fit at this width and would make
 * each card too narrow for a doc title to stay on one line — and there are
 * only ever a handful of products, so the row that a third column saves is a
 * row nobody was scrolling past.
 */
.owldraft-docs-archive__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Each card is its own height. Stretched to match its neighbour, a product
	   with two topics next to one with fifteen becomes a tall empty box, which
	   reads as something missing rather than as a short list. */
	align-items: start;
	gap: 1.5rem;
}

@media (max-width: 780px) {
	.owldraft-docs-archive__grid {
		grid-template-columns: 1fr;
	}
}

/* Boxed, unlike the lists inside the docs: here the cards sit side by side and
   the border is what says where one product's contents stops. */
.owldraft-docs-archive__product {
	padding: 1.3em 1.5em;
	border: 1px solid var(--border);
}

.owldraft-docs-archive__name {
	margin: 0 0 0.6em;
	font-size: 1.15em;
	line-height: 1.3;
}

.owldraft-docs-archive__name a {
	color: inherit;
	text-decoration: none;
}

.owldraft-docs-archive__name a:hover,
.owldraft-docs-archive__name a:focus {
	color: var(--accent);
}

/*
 * The list is left alone too — the theme's own bullets, indent and rhythm, and
 * the site's link colour on every title. The card's border already says where
 * one product ends; styling the list inside it turns a short list of
 * destinations into a table of rows to read.
 *
 * The only thing set here is the gap under the last one, because the card's
 * own padding is already providing it and a list's bottom margin on top of
 * that leaves the box looking bottom-heavy.
 */
.owldraft-docs-archive__list {
	margin-bottom: 0;
}

/* Stoat spaces list items for prose, where an item is a sentence or two.
   These are single titles, and half an em between each one spreads a list of
   five down a card it does not need. */
.owldraft-docs-archive__list li + li {
	margin-top: 0.2em;
}

.owldraft-docs-archive__empty {
	margin: 0.9em 0 0;
	font-size: 0.9em;
	color: var(--meta);
}