/*
 * Connect page — /apps/matrix-bundles/connect/ (template-app-connect.php).
 *
 * Loaded ON TOP OF pages/mhg-app.css, never instead of it. The page is an
 * .mhg-app-doc like the manual, the support 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 of copy-and-paste blocks needs and the document pages do not have:
 * blocks of code, a list of addresses, and the status panel that says whether
 * any of it works yet.
 *
 * TWO LOCAL CUSTOM PROPERTIES, and they are declared here rather than in
 * mhg-tokens.css on purpose. A monospaced stack and a smaller size for code are
 * needed by this page and no other, 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-connect {
	--mhg-app-connect-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. Smaller here 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-connect-code-size: 0.78rem;
}

/* ---------------------------------------------------------------
   Status panel — is any of this switched on?
   --------------------------------------------------------------- */

/*
 * Deliberately the first thing under the lede and deliberately plain. It is
 * read before the instructions, 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-connect__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 "on" and "not on": the rule turns gold. */
.mhg-app-connect__status--off {
	border-left-color: var(--mhg-color-gold);
}

.mhg-app-connect__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-connect__switches {
	margin: 0 0 var(--mhg-space-sm);
	padding-left: var(--mhg-space-md);
}

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

/*
 * A block someone will select and copy. 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
 * not on the page.
 */
.mhg-app-connect__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-connect-mono);
	font-size: var(--mhg-app-connect-code-size);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
	-webkit-overflow-scrolling: touch;
}

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

/* A name or an address inside a sentence. It has to sit on the body line
   without pushing it apart, hence the slightly smaller size. */
.mhg-app-connect__inline,
.mhg-app-connect__routes dt code {
	font-family: var(--mhg-app-connect-mono);
	font-size: var(--mhg-app-connect-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-connect__caption {
	margin: 0 0 var(--mhg-space-xs);
	color: var(--mhg-color-dark-grey);
}

/* ---------------------------------------------------------------
   Addresses, and refusals
   --------------------------------------------------------------- */

/*
 * A description list, not a table. Two columns of method-and-path against a
 * sentence would either squash the sentence or scroll the page on a phone; a
 * list stacks by itself and reads the same aloud.
 */
.mhg-app-connect__routes {
	margin: 0 0 var(--mhg-space-sm);
}

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

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

.mhg-app-connect__routes dd {
	margin: 0 0 var(--mhg-space-xs);
	color: var(--mhg-color-dark-grey);
}

/* ---------------------------------------------------------------
   Numbered steps (28 Sep 2026)
   --------------------------------------------------------------- */

/*
 * The sign-in steps for Claude and ChatGPT. The list's own numbers, indented
 * like the page's bullet lists (.mhg-app-doc__content ul in mhg-app.css), so
 * the two kinds of list line up.
 */
.mhg-app-connect__steps {
	margin: 0 0 var(--mhg-space-sm);
	padding-left: var(--mhg-space-md);
}

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

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

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