/*
 * Bundle configuration page — the pieces mhg-app.css does not have.
 *
 * Loaded ALONGSIDE mhg-app.css, never instead of it: the page is a
 * .mhg-app-doc and takes its header, measure, headings and contents nav from
 * there. Everything here exists because the configuration reference shows
 * things no other page on this site shows — a JSON example, a quoted refusal,
 * and a list of limits paired with the sentence you get for crossing one.
 *
 * NO TYPEFACE IS ADDED. The code blocks declare no font-family at all, so they
 * take the browser's own monospace, which is what <pre> and <code> do by
 * default. Adding a code face to the design system is an operator call and is
 * not needed to make this page work.
 *
 * A code block SCROLLS SIDEWAYS rather than wrapping. JSON that wraps mid-value
 * reads as a different shape from the one the app takes, which on this page is
 * the whole point. The examples are written narrow enough that a phone rarely
 * has to scroll, and <pre> carries its own scroll container, so body's
 * overflow-x: hidden cannot strand the right-hand side of a line.
 *
 * @package mhg-theme
 */

/* ---------------------------------------------------------------
   JSON examples
   --------------------------------------------------------------- */

.mhg-app-config__code {
	margin: 0 0 var(--mhg-space-sm);
}

.mhg-app-config__code figcaption {
	margin-bottom: var(--mhg-space-xs);
	font-size: var(--mhg-font-size-eyebrow);
	letter-spacing: var(--mhg-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--mhg-color-dark-grey);
}

.mhg-app-config__code pre {
	margin: 0;
	padding: var(--mhg-space-sm);
	overflow-x: auto;
	border-left: var(--mhg-rule-height) solid var(--mhg-color-teal);
	border-radius: 0 var(--mhg-radius-sm) var(--mhg-radius-sm) 0;
	background-color: var(--mhg-color-off-white);
	/* The UA sets monospace at a smaller apparent size than the body face at
	   the same value, which is why this is set explicitly rather than left to
	   inherit. */
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-charcoal);
	-webkit-overflow-scrolling: touch;
}

.mhg-app-config__code code {
	/* No font-family here on purpose — see the file header. */
	white-space: pre;
}

/* ---------------------------------------------------------------
   Whether the API can be used today
   --------------------------------------------------------------- */

/*
 * One panel, two lines: the address, and the key. It is the only place on the
 * page that says whether a call would work, and the template derives every word
 * in it from two booleans. Styled as a statement rather than a warning: it is
 * not an error, it is the current state of a thing being built.
 */
.mhg-app-config__status {
	margin: 0 0 var(--mhg-space-md);
	padding: var(--mhg-space-sm) var(--mhg-space-sm) var(--mhg-space-xs);
	border: var(--mhg-hairline) solid var(--mhg-color-rule);
	border-left: var(--mhg-rule-height) solid var(--mhg-color-gold);
	border-radius: 0 var(--mhg-radius-sm) var(--mhg-radius-sm) 0;
	background-color: var(--mhg-color-off-white);
}

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

.mhg-app-config__status li {
	margin-bottom: var(--mhg-space-xs);
}

/* ---------------------------------------------------------------
   A saving that exists in the app and cannot be chosen
   --------------------------------------------------------------- */

.mhg-app-config__flag {
	display: inline-block;
	margin-left: var(--mhg-space-xs);
	padding: 0 var(--mhg-space-xs);
	border: var(--mhg-hairline) solid var(--mhg-color-rule);
	border-radius: var(--mhg-radius-sm);
	vertical-align: middle;
	font-family: var(--mhg-font-body);
	font-size: var(--mhg-font-size-eyebrow);
	letter-spacing: var(--mhg-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--mhg-color-dark-grey);
}

/* ---------------------------------------------------------------
   The app's own words, quoted
   --------------------------------------------------------------- */

.mhg-app-config__quote {
	margin: 0 0 var(--mhg-space-sm);
	padding-left: var(--mhg-space-sm);
	border-left: var(--mhg-rule-height) solid var(--mhg-color-gold);
	color: var(--mhg-color-charcoal);
}

.mhg-app-config__quote p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Limits, each with the sentence you get for crossing it
   --------------------------------------------------------------- */

.mhg-app-config__limits {
	margin: 0 0 var(--mhg-space-sm);
}

.mhg-app-config__limit {
	padding-block: var(--mhg-space-sm);
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule-soft);
}

.mhg-app-config__limit:last-child {
	border-block-end: var(--mhg-hairline) solid var(--mhg-color-rule-soft);
}

.mhg-app-config__limits dt {
	margin-bottom: var(--mhg-space-xs);
	font-weight: 700;
	color: var(--mhg-color-charcoal);
}

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

.mhg-app-config__limits dd p:last-child {
	margin-bottom: 0;
}

/*
 * The refusal itself. Quoted verbatim from the app, so it is set apart from the
 * explanation above it — a merchant who has this sentence on screen should be
 * able to spot it by shape before reading a word of the page.
 */
.mhg-app-config__refusal {
	padding-left: var(--mhg-space-sm);
	border-left: var(--mhg-hairline) solid var(--mhg-color-rule);
	color: var(--mhg-color-charcoal);
}