/* The four electrochemical calculators — page chrome for CalculatorShell.ss.

   Scope: this file styles the PAGE. The widget inside #calc keeps its own stylesheet
   (Calculator3Page.css and friends, auto-required by class name), because those rules carry
   the field layout each calculator's JS depends on. The two are layered deliberately rather
   than merged — replacing them would mean re-testing four separate scripts.

   Unlike the walkthrough, this markup is NOT inside the legacy `#page_type .typography`
   wrapper: CalculatorControllerTrait::getViewer() renders a top-level template, so
   typography.css does not apply and none of its !important link rules are in play here. */

.rd-calc {
	max-width: 1080px;
	margin: 0 auto;
	padding: 34px 24px 72px;
	font-family: var(--gm-font-body, 'IBM Plex Sans', sans-serif);
	color: var(--gm-ink, #16232b);
}

/* ---------------------------------------------------------------- head */

.rd-calc-kicker {
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gm-muted, #5f6b72);
	margin-bottom: 10px;
}
.rd-calc-title {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: clamp(30px, 4.4vw, 44px);
	line-height: 1.12;
	font-weight: 700;
	margin: 0 0 26px;
}

/* ---------------------------------------------------------------- prose

   $Content on these pages is real explanatory material — the Nernst page carries four
   paragraphs and a list of applications — so it gets a readable measure rather than the full
   page width. */

.rd-calc-prose { max-width: 72ch; font-size: 16.5px; line-height: 1.65; color: var(--gm-body, #3d4a52); }
.rd-calc-prose h2,
.rd-calc-prose h3 {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: 20px;
	line-height: 1.3;
	margin: 30px 0 10px;
	color: var(--gm-ink, #16232b);
}
.rd-calc-prose ul, .rd-calc-prose ol { padding-left: 20px; margin: 14px 0; }
.rd-calc-prose li { margin-bottom: 6px; }
.rd-calc-prose img { max-width: 100%; height: auto; }
.rd-calc-prose a { color: var(--gm-navy, #003e69); text-decoration: underline; }

/* Equivalent Weight is the only calculator with the two-column fields filled. */
.rd-calc-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px 40px;
	margin-top: 26px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--gm-body, #3d4a52);
}

/* ---------------------------------------------------------------- the widget card

   A plate around #calc so the calculator reads as an instrument rather than as loose fields
   after the prose. The legacy page had nothing here: the form began immediately below the
   last paragraph with no boundary, which is why the empty result box at the top of the
   Nernst calculator looked like a rendering fault. */

.rd-calc-card {
	margin-top: 32px;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--gm-border, #e6eaec);
	border-radius: 16px;
	max-width: 780px;
}
.rd-calc-card #calc { width: auto; margin: 0; }

/* Field labels.

   form.css carries `div.field > label { width:30%; float:left; text-align:right !important; }`
   — so this needs !important too, and specificity is irrelevant. That right alignment is what
   sets "Electrons transferred per cell reaction" as three ragged lines jammed against its
   input. The float and the 30% column are deliberately LEFT ALONE: the two-column field shape
   depends on them, and the calculators' own stylesheets are written around it. Only the text
   alignment changes. */
.rd-calc-card #calc label.left,
.rd-calc-card #calc .fieldgroup label.left { text-align: left !important; }

/* The result field.

   input.calc is the OUTPUT on every calculator — Ecell here, EW on Equivalent Weight, and the
   fifteen converted potentials on the reference-electrode page. Styled as a readout rather
   than as another empty text box, because an unlabelled grey input at the top of the form is
   the single thing that made this page look broken: there was no way to tell the answer from
   the questions. Tabular figures so digits line up as values update. */
.rd-calc-card #calc input.calc {
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--gm-navy, #003e69);
	background: #f2f7fa;
	border: 1px solid var(--gm-border, #e6eaec);
	border-radius: 8px;
}

.rd-calc-card #calc h3 {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: 18px;
	margin: 0 0 4px;
	color: var(--gm-ink, #16232b);
}

/* The submit control. Left as the form's own element — it is `input.submit-button` on the
   Equivalent Weight calculator's JS — but given the redesign's button shape. */
.rd-calc-card #calc input[type=submit],
.rd-calc-card #calc button[type=submit] {
	font-family: var(--gm-font-body, 'IBM Plex Sans', sans-serif);
	font-size: 16px;
	font-weight: 600;
	padding: 13px 26px;
	border: 0;
	border-radius: 10px;
	background: var(--gm-navy, #003e69);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
.rd-calc-card #calc input[type=submit]:hover,
.rd-calc-card #calc button[type=submit]:hover { background: var(--gm-navy-hover, #00567f); }

/* ---------------------------------------------------------------- foot */

.rd-calc-foot {
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--gm-border, #e6eaec);
	font-size: 15px;
}
.rd-calc-back { color: var(--gm-navy, #003e69); font-weight: 600; }

/* ---------------------------------------------------------------- narrow

   320px floor (WCAG 2.1 SC 1.4.10). The widget's own stylesheets set pixel widths on the
   input rows, so the card has to be allowed to shrink and its contents to wrap rather than
   forcing the page wider. */
@media (max-width: 720px) {
	.rd-calc { padding: 24px 16px 52px; }
	.rd-calc-card { padding: 18px 14px; }
	.rd-calc-card #calc { max-width: 100%; }
	.rd-calc-card #calc input[type=text] { max-width: 100%; }
}