/*
 * Screen styles.
 *
 * EVERY RULE IS PREFIXED `body.mm-page`. Not tidiness -- `ruki-child` styles
 * `.t33-page-main .entry-content a` and `h1..h6` at specificity (0,3,1), which
 * beats a bare class. The failure mode is nasty and silent: text that is
 * present in the DOM and readable by a crawler, rendered mid-teal on navy or
 * near-black on a dark panel, and invisible to an actual reader. The word
 * search on this site shipped that way once. Assume the next theme update
 * introduces a third collision and look for it.
 *
 * NO `!important` ANYWHERE. Beating the theme on specificity stays true when
 * the theme changes; `!important` stays true only until the theme also reaches
 * for it, and then there is nowhere left to go. tools/deploy-check.js fails the
 * build on both counts.
 *
 * The theme owns the page: fonts, colour, headings, the content column. This
 * file styles the tool and nothing else, and inherits wherever it can.
 */

body.mm-page .mm {
	--mm-line: rgba(127, 127, 127, 0.28);
	--mm-panel: rgba(127, 127, 127, 0.07);
	--mm-accent: #0b7285;

	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------- */
/* The answer                                                        */
/* ---------------------------------------------------------------- */

body.mm-page .mm .mm-answer {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	line-height: 1.45;
}

body.mm-page .mm .mm-answer strong {
	white-space: nowrap;
}

body.mm-page .mm .mm-formula {
	white-space: nowrap;
}

body.mm-page .mm sub,
body.mm-page .mm sup {
	font-size: 0.7em;
	line-height: 0;
}

body.mm-page .mm .mm-dot {
	padding: 0 0.15em;
}

/* ---------------------------------------------------------------- */
/* Input                                                             */
/* ---------------------------------------------------------------- */

body.mm-page .mm .mm-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: flex-end;
	margin: 0 0 0.6rem;
}

body.mm-page .mm .mm-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 14rem;
	min-width: 0;
}

body.mm-page .mm .mm-field-inline {
	flex: 1 1 9rem;
}

body.mm-page .mm .mm-field-label {
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.75;
}

/*
 * 1rem is a floor, not a preference. Anything smaller makes iOS Safari zoom the
 * viewport on focus, and on a calculator that is a zoom on every edit.
 */
body.mm-page .mm .mm-input {
	font-size: 1rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--mm-line);
	border-radius: 3px;
	background: var(--mm-panel);
	color: inherit;
	width: 100%;
	box-sizing: border-box;
}

body.mm-page .mm .mm-input:focus-visible {
	outline: 2px solid var(--mm-accent);
	outline-offset: 1px;
}

body.mm-page .mm .mm-go {
	font-size: 1rem;
	font-family: inherit;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--mm-accent);
	border-radius: 3px;
	background: var(--mm-accent);
	color: #fff;
	cursor: pointer;
}

body.mm-page .mm .mm-go:hover {
	filter: brightness(1.08);
}

body.mm-page .mm .mm-hint {
	margin: 0 0 0.8rem;
	font-size: 0.88rem;
	opacity: 0.8;
}

body.mm-page .mm .mm-hint code {
	font-size: 0.95em;
	padding: 0.05em 0.3em;
	background: var(--mm-panel);
	border-radius: 2px;
}

body.mm-page .mm .mm-example {
	font: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	padding: 0.05em 0.3em;
	border: 1px dashed var(--mm-line);
	border-radius: 2px;
	background: none;
	color: inherit;
	cursor: pointer;
}

body.mm-page .mm .mm-error {
	margin: 0 0 1rem;
	padding: 0.6rem 0.8rem;
	border-left: 3px solid #c92a2a;
	background: rgba(201, 42, 42, 0.08);
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------- */
/* The breakdown                                                     */
/* ---------------------------------------------------------------- */

/*
 * A min-height floor on the result region, so the page does not jump when a
 * recalculation swaps a four-row table for a two-row one. Cheap CLS insurance
 * on a site where every point of Core Web Vitals is working priority one.
 */
body.mm-page .mm .mm-result {
	min-height: 18rem;
}

body.mm-page .mm .mm-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 0.9rem;
	font-variant-numeric: tabular-nums;
}

body.mm-page .mm .mm-table caption {
	caption-side: top;
	text-align: left;
	font-size: 0.88rem;
	padding: 0 0 0.45rem;
	opacity: 0.8;
}

body.mm-page .mm .mm-table th,
body.mm-page .mm .mm-table td {
	padding: 0.45rem 0.5rem;
	border-bottom: 1px solid var(--mm-line);
	text-align: left;
	vertical-align: baseline;
}

body.mm-page .mm .mm-table thead th {
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.75;
	white-space: nowrap;
}

body.mm-page .mm .mm-table .mm-num {
	text-align: right;
	white-space: nowrap;
}

body.mm-page .mm .mm-table .mm-sym {
	opacity: 0.65;
}

body.mm-page .mm .mm-table tfoot th,
body.mm-page .mm .mm-table tfoot td {
	border-top: 2px solid var(--mm-line);
	border-bottom: none;
	font-weight: 600;
}

/*
 * The addition, spelled out. This line is the most quotable thing on the page
 * and it is deliberately plain text -- an answer engine can lift it whole.
 */
body.mm-page .mm .mm-sum {
	margin: 0 0 1.4rem;
	padding: 0.7rem 0.85rem;
	background: var(--mm-panel);
	border-radius: 3px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- */
/* Converter and caveats                                             */
/* ---------------------------------------------------------------- */

body.mm-page .mm .mm-h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

body.mm-page .mm .mm-convert {
	margin: 0 0 1.2rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--mm-line);
	border-radius: 3px;
}

body.mm-page .mm .mm-convert-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 0 0 0.6rem;
}

body.mm-page .mm .mm-convert-out {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.85;
}

body.mm-page .mm .mm-caveat {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	opacity: 0.8;
}

body.mm-page .mm .mm-caveat p {
	margin: 0 0 0.5rem;
}

body.mm-page .mm .mm-pending {
	margin: 0;
	opacity: 0.7;
}

/* ---------------------------------------------------------------- */
/* Narrow screens                                                    */
/* ---------------------------------------------------------------- */

@media (max-width: 34rem) {
	/*
	 * Two columns carry the answer -- what it is and what it weighs. Atomic
	 * mass and percent are reference, and hiding the atomic-mass COLUMN would
	 * break the arithmetic on screen, so the table scrolls instead of
	 * collapsing. The sum line below it repeats the whole calculation anyway,
	 * which is what a phone reader actually reads.
	 */
	body.mm-page .mm .mm-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	body.mm-page .mm .mm-go {
		flex: 1 1 100%;
	}

	body.mm-page .mm .mm-result {
		min-height: 22rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	body.mm-page .mm .mm-go,
	body.mm-page .mm .mm-example {
		transition: filter 120ms ease;
	}
}