@charset "UTF-8";

/*
	Chapter and section pages.

	The layout is the document's own: headings, paragraphs, lists, figures. What
	used to hold it up — six nested tables, a 120 px sidebar column and a row of
	spacer cells — is gone, so this file carries the whole design rather than just
	its colours.
*/

@import "common.css";

h1 {
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.25;
	margin-block: 0 1.5rem;
}

/*
	A page's headline, with the app's icon beside it. The icon leads, so the eye
	lands on the same mark on every page; the access page keeps its own header,
	where the icon sits at the trailing edge beside a much larger name.
*/
header.masthead {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.5rem;
}
header.masthead figure {
	flex: none;
	margin: 0;
	line-height: 0;
}
header.masthead figure img {
	inline-size: 2.75rem;
}
/* The gap below is the header's now, or the two would stack. */
header.masthead h1 {
	flex: 1;
	margin-block: 0;
}

h2 {
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	margin-block: 2.5rem 0.75rem;
}

h3 {
	font-size: 1.05rem;
	font-weight: 600;
	margin-block: 1.75rem 0.5rem;
}

p {
	margin-block: 0.85rem;
}

p.listname {
	margin-block-end: 0.35rem;
}

/* A subsection. The rule is what separates them now; there used to be an
   uppercased paragraph pretending to be a heading. */
