@charset "UTF-8";

/*
	Shared by every page in the help book.

	The colours are Apple's own -apple-system-* keywords wherever one exists, so
	they follow the reader's accent colour and appearance without us tracking
	either. Everything else is a custom property redefined in the dark block
	below.

	Not light-dark(): that needs Safari 17.4, and DEVONagent still supports Big
	Sur. `color-scheme` plus a media query gives the same result with no floor.
	When the floor reaches macOS 15 this becomes a mechanical edit of one block.

	The tint is substituted at build time — once, here, rather than the six times
	it appeared across the old stylesheets. It arrives as a pair, because one brand
	colour cannot serve two backgrounds: every tint in the manifests misses the
	4.5:1 contrast ratio on one side or the other, so the build darkens it for the
	light page and lightens it for the dark one. Same hue, same product, legible
	either way.
*/

:root {
	font: 400 17px/1.6 -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	color-scheme: light dark;

	--tint: #2c7ab0;

	--rule: -apple-system-separator;
	--label-2: -apple-system-secondary-label;
	--label-3: -apple-system-tertiary-label;

	--note-bg: hsl(45 90% 95%);
	--note-rule: hsl(45 70% 72%);
	--example-bg: hsl(210 60% 96%);
	--example-rule: hsl(210 50% 80%);
	/* An edition marker. Green rather than the brand's own blue: the example
	   callout is already blue, and two blues a few degrees apart read as one
	   colour used carelessly rather than as two kinds of block. */
	--edition-bg: hsl(145 45% 95%);
	--edition-rule: hsl(145 35% 68%);
	--code-bg: hsl(0 0% 97%);
	--terminal-bg: hsl(0 0% 96%);

	/* Behind a screenshot that has no dark variant of its own, so a light
	   interface does not glare out of a dark page. */
	--plate: hsl(0 0% 86%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--tint: #338ecc;

		--note-bg: hsl(45 25% 14%);
		--note-rule: hsl(45 30% 32%);
		--example-bg: hsl(210 25% 15%);
		--example-rule: hsl(210 30% 34%);
		--edition-bg: hsl(145 20% 13%);
		--edition-rule: hsl(145 25% 30%);
		--code-bg: hsl(0 0% 13%);
		--terminal-bg: hsl(0 0% 10%);
		--plate: hsl(0 0% 78%);
	}
}

body {
	max-inline-size: 44rem;
	margin-block: 2.5rem;
	margin-inline: auto;
	padding-inline: 2.5rem;
}

/* The product's own colour, not Apple's blue. The help is DEVONtechnologies'
   before it is the system's, and a link is the most-seen thing on the page —
   which is why the tint has to be legible rather than merely correct, and why
   the build hands us one value per appearance. */
a:link,
a:visited {
	color: var(--tint);
	text-decoration-line: unset;
}
a:hover {
	text-decoration-line: underline;
}

strong {
	font-weight: 600;
}

/* A UI label — a menu name, a button. Italic, and at the body weight: semibold
   was indistinguishable from <strong>, which is upright and 600, so an interface
   label and an emphasised word looked identical on a page that has thousands of
   both. Not the tint, which links already use and which would leave the page
   looking coloured rather than typeset. */
i.ui {
	font-style: italic;
}

code,
pre,
samp {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 90%;
	tab-size: 4;
}

code {
	background: var(--code-bg);
	border-radius: 3px;
	padding-inline: 0.25em;
}

/* A key on the keyboard. The glyph is the whole content; the word for it is in
   aria-label, since a screen reader reads a bare ⌘ as silence. */
kbd {
	font-family: inherit;
	font-style: normal;
}
kbd.key {
	white-space: nowrap;
}

summary {
	cursor: pointer;
}
