/*
 * Developer CLI page — /apps/matrix-bundles/cli/ (template-app-cli.php).
 *
 * Loaded ON TOP OF pages/mhg-app.css, never instead of it. The page is an
 * .mhg-app-doc like the manual, the connect page and the privacy policy, and
 * everything it shares with them — the column width, the headings, the contents
 * list, the section targets — comes from that file. This one adds only what a
 * page made almost entirely of commands needs: blocks of code, the panel that
 * says whether any of it can be run yet, and the refusal list.
 *
 * WHY IT IS A SEPARATE SHEET FROM pages/mhg-app-connect.css, which has nearly
 * the same blocks in it. Those rules are scoped to that page's own block name
 * and its two custom properties are declared on .mhg-app-connect. Reusing them
 * here would mean either renaming this page's markup after that one — which
 * would read as a lie in the HTML — or widening selectors on a sheet that
 * another page owns. Two small sheets that each belong to one page is the
 * cheaper mistake, and each one can be deleted with its page.
 *
 * TWO LOCAL CUSTOM PROPERTIES, declared here rather than in mhg-tokens.css on
 * purpose, and for the same reason the connect sheet declares its pair: a
 * monospaced stack and a smaller size for code are needed by the two code-heavy
 * app pages and by nothing else, and adding a typeface to the token file is a
 * change to the design system, which is an operator call. Nothing new is
 * downloaded — the stack is the fonts already on the reader's machine. Every
 * colour, space and radius below is an existing token.
 */

.mhg-app-cli {
	--mhg-app-cli-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

	/*
	 * Mobile first, like the rest of the theme: the phone value is the base and
	 * it grows at 768px. Small, so that a curl line carrying the app's host fits
	 * more often before the block has to scroll sideways. It is not body text
	 * and is not held to the body minimum.
	 */
	--mhg-app-cli-code-size: 0.78rem;
}

/* ---------------------------------------------------------------
   Status panel — can any of this be run yet?
   --------------------------------------------------------------- */

/*
 * Deliberately the first thing under the lede and deliberately plain. It is
 * read before the commands, by a person and by a machine, so it is ordinary
 * text in the document flow rather than a decorated callout that a text
 * extractor might drop.
 */
.mhg-app-cli__status {
	margin: 0 0 var(--mhg-space-md);
	padding: var(--mhg-space-sm) var(--mhg-space-sm) var(--mhg-space-xs);
	border-left: var(--mhg-rule-height) solid var(--mhg-color-teal);
	background-color: var(--mhg-color-off-white);
}

/* The one visual difference between "you can run this" and "you cannot yet":
   the rule turns gold. */
.mhg-app-cli__status--off {
	border-left-color: var(--mhg-color-gold);
}

.mhg-app-cli__status-title {
	margin: 0 0 var(--mhg-space-xs);
	font-family: var(--mhg-font-heading);
	font-size: var(--mhg-font-size-body-lg);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
}

.mhg-app-cli__switches {
	margin: 0 0 var(--mhg-space-sm);
	padding-left: var(--mhg-space-md);
}

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

/*
 * A block someone will select and copy, and on this page that is the whole
 * point of the page. So: no line numbers, no decoration inside it, nothing that
 * would be picked up by the selection. Long lines scroll sideways inside the
 * block rather than wrapping — a wrapped curl command pastes as a broken one —
 * which is why overflow-x is on the block and never on the page.
 */
.mhg-app-cli__code {
	margin: 0 0 var(--mhg-space-sm);
	padding: var(--mhg-space-xs);
	overflow-x: auto;
	max-width: 100%;
	border: var(--mhg-hairline) solid var(--mhg-color-border-light);
	border-radius: var(--mhg-radius-sm);
	background-color: var(--mhg-color-off-white);
	font-family: var(--mhg-app-cli-mono);
	font-size: var(--mhg-app-cli-code-size);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
	-webkit-overflow-scrolling: touch;
}

.mhg-app-cli__code code {
	font: inherit;
	color: inherit;
	white-space: pre;
}

/* A name, an address or a field inside a sentence. It has to sit on the body
   line without pushing it apart, hence the slightly smaller size. */
.mhg-app-cli__inline,
.mhg-app-cli__names code,
.mhg-app-cli__refusals dt code {
	font-family: var(--mhg-app-cli-mono);
	font-size: var(--mhg-app-cli-code-size);
	color: var(--mhg-color-charcoal);
	overflow-wrap: anywhere;
}

/* The line introducing a block. Small, so the block reads as the answer. */
.mhg-app-cli__caption {
	margin: 0 0 var(--mhg-space-xs);
	color: var(--mhg-color-dark-grey);
}

/* The two lists of call names. Tight, because each item is one word and a
   body-spaced list of ten of them reads as a page of its own. */
.mhg-app-cli__names {
	margin: 0 0 var(--mhg-space-sm);
	padding-left: var(--mhg-space-md);
}

.mhg-app-cli__names li {
	margin: 0;
	line-height: var(--mhg-line-height-tight);
}

/* ---------------------------------------------------------------
   Refusals
   --------------------------------------------------------------- */

/*
 * A description list, not a table. Three columns — status, what the app says,
 * what to do — would either squash the sentences or scroll the page on a phone;
 * a list stacks by itself and reads the same aloud.
 */
.mhg-app-cli__refusals {
	margin: 0 0 var(--mhg-space-sm);
}

.mhg-app-cli__refusals dt {
	margin-top: var(--mhg-space-sm);
	overflow-wrap: anywhere;
}

.mhg-app-cli__refusals dt:first-child {
	margin-top: 0;
}

/* The "when you get it" half of the term, beside the status number. Not a
   heading and not code: it is the plain condition. */
.mhg-app-cli__refusal-when {
	color: var(--mhg-color-dark-grey);
}

.mhg-app-cli__refusals dd {
	margin: 0;
}

.mhg-app-cli__refusals dd p {
	margin: 0 0 var(--mhg-space-xs);
}

/* The app's own words, set apart from the advice under them. Left rule rather
   than italics or quotation marks: the sentences already carry their own
   quotation marks, and italics would fight the ones inside. */
.mhg-app-cli__refusal-says {
	padding-left: var(--mhg-space-xs);
	border-left: var(--mhg-hairline) solid var(--mhg-color-border-light);
	color: var(--mhg-color-charcoal);
}

/* ---------------------------------------------------------------
   Wider than a phone
   --------------------------------------------------------------- */

@media (min-width: 768px) {
	.mhg-app-cli {
		--mhg-app-cli-code-size: 0.82rem;
	}

	.mhg-app-cli__code {
		padding: var(--mhg-space-sm);
	}
}