/*
 * Matrix Bundles discount rules page — the three things the app pages did not
 * already have a component for.
 *
 * Loaded ON TOP of pages/mhg-app.css, never instead of it: the page is an
 * .mhg-app-doc like the documentation and support pages and gets its column,
 * headings, lists and contents box from there. Everything here is additive, and
 * every selector is prefixed .mhg-app-disc so it can only ever reach this page.
 *
 * WHY IT IS A SEPARATE FILE rather than more rules in pages/mhg-app.css. That
 * file is shared by four templates and is edited by whoever is working on any
 * of them. A notice panel that exists to say "this feature is not switched on"
 * is temporary by design — the day it goes, this file goes with it in one
 * delete, and nothing else on the site notices.
 */

.mhg-app-disc {
	/*
	 * A monospace stack, declared on the component rather than in
	 * mhg-tokens.css. The theme has no mono token because nothing until now
	 * printed code, and adding one to the token file is a change to the design
	 * system — an operator call, not a build decision. If a second page ever
	 * needs monospace, promote this to a token then.
	 *
	 * ui-monospace and SFMono-Regular first so Apple platforms get the interface
	 * mono rather than Courier, which is what an unqualified `monospace` gives
	 * on some of them.
	 */
	--mhg-disc-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ---------------------------------------------------------------
   The "not switched on yet" notice
   --------------------------------------------------------------- */

/*
 * It is the first thing in the document column and it has to read as a
 * condition of the whole page rather than as one more paragraph. So: the tint
 * and the teal edge the FAQ uses for a targeted question, at the full width of
 * the column.
 *
 * TEAL, NOT GOLD. Gold on off-white is 2.29:1 and cannot carry a signal on its
 * own — pages/mhg-app.css says so in its own header. Teal on off-white is
 * 7.18:1. The panel also states its meaning in words, so colour is never the
 * only thing carrying it.
 */
.mhg-app-disc__notice {
	margin: 0 0 var(--mhg-space-lg);
	padding: var(--mhg-space-sm);
	border-inline-start: var(--mhg-rule-height) solid var(--mhg-color-teal);
	background-color: var(--mhg-color-off-white);
}

.mhg-app-disc__notice > :last-child {
	margin-bottom: 0;
}

/*
 * Eyebrow treatment, matching .mhg-app-doc__eyebrow, because this is a label
 * for the block under it and not a heading in the page's outline. It is a <p>
 * in the markup for the same reason: putting an h2 here would insert a heading
 * above the page's own first section and mislead anything reading the outline.
 */
.mhg-app-disc__notice-heading {
	margin: 0 0 var(--mhg-space-xs);
	font-family: var(--mhg-font-body);
	font-size: var(--mhg-font-size-eyebrow);
	font-weight: 600;
	letter-spacing: var(--mhg-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--mhg-color-teal);
}

.mhg-app-disc__notice-sub {
	font-weight: 600;
	color: var(--mhg-color-charcoal);
}

/*
 * A standing qualification on a section — quieter than the body, never so quiet
 * it reads as decoration. --mhg-color-dark-grey #444 on off-white is 8.98:1,
 * the same colour the body already uses, so this is a weight and spacing
 * distinction rather than a contrast one.
 */
.mhg-app-disc__caveat {
	padding-inline-start: var(--mhg-space-sm);
	border-inline-start: var(--mhg-hairline) solid var(--mhg-color-rule);
}

/* ---------------------------------------------------------------
   The stored rule, printed
   --------------------------------------------------------------- */

/*
 * A code block on a 375px screen is the one thing on these pages that cannot be
 * made to reflow: JSON has meaningful line breaks and indentation, and wrapping
 * it turns a readable shape into a paragraph. So it scrolls sideways instead,
 * inside its own box, and the page itself never scrolls sideways.
 *
 * tabindex="0" is on the element in the template, not decoration: a box that
 * scrolls has to be reachable by keyboard, or a reader who cannot use a pointer
 * cannot see the right-hand side of it (WCAG 2.1.1). The focus ring comes from
 * .mhg-app-section :focus-visible in pages/mhg-app.css.
 */
.mhg-app-disc__code {
	margin: 0 0 var(--mhg-space-sm);
	padding: var(--mhg-space-sm);
	overflow-x: auto;
	border: var(--mhg-hairline) solid var(--mhg-color-rule);
	background-color: var(--mhg-color-off-white);
	/* Monospace sets optically larger than the body face at the same size; the
	   ratio pulls it back level. Relative, so it tracks the body scale. */
	font-size: 0.85em;
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
	-webkit-overflow-scrolling: touch;
}

.mhg-app-disc__code code {
	font-family: var(--mhg-disc-font-mono);
	/* The block is already indented by its padding; the code inside it must not
	   be, or every line starts two characters in from where it was written. */
	white-space: pre;
}

/*
 * The setting's stored name, beside its label on screen. A chip rather than
 * plain italics: the two names sit next to each other in one list item and the
 * reader has to be able to tell at a glance which of them they would find in
 * the app and which in the document further down.
 */
.mhg-app-disc__field {
	padding: 0.1em 0.35em;
	border-radius: var(--mhg-radius-sm);
	background-color: var(--mhg-color-off-white);
	font-family: var(--mhg-disc-font-mono);
	font-size: 0.85em;
	color: var(--mhg-color-charcoal);
	/* Never let a setting name be the thing that makes the page scroll
	   sideways on a phone. */
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.mhg-app-disc__notice {
		padding: var(--mhg-space-md);
	}

	.mhg-app-disc__code {
		padding: var(--mhg-space-md);
	}
}