body > section {
	margin-block-start: 2rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--rule);
}
body > section > h2:first-of-type {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- Lists --- */

ul,
ol {
	padding-inline-start: 1.4rem;
	margin-block: 0.85rem;
}
li {
	margin-block: 0.4rem;
}

/* An item with its own icon. The bullet is the icon, so the marker goes. */
li.hasicon {
	list-style: none;
	margin-inline-start: -1.4rem;
}
li.hasicon > img.bullet {
	block-size: 1.1em;
	vertical-align: -0.2em;
	padding-inline-end: 0.4em;
}

/* Version-history markers. These were an <img> on every single item — around
   2,500 of them across the products — and are now one rule each. */
li.versionitem {
	list-style: none;
	margin-inline-start: -1.4rem;
	padding-inline-start: 1.6rem;
	background-repeat: no-repeat;
	background-position: 0 0.25em;
	background-size: 1.1em 1.1em;
	/* Background images are omitted from print output by default (ink-saving), which
	   drops these markers entirely — they're the content, not decoration. */
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}
li.versionitem.new { background-image: url(../gfx/versionitem-new.png); }
li.versionitem.improved { background-image: url(../gfx/versionitem-improved.png); }
li.versionitem.fixed { background-image: url(../gfx/versionitem-fixed.png); }
li.versionitem.removed { background-image: url(../gfx/versionitem-removed.png); }
li.versionitem.knownissue { background-image: url(../gfx/versionitem-knownissue.png); }

/* ------------------------------------------------------------- Figures --- */

figure {
	margin-inline: 0;
	margin-block: 1.5rem;
}
figure img {
	max-inline-size: 100%;
	border-radius: 6px;
}
figure.wide img {
	inline-size: 100%;
}

/* Only when the picture has no dark variant of its own — <picture> with a
   <source> puts a second child in the figure, so :only-child excludes it. This
   replaces inverting the image, which turned a blue toolbar orange. */
@media (prefers-color-scheme: dark) {
	figure picture > img:only-child {
		background: var(--plate);
		padding: 0.75rem;
	}
}

/* An inline glyph lifted out of the interface. Still inverted in dark mode,
   because these are raster crops of a light UI and there is no dark artwork for
   them yet; the hue rotation is what keeps a blue icon blue instead of orange.
   @src-dark is the real answer and now works — this is the bridge. */
img.symbol {
	block-size: 1.15em;
	vertical-align: -0.2em;
}
@media (prefers-color-scheme: dark) {
	img.symbol:not(.noinvert) {
		filter: invert(1) hue-rotate(180deg);
	}
}

/* ------------------------------------------------------------ Callouts --- */

aside {
	margin-block: 1.25rem;
	padding: 0.85rem 1.1rem;
	border-radius: 8px;
	border-inline-start: 3px solid;
}
aside > :first-child { margin-block-start: 0; }
aside > :last-child { margin-block-end: 0; }

aside.note {
	background: var(--note-bg);
	border-inline-start-color: var(--note-rule);
}
aside.example {
	background: var(--example-bg);
	border-inline-start-color: var(--example-rule);
}

/*
	A block that belongs to one edition. A third callout, taking nothing from the
	base but its own two colours.
*/
aside.edition {
	background: var(--edition-bg);
	border-inline-start-color: var(--edition-rule);
}

/* The same badge a section's headline carries, which is why the wording lives in
   one place. Under a headline it is a chip; inside a marker the border would be a
   box within a box, so here it is a caption. */
aside.edition > p.edition {
	display: block;
	border: 0;
	padding: 0;
	margin-block-end: 0.25rem;
}

/* --------------------------------------------------------------- Code --- */

pre.source,
figure.terminal {
	background: var(--code-bg);
	border: 1px solid var(--rule);
	border-radius: 8px;
	margin-block: 1.25rem;
	margin-inline: 0;
	overflow-x: auto;
}

/*
	`white-space: normal` inside a `<pre>` looks like a contradiction and is the
	point. Three different kinds of whitespace end up in a listing — the file's own
	indentation, the newlines Xalan adds when it indents the page, and whatever the
	author typed — and only one of them is meant to show. So none of them do: a line
	break is a `<newline/>` in the source and a `<br>` here, an indent is an
	`<emsp/>`, and everything else collapses.

	That is the convention every listing in these books is written to. Honouring the
	whitespace instead is what put a blank line of four tabs after every line of
	every AppleScript listing in the Automation chapter.
*/
pre.source {
	padding: 0.75rem 1rem;
	white-space: normal;
	/*
		For the handful of lines nothing can break at a space: a bare
		`x-devonthink://` URL, and an AppleScript statement whose length is one long
		string literal — the language has no multi-line string, so there is no legal
		place to put a `¬`. Everything that *can* break at a space still does, because
		`anywhere` only engages when a single token will not fit a line by itself.

		The alternative was the scrollbar these lines used to produce, which hides
		the end of the URL rather than showing it, and hides it worst on a phone. The
		break is drawn, not inserted, so copying the URL still yields all of it.
	*/
	overflow-wrap: anywhere;
}

/*
	`display: block` is what keeps the first line flush. Indenting the page puts a
	newline between `<pre>` and `<code>`, and collapsed it is still a space sitting
	in front of the first line — one space of indent that no other line had. Around
	a block box that whitespace becomes an anonymous block of nothing, which is not
	rendered at all.
*/
pre.source > code {
	display: block;
}

figure.terminal {
	background: var(--terminal-bg);
	padding: 0;
}
figure.terminal > figcaption {
	font-size: 13px;
	font-weight: 600;
	color: var(--label-2);
	padding: 0.5rem 1rem;
	border-block-end: 1px solid var(--rule);
}
figure.terminal > pre {
	margin: 0;
	padding: 0.75rem 1rem;
	overflow-x: auto;
	/* See pre.source above: the breaks are <br>, so the whitespace may collapse. */
	white-space: normal;
}

/*
	A line of the transcript is a block, which is both what breaks the lines and
	what keeps the first one flush — see pre.source above.

	A block is also what makes the hanging indent possible. A command long enough
	to wrap used to continue in column zero, where every other line of the
	transcript starts, so the continuation read as the next command — and since
	the line above it is a `code` and the line below a `samp`, a reader looking
	for the seam finds one in the wrong place and concludes the wrap changed
	colour. Two characters of hang puts every continuation under the text rather
	than under the sigil, and nothing else starts there.
*/
figure.terminal code.command,
figure.terminal samp {
	display: block;
	padding-inline-start: calc(0.25em + 2ch);
	text-indent: -2ch;
}

/* The prompt is generated, so selecting the line copies the command alone. */
figure.terminal code.command::before {
	content: "$ ";
	color: var(--label-3);
}
/*
	`code` carries `padding-inline: 0.25em` for the chip it is in running prose, and
	a transcript's commands are `code` while its output is `samp` — so every command
	started a quarter of an em to the right of every comment, and the two sigils sat
	almost, but not quite, in one column. The rule above gives both the same inset,
	quarter of an em and all: the chip's is right for inline code, and this is the
	only place the two elements have to line up.
*/
figure.terminal samp {
	/* Tertiary rather than secondary: a comment labels the command below it and
	   should sit back from it, at the same weight as the prompt. */
	color: var(--label-3);
}

/* ------------------------------------------------------------ Editions --- */

/* Something belonging to one edition of the app. The old design rotated a label
   90 degrees down the margin; a badge above the heading says the same thing and
   survives being read aloud. */
p.edition {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tint);
	border: 1px solid var(--tint);
	border-radius: 4px;
	padding: 0.1rem 0.4rem;
	margin-block: 0 0.5rem;
}

/* --------------------------------------------------------- Chapter nav --- */

nav#chapter {
	margin-block-start: 2.5rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--rule);
}
nav#chapter h2 {
	font-size: 1rem;
	color: var(--label-2);
	margin-block: 0 0.75rem;
}
nav#chapter ul {
	list-style: none;
	padding-inline-start: 0;
}
nav#chapter li {
	margin-block: 0.5rem;
}
nav#chapter a::after {
	content: " ›";
	color: var(--label-3);
}

/* ------------------------------------------------------------ See also --- */

section#cf {
	margin-block-start: 2.5rem;
}
