/*
 * Slope Calculators Engine - structure only.
 * Every colour comes from a CSS variable defined once in the child theme
 * (themes/kadence-slope/style.css). Change a colour there and all 13
 * calculators change with it. Nothing here needs editing per page.
 */

.slopecalc { margin: 0 0 2.5rem; }
.slopecalc *, .slopecalc *::before, .slopecalc *::after { box-sizing: border-box; }

/* ---------------------------------------------------- CALCULATOR SECTION */

.sc-calc {
	background: var(--sc-calc-bg, #fff);
	border: 1px solid var(--sc-calc-border, #e2e7ee);
	border-radius: var(--sc-radius, 10px);
	overflow: hidden;
	box-shadow: var(--sc-calc-shadow, 0 1px 2px rgba(16,24,38,.05));
}

.sc-calc-head {
	padding: 1.5rem 1.5rem 1.1rem;
	background: var(--sc-calc-head-bg, #fbfcfd);
	border-bottom: 1px solid var(--sc-calc-border, #e2e7ee);
}
.sc-title {
	margin: 0;
	font-family: var(--sc-font-head, inherit);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--sc-calc-title, #101826);
	letter-spacing: -0.01em;
}
.sc-lead {
	margin: .55rem 0 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--sc-ink-soft, #55606e);
	max-width: 62ch;
}

/* mode tabs */
.sc-modes {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding: .9rem 1.5rem 0;
	background: var(--sc-calc-head-bg, #fbfcfd);
	border-bottom: 1px solid var(--sc-calc-border, #e2e7ee);
}
.sc-mode {
	/* Wrap to a second row rather than squeeze. Six tabs used to shrink below
	   their own text and clip mid-word. */
	flex: 0 0 auto;
	white-space: nowrap;
	appearance: none;
	border: 1px solid var(--sc-calc-border, #e2e7ee);
	border-bottom: none;
	background: var(--sc-mode-bg, #fff);
	color: var(--sc-ink-soft, #55606e);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	padding: .6rem 1rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	position: relative;
	bottom: -1px;
	transition: background .15s, color .15s;
}
.sc-mode:hover { color: var(--sc-accent, #1553c7); }
.sc-mode.is-active {
	background: var(--sc-calc-bg, #fff);
	color: var(--sc-accent-ink, #0e3e99);
	border-color: var(--sc-calc-border, #e2e7ee);
	box-shadow: inset 0 3px 0 var(--sc-accent, #1553c7);
}
.sc-mode:focus-visible { outline: 2px solid var(--sc-accent, #1553c7); outline-offset: 2px; }

.sc-body { padding: 1.5rem; }
.sc-pane { display: none; }
.sc-pane.is-active { display: block; }

.sc-hint {
	margin: 0 0 1rem;
	font-family: var(--sc-font-mono, ui-monospace, monospace);
	font-size: .9rem;
	color: var(--sc-accent-ink, #0e3e99);
	background: var(--sc-accent-soft, #eaf0fd);
	border-radius: 6px;
	padding: .45rem .7rem;
	display: inline-block;
}

.sc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) {
	.sc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sc-field.is-wide { grid-column: 1 / -1; }

.sc-label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sc-ink-faint, #8a94a2);
	margin-bottom: .35rem;
}
.sc-opt { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }

.sc-inputwrap { position: relative; display: block; }
.sc-suffix {
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: .8rem;
	color: var(--sc-ink-faint, #8a94a2);
	pointer-events: none;
}
.sc-inputwrap .sc-input { padding-right: 3rem; }

.sc-input {
	width: 100%;
	font-family: var(--sc-font-mono, ui-monospace, monospace);
	font-size: 1rem;
	padding: .7rem .8rem;
	color: var(--sc-ink, #101826);
	background: var(--sc-input-bg, #fff);
	border: 1px solid var(--sc-input-border, #d8dfe8);
	border-radius: 8px;
	transition: border-color .15s, box-shadow .15s;
}
.sc-input:focus {
	outline: none;
	border-color: var(--sc-accent, #1553c7);
	box-shadow: 0 0 0 3px var(--sc-accent-soft, #eaf0fd);
}

.sc-units { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.sc-units-label {
	font-size: .8rem; font-weight: 600; letter-spacing: .02em;
	text-transform: uppercase; color: var(--sc-ink-faint, #8a94a2);
}
.sc-unit-select {
	font: inherit; font-size: .9rem;
	padding: .45rem 2rem .45rem .7rem;
	border: 1px solid var(--sc-input-border, #d8dfe8);
	border-radius: 8px;
	background: var(--sc-input-bg, #fff);
	color: var(--sc-ink, #101826);
}

.sc-actions { display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.sc-go {
	appearance: none; border: 0; cursor: pointer;
	font: inherit; font-weight: 700; font-size: .95rem;
	padding: .8rem 2rem; border-radius: 8px;
	background: var(--sc-accent, #1553c7);
	color: var(--sc-on-accent, #fff);
	transition: background .15s, transform .05s;
}
.sc-go:hover { background: var(--sc-accent-ink, #0e3e99); }
.sc-go:active { transform: translateY(1px); }
.sc-reset {
	appearance: none; cursor: pointer;
	font: inherit; font-weight: 600; font-size: .95rem;
	padding: .8rem 1.3rem; border-radius: 8px;
	background: transparent;
	color: var(--sc-ink-soft, #55606e);
	border: 1px solid var(--sc-input-border, #d8dfe8);
}
.sc-reset:hover { color: var(--sc-ink, #101826); border-color: var(--sc-ink-faint, #8a94a2); }
.sc-go:focus-visible, .sc-reset:focus-visible { outline: 2px solid var(--sc-accent, #1553c7); outline-offset: 2px; }

.sc-error:not(:empty) {
	margin-top: 1rem;
	padding: .7rem .9rem;
	border-radius: 8px;
	font-size: .9rem;
	color: var(--sc-danger-ink, #8c2020);
	background: var(--sc-danger-soft, #fdecec);
	border: 1px solid var(--sc-danger-border, #f6cfcf);
}

.slopecalc-noscript { color: var(--sc-ink-soft, #55606e); }

/* -------------------------------------------------------- ANSWER SECTION */

.sc-answer {
	margin-top: 1.25rem;
	padding: 1.5rem;
	background: var(--sc-answer-bg, #f6f8fa);
	border: 1px solid var(--sc-answer-border, #e2e7ee);
	border-radius: var(--sc-radius, 10px);
}
.sc-answer-title {
	margin: 0 0 1rem;
	font-family: var(--sc-font-head, inherit);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sc-ink-faint, #8a94a2);
}
.sc-empty { margin: 0; font-size: .95rem; color: var(--sc-ink-faint, #8a94a2); }

.sc-headline {
	display: flex; flex-direction: column; gap: .2rem;
	padding: 1.1rem 1.25rem;
	background: var(--sc-result-soft, #e7f4ee);
	border-left: 4px solid var(--sc-result, #0b6e4f);
	border-radius: 8px;
	margin-bottom: 1.1rem;
}
.sc-headline-label {
	font-size: .75rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--sc-result, #0b6e4f);
}
.sc-headline-value {
	font-family: var(--sc-font-mono, ui-monospace, monospace);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 700; line-height: 1.15;
	color: var(--sc-result-ink, #06402e);
	word-break: break-word;
}
.sc-sub { font-size: .55em; font-weight: 500; color: var(--sc-result, #0b6e4f); }

.sc-results {
	display: grid; gap: .7rem;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.sc-card {
	display: flex; flex-direction: column; gap: .15rem;
	background: var(--sc-card-bg, #fff);
	border: 1px solid var(--sc-answer-border, #e2e7ee);
	border-radius: 8px;
	padding: .8rem .9rem;
}
.sc-card-label {
	font-size: .72rem; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--sc-ink-faint, #8a94a2);
}
.sc-card-value {
	font-family: var(--sc-font-mono, ui-monospace, monospace);
	font-size: 1.05rem; font-weight: 600;
	color: var(--sc-ink, #101826); word-break: break-word;
}
.sc-card-note { font-size: .75rem; color: var(--sc-ink-faint, #8a94a2); }

.sc-verdict {
	display: flex; flex-direction: column; gap: .3rem;
	padding: .95rem 1.1rem; border-radius: 8px; margin-bottom: 1.1rem;
	font-size: .92rem; line-height: 1.55;
	border: 1px solid transparent;
}
.sc-verdict strong { font-size: 1rem; }
.sc-verdict.is-pass { background: var(--sc-result-soft, #e7f4ee); color: var(--sc-result-ink, #06402e); border-color: var(--sc-result, #0b6e4f); }
.sc-verdict.is-warn { background: var(--sc-amber-soft, #fcf2e3); color: var(--sc-amber-ink, #6d3d00); border-color: var(--sc-amber, #a65b00); }
.sc-verdict.is-fail { background: var(--sc-danger-soft, #fdecec); color: var(--sc-danger-ink, #8c2020); border-color: var(--sc-danger, #c0392b); }
/* Neutral. Not a pass, not a failure: the calculator is declining to judge
   because it was not given enough to judge with. */
.sc-verdict.is-note { background: var(--sc-accent-soft, #eaf0fd); color: var(--sc-accent-ink, #0e3e99); border-color: var(--sc-accent, #1553c7); }

.sc-equations { margin-top: 1.2rem; }
.sc-plain {
	margin: 0 0 .7rem;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--sc-ink-soft, #4a5568);
}
.sc-eq-head {
	margin: 0 0 .6rem; font-size: .78rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-faint, #8a94a2);
}
.sc-eq {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem;
	padding: .6rem .9rem; border-radius: 8px;
	background: var(--sc-card-bg, #fff);
	border: 1px solid var(--sc-answer-border, #e2e7ee);
	margin-bottom: .45rem;
}
.sc-eq-label { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sc-ink-faint, #8a94a2); min-width: 10rem; }
.sc-eq code {
	font-family: var(--sc-font-mono, ui-monospace, monospace);
	font-size: 1rem; color: var(--sc-accent-ink, #0e3e99); background: none; padding: 0;
}

.sc-graphwrap { margin-top: 1.2rem; background: var(--sc-card-bg, #fff); border: 1px solid var(--sc-answer-border, #e2e7ee); border-radius: 8px; padding: .5rem; }
.sc-svg { display: block; width: 100%; height: auto; }
.sc-g { stroke: var(--sc-grid-line, rgba(21,83,199,.09)); stroke-width: 1; }
.sc-axis { stroke: var(--sc-ink-faint, #8a94a2); stroke-width: 1.5; }
.sc-line { stroke: var(--sc-accent, #1553c7); stroke-width: 2.5; stroke-dasharray: 7 4; }
.sc-legend-bg { fill: #fff; fill-opacity: .86; stroke: #d8dee6; stroke-width: 1; }
.sc-legend-t { font-size: 12px; fill: #3d4650; }
.sc-curve { stroke: var(--sc-amber, #a65b00); stroke-width: 2; fill: none; }
.sc-guide { stroke: var(--sc-result, #0b6e4f); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sc-glabel { font-size: 12px; fill: var(--sc-result, #0b6e4f); font-family: var(--sc-font-mono, monospace); }
.sc-dot { fill: var(--sc-accent, #1553c7); stroke: var(--sc-card-bg, #fff); stroke-width: 2; }
.sc-plabel { font-size: 12px; fill: var(--sc-ink-soft, #55606e); font-family: var(--sc-font-mono, monospace); }
.sc-graphwrap.is-big .sc-svg { min-height: 380px; touch-action: none; }

/* Graph control strip: the equal-scale toggle and its explainer (big graphs only). */
.sc-graphbar {
	display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
	margin-top: .6rem; padding: .2rem .3rem;
}
.sc-eqscale {
	appearance: none; cursor: pointer;
	font: inherit; font-weight: 600; font-size: .82rem;
	padding: .45rem .8rem; border-radius: 8px;
	background: transparent;
	color: var(--sc-ink-soft, #55606e);
	border: 1px solid var(--sc-input-border, #d8dfe8);
	white-space: nowrap;
}
.sc-eqscale:hover { color: var(--sc-ink, #101826); border-color: var(--sc-ink-faint, #8a94a2); }
.sc-eqscale:focus-visible { outline: 2px solid var(--sc-accent, #1553c7); outline-offset: 2px; }
.sc-eqscale:active { transform: translateY(1px); }
.sc-eqscale:disabled { opacity: .5; cursor: default; }
.sc-eqscale.is-on { color: var(--sc-accent, #1553c7); border-color: var(--sc-accent, #1553c7); }
.sc-graphnote { font-size: .82rem; line-height: 1.45; color: var(--sc-ink-soft, #55606e); }

/* Draggable graph points. The grab ring is the touch target; the dot shows intent. */
.sc-grab { fill: transparent; cursor: grab; }
.sc-grab:active { cursor: grabbing; }
.sc-dot.is-drag { cursor: grab; }

@media (max-width: 720px) {
	/* The big graph renders at roughly 0.55 scale on a phone, which turned its
	   12px SVG text into ~7px (team audit 2026-08-28). User-unit sizes are
	   bumped so the rendered size lands back near 12px. Big graphs only. */
	.sc-graphwrap.is-big .sc-plabel,
	.sc-graphwrap.is-big .sc-glabel { font-size: 22px; }
}

.sc-steps { margin-top: 1.2rem; }
.sc-steps summary {
	cursor: pointer; font-size: .88rem; font-weight: 600;
	color: var(--sc-accent, #1553c7); padding: .45rem 0;
}
.sc-steps summary:focus-visible { outline: 2px solid var(--sc-accent, #1553c7); outline-offset: 2px; }
.sc-steplist { margin: .6rem 0 0; padding-left: 1.3rem; }
.sc-steplist li {
	font-family: var(--sc-font-mono, ui-monospace, monospace);
	font-size: .88rem; line-height: 1.75; color: var(--sc-ink-soft, #55606e);
}

@media (max-width: 560px) {
	.sc-calc-head, .sc-body, .sc-answer { padding: 1.1rem; }
	.sc-modes { padding: .8rem .8rem 0; }
	.sc-mode { padding: .5rem .75rem; font-size: .8rem; }
	.sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-eq-label { min-width: 0; }
}

/* ------------------------------------------------------------------------
   Specificity guards. Kadence styles headings through .entry-content h2/h3,
   which outranks a single class. These repeat the same values at a weight
   that wins. Colours still come from the tokens, so one edit still rules.
   ------------------------------------------------------------------------ */
.slopecalc .sc-answer .sc-answer-title,
.entry-content .slopecalc .sc-answer-title { color: var(--sc-ink-faint, #8a94a2); font-size: .8rem; margin: 0 0 1rem; }
.slopecalc .sc-answer .sc-eq-head,
.entry-content .slopecalc .sc-eq-head { color: var(--sc-ink-faint, #8a94a2); font-size: .78rem; margin: 0 0 .6rem; }
.slopecalc .sc-calc .sc-title,
.entry-content .slopecalc .sc-title { color: var(--sc-calc-title, #101826); margin: 0; }

/* Kadence removes the native select arrow, so draw one. */
.slopecalc .sc-unit-select {
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A94A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: 11px 8px;
	padding-right: 2.1rem;
}

/* ==========================================================================
   ABOVE THE FOLD LAYOUT
   Inputs and answer sit side by side so a visitor sees their number without
   scrolling. Equations, graph and the step by step working move underneath,
   because those are read after the answer, not before it.
   ========================================================================== */

.sc-split {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
	align-items: start;
}
.slopecalc .sc-answer { margin-top: 0; min-height: 100%; }
.sc-below { margin-top: 1.1rem; }
.sc-below > *:not([hidden]) + *:not([hidden]) { margin-top: 1.1rem; }
.sc-below .sc-equations,
.sc-below .sc-graphwrap,
.sc-below .sc-steps {
	background: var(--sc-answer-bg, #f6f8fa);
	border: 1px solid var(--sc-answer-border, #e2e7ee);
	border-radius: var(--sc-radius, 10px);
	padding: 1.2rem 1.4rem;
	margin-top: 0;
}
.sc-below .sc-graphwrap { background: var(--sc-card-bg, #fff); }
.sc-below .sc-steps summary { padding: 0; }

/* Tighter cards, because the answer column is narrower than the full page. */
.sc-split .sc-results { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: .55rem; }
.sc-split .sc-card { padding: .6rem .7rem; }
.sc-split .sc-card-value { font-size: .98rem; }
.sc-split .sc-headline { padding: .9rem 1.1rem; margin-bottom: .85rem; }
.sc-split .sc-headline-value { font-size: clamp(1.45rem, 3.2vw, 1.95rem); }
.sc-split .sc-answer { padding: 1.2rem; }
.sc-split .sc-calc-head { padding: 1.2rem 1.3rem .95rem; }
.sc-split .sc-body { padding: 1.2rem 1.3rem 1.3rem; }
.sc-split .sc-modes { padding: .8rem 1.3rem 0; }
.sc-split .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-split .sc-actions { margin-top: 1.1rem; }

@media (max-width: 1000px) {
	.sc-split { grid-template-columns: 1fr; }
	.slopecalc .sc-answer { min-height: 0; }
}

/* ------------------------------------------------------------------------
   Fold budget. On a 1366x768 laptop a visitor has roughly 650px of page
   below the browser chrome and the site header. These trims buy the room
   the answer panel needs to finish inside it.
   ------------------------------------------------------------------------ */
@media (min-width: 1001px) {
	/* The headline already says what this is. The label was repeating it. */
	.sc-split .sc-answer-title { display: none; }

	.sc-split .sc-headline { padding: .75rem 1rem; margin-bottom: .7rem; }
	.sc-split .sc-headline-value { font-size: clamp(1.4rem, 3vw, 1.85rem); }
	.sc-split .sc-results { gap: .45rem; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
	.sc-split .sc-card { padding: .5rem .65rem; }
	.sc-split .sc-card-label { font-size: .68rem; }
	.sc-split .sc-card-value { font-size: .95rem; }
	.sc-split .sc-card-note { font-size: .7rem; }
	.sc-split .sc-answer { padding: 1.05rem; }
	.sc-split .sc-verdict { padding: .75rem .9rem; margin-bottom: .7rem; font-size: .86rem; line-height: 1.45; }
	.sc-split .sc-verdict strong { font-size: .92rem; }
	.sc-split .sc-lead { font-size: .9rem; margin-top: .45rem; }
	.sc-split .sc-calc-head { padding: 1rem 1.15rem .85rem; }
	.sc-split .sc-body { padding: 1.05rem 1.15rem 1.15rem; }
	.sc-split .sc-units { margin-top: .9rem; }
	.sc-split .sc-actions { margin-top: .95rem; }
	.sc-split .sc-go, .sc-split .sc-reset { padding-top: .7rem; padding-bottom: .7rem; }
}

/* Short screens get the tightest version of all. */
@media (min-width: 1001px) and (max-height: 800px) {
	.sc-split .sc-input { padding: .58rem .75rem; }
	.sc-split .sc-mode { padding: .5rem .8rem; }
	.sc-split .sc-grid { gap: .75rem; }
	.sc-split .sc-card-note { display: none; }
}

/* ==========================================================================
   MODE SWITCHER  (segmented control, sitting at the top of the card)
   Replaces the old file-tab look, which needed a header strip above it and
   read as two panels stacked together.
   ========================================================================== */

.slopecalc .sc-modes {
	display: flex;
	flex-wrap: nowrap;
	gap: .25rem;
	margin: .6rem .6rem 0;
	padding: .3rem;
	background: var(--sc-seg-track, #eef2f7);
	border: 0;
	border-bottom: 0;
	border-radius: 11px;
}

.slopecalc .sc-mode {
	flex: 1 1 0;
	min-width: 0;
	position: static;
	bottom: auto;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	padding: .58rem .45rem;
	font-size: .845rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sc-ink-soft, #55606e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.slopecalc .sc-mode:hover { background: rgba(255, 255, 255, .6); color: var(--sc-ink, #101826); }

.slopecalc .sc-mode.is-active {
	background: var(--sc-calc-bg, #fff);
	color: var(--sc-accent-ink, #0e3e99);
	box-shadow: 0 1px 2px rgba(16, 24, 38, .14), 0 0 0 1px rgba(16, 24, 38, .04);
}
.slopecalc .sc-mode:focus-visible { outline: 2px solid var(--sc-accent, #1553c7); outline-offset: 1px; }

/* No header strip above the control any more. */
.slopecalc .sc-calc-head { border-bottom: 0; padding-bottom: 0; }
.slopecalc .sc-body { padding-top: 1.15rem; }

/* Two tidy rows rather than a squeeze on narrow screens. */
@media (max-width: 560px) {
	.slopecalc .sc-modes { flex-wrap: wrap; }
	.slopecalc .sc-mode { flex: 1 1 calc(50% - .25rem); font-size: .82rem; }
}

/* ==========================================================================
   EQUAL COLUMNS
   ========================================================================== */

.sc-split { grid-template-columns: 1fr 1fr; }
.sc-split .sc-results { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
@media (min-width: 1001px) {
	.sc-split .sc-results { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
	.sc-split .sc-modes { margin: .55rem .55rem 0; }
	.sc-split .sc-body { padding: 1.05rem 1.15rem 1.15rem; }
}
@media (max-width: 1000px) {
	.sc-split { grid-template-columns: 1fr; }
}

/* Three per row reads better than four squeezed ones, and it lands 9 results
   in exactly three tidy rows. */
@media (min-width: 1001px) {
	.sc-split .sc-results { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); }
	.sc-split .sc-card-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   SLIDING MODE PILL
   The active state is one element that travels, not a background that blinks
   from one button to the next. Position and size come from JS measuring the
   live button, so it fits any label and any number of modes.
   ========================================================================== */

.slopecalc .sc-modes { position: relative; }

.sc-mode-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-radius: 8px;
	background: var(--sc-calc-bg, #fff);
	box-shadow: 0 1px 2px rgba(16, 24, 38, .16), 0 0 0 1px rgba(16, 24, 38, .04);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	transform: translate(0, 0);
	transition:
		transform .34s cubic-bezier(.32, 1.28, .5, 1),
		width     .34s cubic-bezier(.32, 1.12, .5, 1),
		height    .2s  ease,
		opacity   .18s ease;
}

/* Buttons ride above the pill and no longer paint their own background. */
.slopecalc .sc-mode { position: relative; z-index: 1; }
.slopecalc .sc-mode.is-active {
	background: transparent;
	box-shadow: none;
	color: var(--sc-accent-ink, #0e3e99);
}
.slopecalc .sc-mode:hover { background: transparent; color: var(--sc-ink, #101826); }
.slopecalc .sc-mode:not(.is-active):hover { color: var(--sc-accent, #1553c7); }
.slopecalc .sc-mode:active { transform: scale(.975); }

/* The fields follow the pill in, so the switch reads as one movement. */
.sc-pane.is-entering { animation: sc-pane-in .28s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes sc-pane-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-mode-thumb { transition: opacity .18s ease; }
	.sc-pane.is-entering { animation: none; }
	.slopecalc .sc-mode:active { transform: none; }
}

/* ==========================================================================
   MATCHING CARD TOPS
   The answer card now opens with a strip built to the same measurements as the
   mode switcher: same margin, same track, same pill height. The two cards line
   up at the top, and they stretch to a common height at the bottom.
   ========================================================================== */

.sc-split { align-items: stretch; }
.slopecalc .sc-answer { padding: 0; display: flex; flex-direction: column; }

.sc-answer-head {
	display: flex;
	align-items: center;
	margin: .6rem .6rem 0;
	padding: .3rem;
	background: var(--sc-seg-track, #eef2f7);
	border-radius: 11px;
}

.slopecalc .sc-answer-title {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: .58rem .95rem;
	border-radius: 8px;
	background: var(--sc-calc-bg, #fff);
	box-shadow: 0 1px 2px rgba(16, 24, 38, .14), 0 0 0 1px rgba(16, 24, 38, .04);
	font-family: var(--sc-font-head, inherit);
	font-size: .845rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sc-accent-ink, #0e3e99);
}

.sc-answer-body { padding: 1.15rem 1.3rem 1.3rem; flex: 1 1 auto; }

/* The desktop override that used to hide the label is no longer wanted. */
@media (min-width: 1001px) {
	.sc-split .sc-answer-title { display: inline-flex; }
	.sc-split .sc-answer { padding: 0; }
	.sc-split .sc-answer-head { margin: .55rem .55rem 0; }
	.sc-split .sc-answer-body { padding: 1.05rem 1.15rem 1.15rem; }
}

@media (max-width: 560px) {
	.sc-answer-body { padding: 1rem 1.1rem 1.1rem; }
}

/* One pill height for both strips, set explicitly rather than left to whatever
   line-height the theme happens to give a heading. This is what guarantees the
   two cards start their content on the same line. */
.slopecalc { --sc-pill-h: 36px; }
.slopecalc .sc-modes,
.sc-answer-head { align-items: center; min-height: calc(var(--sc-pill-h) + .6rem); }
.slopecalc .sc-mode,
.slopecalc .sc-answer-title {
	height: var(--sc-pill-h);
	padding-top: 0;
	padding-bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.slopecalc .sc-answer-title { justify-content: flex-start; font-size: .8rem; }
@media (max-width: 560px) {
	.slopecalc .sc-modes { align-items: stretch; }
}

/* Kadence gives every h3 a bottom margin. Inside the strip it must be zero, or
   the answer card's header sits 16px taller than the mode switcher. */
.slopecalc .sc-answer-head .sc-answer-title { margin: 0; }

/* ------------------------------------------------------------------------
   The verdict box is display:flex, and an author display rule beats the
   browser's own [hidden] { display: none }. So on maths pages, where there is
   no verdict, an empty flex box with padding was still sitting there taking
   about 48px. That was the mysterious gap at the top of the answer card.
   This covers every element in the calculator, not just that one.
   ------------------------------------------------------------------------ */
.slopecalc [hidden] { display: none !important; }

/* ------------------------------------------------------------------------
   The result label is a label, not a control.
   It was borrowing the mode switcher's track and pill, which made it look
   clickable. It keeps the same height so the two cards still start on the
   same line, but it is now plain text with a hairline under it: the ordinary
   way a card names its contents.
   ------------------------------------------------------------------------ */

.sc-answer-head {
	background: none;
	border-radius: 0;
	margin: 0 1.3rem;
	padding: 0;
	min-height: calc(var(--sc-pill-h) + .6rem);
	border-bottom: 1px solid var(--sc-answer-border, #e2e7ee);
}

.slopecalc .sc-answer-title,
.slopecalc .sc-answer-head .sc-answer-title {
	background: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	height: auto;
	font-family: var(--sc-font-head, inherit);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--sc-ink-faint, #8a94a2);
}

@media (min-width: 1001px) {
	.sc-split .sc-answer-head { margin: 0 1.15rem; }
}
@media (max-width: 560px) {
	.sc-answer-head { margin: 0 1.1rem; }
}

/* The label strip keeps the mode track's top margin, so both cards still start
   their content on the same line. Side margins follow the body padding instead,
   so the hairline lines up with the results underneath it. */
.sc-answer-head { margin: .6rem 1.3rem 0; }
@media (min-width: 1001px) {
	.sc-split .sc-answer-head { margin: .55rem 1.15rem 0; }
}
@media (max-width: 560px) {
	.sc-answer-head { margin: .6rem 1.1rem 0; }
}

/* No rule under the result label. The word alone is enough, and the card
   already has its own border doing the job of separating things. */
.sc-answer-head { border-bottom: 0; }

/* ------------------------------------------------------------------------
   The calculator card no longer stretches to whatever the answer needs.
   It sits at its own height and stays there. The answer card is given that
   same height as a floor by JS, so the pair still lines up top and bottom
   before a calculation, and only the answer grows once results arrive.
   ------------------------------------------------------------------------ */
.sc-split { align-items: start; }

/* ==========================================================================
   BUTTONS: every state spelled out
   Kadence styles button:hover, :focus and :active together in one rule. If we
   leave any of those three unset it fills the gap with its own palette, which
   is how Reset ended up with a dark blue box behind dark text. Nothing below
   is left to chance.
   ========================================================================== */

/* ---- primary: Calculate ---- */
.slopecalc .sc-go,
.slopecalc .sc-go:link,
.slopecalc .sc-go:visited {
	background: var(--sc-btn-bg, #1553c7);
	color: var(--sc-btn-ink, #fff);
	border: 1px solid transparent;
	box-shadow: none;
	text-decoration: none;
}
.slopecalc .sc-go:hover,
.slopecalc .sc-go:focus {
	background: var(--sc-btn-bg-hover, #0e3e99);
	color: var(--sc-btn-ink, #fff);
	border-color: transparent;
	box-shadow: none;
}
.slopecalc .sc-go:active {
	background: var(--sc-btn-bg-active, #0b3480);
	color: var(--sc-btn-ink, #fff);
	transform: translateY(1px);
}
.slopecalc .sc-go:focus-visible {
	outline: 2px solid var(--sc-btn-ring, #1553c7);
	outline-offset: 2px;
}

/* ---- secondary: Reset ---- */
.slopecalc .sc-reset,
.slopecalc .sc-reset:link,
.slopecalc .sc-reset:visited {
	background: var(--sc-btn2-bg, transparent);
	color: var(--sc-btn2-ink, #55606e);
	border: 1px solid var(--sc-btn2-border, #d8dfe8);
	box-shadow: none;
	text-decoration: none;
}
.slopecalc .sc-reset:hover,
.slopecalc .sc-reset:focus {
	background: var(--sc-btn2-bg-hover, #eaf0fd);
	color: var(--sc-btn2-ink-hover, #0e3e99);
	border-color: var(--sc-btn2-border-hover, #1553c7);
	box-shadow: none;
}
.slopecalc .sc-reset:active {
	background: var(--sc-btn2-bg-active, #dce6fa);
	color: var(--sc-btn2-ink-hover, #0e3e99);
	transform: translateY(1px);
}
.slopecalc .sc-reset:focus-visible {
	outline: 2px solid var(--sc-btn-ring, #1553c7);
	outline-offset: 2px;
}

/* ---- ghost: the mode tabs ---- */
.slopecalc .sc-mode,
.slopecalc .sc-mode:link,
.slopecalc .sc-mode:visited {
	background: transparent;
	color: var(--sc-btn3-ink, #55606e);
	border: 0;
	box-shadow: none;
	text-decoration: none;
}
.slopecalc .sc-mode:hover,
.slopecalc .sc-mode:focus {
	background: transparent;
	color: var(--sc-btn3-ink-hover, #1553c7);
	box-shadow: none;
}
.slopecalc .sc-mode.is-active,
.slopecalc .sc-mode.is-active:hover,
.slopecalc .sc-mode.is-active:focus,
.slopecalc .sc-mode.is-active:active {
	background: transparent;
	color: var(--sc-btn3-ink-active, #0e3e99);
	box-shadow: none;
}
.slopecalc .sc-mode:focus-visible {
	outline: 2px solid var(--sc-btn-ring, #1553c7);
	outline-offset: 1px;
}

/* ---- disabled, for whenever a button needs it ---- */
.slopecalc button:disabled,
.slopecalc button:disabled:hover,
.slopecalc button:disabled:focus {
	background: var(--sc-btn-off-bg, #edf1f5);
	color: var(--sc-btn-off-ink, #8a94a2);
	border-color: transparent;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ==========================================================================
   17. EXPORT BAR
   Copy, Download and Print sit in the answer head, to the right of the
   Result label, and only appear once there is something to export. They are
   the quietest control on the card on purpose: the answer is the point, not
   the buttons. Print doubles as Save as PDF through the browser dialog, and
   the child theme already carries the print stylesheet.
   ========================================================================== */

.sc-export {
	display: flex;
	gap: .3rem;
	margin-left: auto;
}
.slopecalc .sc-export[hidden] { display: none !important; }

.slopecalc .sc-x,
.slopecalc .sc-x:link,
.slopecalc .sc-x:visited {
	font: inherit;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	padding: .4rem .6rem;
	border: 1px solid transparent;
	border-radius: 7px;
	background: none;
	color: var(--sc-ink-faint, #8a94a2);
	cursor: pointer;
	transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.slopecalc .sc-x:hover {
	background: var(--sc-seg-track, #eef2f7);
	border-color: var(--sc-answer-border, #e2e7ee);
	color: var(--sc-ink, #101826);
}
.slopecalc .sc-x:focus-visible {
	outline: 2px solid var(--sc-accent, #1553c7);
	outline-offset: 2px;
	color: var(--sc-ink, #101826);
}
.slopecalc .sc-x:active { transform: translateY(1px); }
.slopecalc .sc-x.is-done {
	color: var(--sc-accent, #1553c7);
	border-color: var(--sc-accent, #1553c7);
	background: none;
}

/* On a narrow answer card the three words do not fit beside the label. */
@media (max-width: 460px) {
	.slopecalc .sc-x { padding: .4rem .45rem; font-size: .7rem; }
}

/*
 * TOUCH TARGETS. Team audit 2026-08-26 measured Copy, Download and Print at
 * 26.6px high. That clears the WCAG 2.5.8 minimum of 24px but misses the 44px
 * that 2.5.5 asks for, and on a page about wheelchair access the higher bar is
 * the one to hold.
 *
 * Keyed on pointer: coarse rather than a width breakpoint, because the thing
 * that makes a small target hard to hit is a finger, not a narrow window. A
 * mouse on a 400px desktop window does not need 44px, and the fold budget on
 * the 1366x768 target is tight enough that spending it there would be wrong.
 */
@media (pointer: coarse) {
	.slopecalc .sc-x {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: .4rem .7rem;
		font-size: .78rem;
	}
	.slopecalc .sc-chip { min-height: 44px; }

	/* Added 2026-08-27 after the team audit. The rule reached the close
	   buttons and the example chips and stopped there, so the fields a person
	   actually taps on site, standing in a driveway with a tape measure, were
	   still 40px. Text inputs, selects, the mode tabs and the two action
	   buttons all get it now. */
	.slopecalc .sc-field input,
	.slopecalc .sc-field select,
	.slopecalc .sc-units select,
	.slopecalc .sc-mode,
	.slopecalc .sc-go,
	.slopecalc .sc-reset { min-height: 44px; }
}

/* The verdict's second thought, set apart.
   The compliance caveat has to be in the box, because a comparison presented
   without it reads as a pass. Run on as one paragraph it was nine lines on a
   phone and nobody reached the end. */
.slopecalc .sc-verdict .sc-verdict-note {
	display: block;
	margin-top: .6rem;
	font-size: .92em;
	opacity: .82;
}

/* Reading measure lives in the theme, section 14, because page layout is the
   theme's job and the rule it had to overturn was there. */

@media print { .sc-export { display: none !important; } }

/* ==========================================================================
   18. EXAMPLE CHIPS
   Sit between the fields and the Calculate button, so they are visible without
   scrolling but do not add a second header strip above the mode switcher. One
   tap fills the fields and runs. Trade presets only: a plumber on site benefits,
   a student typing two points does not.
   ========================================================================== */

.sc-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-top: 1.1rem;
}
.sc-chips-label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sc-ink-faint, #8a94a2);
	margin-right: .15rem;
}

.slopecalc .sc-chip,
.slopecalc .sc-chip:link,
.slopecalc .sc-chip:visited {
	font: inherit;
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.2;
	padding: .38rem .95rem;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sc-answer-border, #e2e7ee);
	border-radius: 20px;
	background: var(--sc-card, #fff);
	color: var(--sc-ink-soft, #46536a);
	cursor: pointer;
	transition: color .13s ease, background-color .13s ease, border-color .13s ease;
}
.slopecalc .sc-chip:hover {
	border-color: var(--sc-accent, #1553c7);
	color: var(--sc-accent-ink, #0e3e99);
	background: var(--sc-accent-soft, #e7effb);
}
.slopecalc .sc-chip:focus-visible {
	outline: 2px solid var(--sc-accent, #1553c7);
	outline-offset: 2px;
}
.slopecalc .sc-chip:active { transform: translateY(1px); }
.slopecalc .sc-chip.is-on,
.slopecalc .sc-chip.is-on:hover {
	background: var(--sc-accent, #1553c7);
	border-color: var(--sc-accent, #1553c7);
	color: #fff;
}

/* Short screens are where the fold is tightest, so tighten the gap not the tap
   target. Anything below 44px high stops being usable with gloves on, which is
   why the pointer: coarse block above lifts these to 44. */
@media (min-width: 1001px) and (max-height: 800px) {
	.sc-chips { margin-top: .85rem; }
}
@media (max-width: 520px) {
	.sc-chips-label { width: 100%; margin-bottom: .1rem; }
}

@media print { .sc-chips { display: none !important; } }

/* ==========================================================================
   19. PRINT SHEET
   Pressing Print used to print the article as well. Now the button builds a
   sheet holding only the answer, appends it to body, and this stylesheet hides
   every other top level child while it is there. The class comes off again on
   afterprint, so nothing is left behind.
   ========================================================================== */

.sc-print-sheet { display: none; }

@media print {
	html.sc-printing body > *:not(.sc-print-sheet) { display: none !important; }
	html.sc-printing .sc-print-sheet { display: block !important; }
	html.sc-printing body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
}

.sc-print-sheet {
	font-family: var(--sc-font, inherit);
	color: #101826;
	max-width: 48rem;
	margin: 0 auto;
	padding: 0;
}
.sc-print-sheet h1 {
	font-size: 1.4rem;
	line-height: 1.25;
	margin: 0 0 .35rem;
}
.sc-print-sheet h2 {
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6c7a8c;
	margin: 1.5rem 0 .45rem;
	border-bottom: 1px solid #d9e0e8;
	padding-bottom: .3rem;
}
.sc-ps-meta { font-size: .74rem; color: #6c7a8c; margin: 0 0 .2rem; line-height: 1.5; }

.sc-ps-t { width: 100%; border-collapse: collapse; }
.sc-ps-t th {
	text-align: left;
	font-weight: 500;
	font-size: .8rem;
	color: #46536a;
	padding: .3rem .8rem .3rem 0;
	width: 15rem;
	vertical-align: top;
}
.sc-ps-t td {
	font-size: .95rem;
	font-weight: 600;
	padding: .3rem 0;
	vertical-align: top;
}
.sc-ps-t tr.sc-ps-lead td { font-size: 1.25rem; }
.sc-ps-note { font-weight: 400; font-size: .75rem; color: #6c7a8c; }

.sc-ps-verdict {
	border: 1px solid #d9e0e8;
	border-left: 3px solid #101826;
	padding: .6rem .8rem;
	margin-top: 1.2rem;
	font-size: .85rem;
	line-height: 1.5;
}
.sc-ps-steps { font-size: .85rem; line-height: 1.6; padding-left: 1.2rem; margin: 0; }
.sc-ps-foot {
	margin-top: 1.6rem;
	padding-top: .6rem;
	border-top: 1px solid #d9e0e8;
	font-size: .72rem;
	color: #6c7a8c;
}

@media print {
	.sc-print-sheet { max-width: none; }
	.sc-ps-t tr, .sc-ps-steps li { page-break-inside: avoid; }
}


/* ---------------------------------------------------------------- 19
   More results

   Nine cards pushed the useful ones off a phone screen. The five that
   answer the question stay out; radians, rise, run and distance sit
   behind this. Still .sc-card, so the exports do not care.
   ---------------------------------------------------------------- */
.sc-more {
	grid-column: 1 / -1;
	border: 1px solid var(--sc-answer-border, #e2e7ee);
	border-radius: 8px;
	background: var(--sc-card-bg, #fff);
}
.sc-more > summary {
	list-style: none;
	cursor: pointer;
	padding: .6rem .9rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--sc-accent-ink, #0e3e99);
	display: flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	box-sizing: border-box;
}
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more > summary::after {
	content: "";
	width: .45rem; height: .45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s;
}
.sc-more[open] > summary::after { transform: rotate(-135deg); }
.sc-more > summary:focus-visible { outline: 2px solid var(--sc-accent, #1553c7); outline-offset: 2px; }
.sc-results-more {
	display: grid;
	gap: .55rem;
	grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
	padding: 0 .7rem .7rem;
}
.sc-results-more .sc-card {
	background: var(--sc-answer-bg, #f7f9fc);
}


/* ---------------------------------------------------------------- 20
   Copy failure

   The clipboard write can be refused: an insecure origin, a permission
   the user never granted, a browser that will not do it without a
   gesture it recognises. Saying "Copied" anyway leaves whatever was in
   the clipboard before and the reader pastes the wrong report. This is
   what happens instead.
   ---------------------------------------------------------------- */
.sc-export button.is-fail {
	color: var(--sc-fail-ink, #9a2c2c);
	border-color: var(--sc-fail-ink, #9a2c2c);
}
.sc-copyfail {
	margin-top: .9rem;
	padding: .85rem .9rem;
	border: 1px solid var(--sc-fail-ink, #9a2c2c);
	border-radius: 8px;
	background: var(--sc-fail-soft, #fdf1f1);
}
.sc-copyfail-msg {
	margin: 0 0 .55rem;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--sc-fail-ink, #9a2c2c);
}
.sc-copyfail-text {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--sc-font-mono, ui-monospace, monospace);
	font-size: .78rem;
	line-height: 1.5;
	padding: .55rem .6rem;
	border: 1px solid var(--sc-answer-border, #e2e7ee);
	border-radius: 6px;
	background: var(--sc-card, #fff);
	color: var(--sc-ink, #101826);
	resize: vertical;
}
.sc-copyfail-close {
	margin-top: .55rem;
	font: inherit;
	font-size: .78rem;
	font-weight: 600;
	min-height: 40px;
	padding: .38rem .95rem;
	border: 1px solid var(--sc-answer-border, #e2e7ee);
	border-radius: 20px;
	background: var(--sc-card, #fff);
	color: var(--sc-ink-soft, #46536a);
	cursor: pointer;
}
.sc-copyfail-close:hover { border-color: var(--sc-accent, #1553c7); color: var(--sc-accent-ink, #0e3e99); }
.sc-copyfail-close:focus-visible { outline: 2px solid var(--sc-accent, #1553c7); outline-offset: 2px; }

@media print { .sc-copyfail { display: none !important; } }


/* ---------------------------------------------------------------- 21
   Pipe size selector

   A dropdown of the sizes IPC Table 704.1 actually lists, instead of a
   free text diameter that accepted 7, 0 and -4 and filed all three
   under the smallest band.
   ---------------------------------------------------------------- */
.sc-select {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	cursor: pointer;
	padding-right: 2.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355606e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
}
.sc-select::-ms-expand { display: none; }

/* Perpendicular page: the line the reader gave, drawn alongside the answer,
   plus the right angle marker where they cross. Solid and lighter, so it is
   distinct from the dashed answer line without relying on colour alone.
   Team audit 2026-08-29 round two, item 7. */
.sc-other { stroke: #94a3b8; stroke-width: 2; fill: none; }
.sc-right { stroke: #475569; stroke-width: 1.6; fill: none; }

/* sc-hint is set in the code face because it normally holds a formula such as
   y = mx + b. A sentence in that face reads as an error message. */
.sc-hint-prose { font-family: inherit; font-size: 0.86rem; line-height: 1.45; }

/* Byline. One quiet line at the foot of the content: who checked it and when.
   Deliberately small and low contrast. It is a credit, not a claim, and it
   should be findable rather than prominent. */
.sc-byline-wrap { padding-bottom: 2.25rem; }
.sc-byline {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid #e5e7eb;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #6b7280;
}
.sc-byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sc-byline a:hover { color: #1f2937; }
.sc-byline-sep { padding: 0 0.15rem; color: #b8bec7; }