/**
 * Ruck Engine styles.
 *
 * Design intent: a field instrument readout. A ruck estimate is a measurement
 * with a tolerance, so the interface presents it the way an instrument would —
 * one large value carrying its error band, everything else quiet and dense.
 * Numbers are tabular throughout so columns align and figures can be compared
 * down a column without reflow.
 */

.rke {
	--rke-ink: #1b1d1a;
	--rke-paper: #fbfaf7;
	--rke-field: #2f4f3e;
	--rke-field-deep: #223b2e;
	--rke-rule: #d8d5cd;
	--rke-rule-soft: #ebe8e1;
	--rke-muted: #6b6a63;
	--rke-warn: #8a4b2a;
	--rke-warn-bg: #f7efe8;
	--rke-note-bg: #f2f1ec;

	--rke-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rke-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	font-family: var(--rke-sans);
	color: var(--rke-ink);
	background: var(--rke-paper);
	border: 1px solid var(--rke-rule);
	border-radius: 2px;
	max-width: 44rem;
	margin: 2rem 0;
	font-size: 1rem;
	line-height: 1.5;
}

.rke *,
.rke *::before,
.rke *::after { box-sizing: border-box; }

.rke-shell { padding: 1.25rem; }

/* --- Units toggle ------------------------------------------------- */

.rke-units {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1.25rem;
	padding-bottom: .875rem;
	border-bottom: 1px solid var(--rke-rule-soft);
}

.rke-units__label {
	font-size: .8125rem;
	color: var(--rke-muted);
	margin-right: .25rem;
}

.rke-unit-btn {
	font: inherit;
	font-size: .8125rem;
	padding: .375rem .75rem;
	min-height: 2.25rem;
	background: transparent;
	color: var(--rke-muted);
	border: 1px solid var(--rke-rule);
	border-radius: 2px;
	cursor: pointer;
}

.rke-unit-btn.is-active {
	background: var(--rke-ink);
	border-color: var(--rke-ink);
	color: var(--rke-paper);
}

.rke-unit-btn:focus-visible,
.rke-input:focus-visible,
.rke-btn:focus-visible,
.rke-panel > summary:focus-visible,
.rke-group > summary:focus-visible {
	outline: 2px solid var(--rke-field);
	outline-offset: 2px;
}

/* --- Form --------------------------------------------------------- */

.rke-group { border-top: 1px solid var(--rke-rule-soft); margin-top: .75rem; }

.rke-group > summary {
	cursor: pointer;
	padding: .75rem 0;
	font-size: .9375rem;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
}

.rke-group > summary::-webkit-details-marker { display: none; }

.rke-group > summary::before {
	content: "+";
	font-family: var(--rke-mono);
	color: var(--rke-muted);
	width: 1rem;
}

.rke-group[open] > summary::before { content: "\2212"; }

.rke-group__body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: .875rem 1rem;
	padding-bottom: 1rem;
}

.rke-group__body--flat { padding-bottom: .25rem; }

.rke-field { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; }

.rke-field[hidden] { display: none; }

.rke-label {
	font-size: .8125rem;
	color: var(--rke-muted);
	line-height: 1.3;
}

.rke-input {
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: .5rem .625rem;
	min-height: 2.75rem;
	width: 100%;
	background: #fff;
	color: var(--rke-ink);
	border: 1px solid var(--rke-rule);
	border-radius: 2px;
}

.rke-input:hover { border-color: var(--rke-muted); }

.rke-field--range { grid-column: 1 / -1; }
.rke-field--range .rke-input { padding: 0; min-height: 2.75rem; background: transparent; border: 0; }

.rke-range-out {
	font-family: var(--rke-mono);
	font-size: .875rem;
	color: var(--rke-field);
}

.rke-field--checkbox {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: flex-start;
	gap: .5rem;
	flex-wrap: wrap;
}

.rke-checkbox { width: 1.125rem; height: 1.125rem; margin-top: .125rem; accent-color: var(--rke-field); }

.rke-field--checkbox .rke-label { flex: 1; min-width: 0; color: var(--rke-ink); font-size: .875rem; }

.rke-help {
	font-size: .8125rem;
	color: var(--rke-muted);
	margin: .25rem 0 0;
	flex-basis: 100%;
	line-height: 1.45;
}

/* --- Result ------------------------------------------------------- */

.rke-result {
	background: var(--rke-field);
	color: #eef2ee;
	padding: 1.25rem;
	margin: 1.25rem -1.25rem 0;
	border-radius: 0;
}

.rke-result__label {
	margin: 0 0 .375rem;
	font-size: .8125rem;
	color: #b9c9bd;
}

.rke-result__figure {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4375rem;
	line-height: 1;
}

.rke-result__number {
	font-size: clamp(2.75rem, 12vw, 3.75rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	color: #fff;
}

.rke-result__unit { font-size: 1.125rem; color: #b9c9bd; }

.rke-result__band {
	font-family: var(--rke-mono);
	font-size: .9375rem;
	color: #a8bdad;
	padding-left: .375rem;
	border-left: 1px solid #4a6b57;
	margin-left: .25rem;
}

.rke-result__secondary {
	list-style: none;
	margin: 1rem 0 0;
	padding: .875rem 0 0;
	border-top: 1px solid #46644f;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: .625rem 1rem;
	font-size: .875rem;
	color: #cbd9ce;
}

.rke-result__secondary span {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.rke-result__note {
	margin: 1rem 0 0;
	font-size: .875rem;
	color: #cbd9ce;
	line-height: 1.5;
}

/* --- Compare (two-column A/B) ------------------------------------- */

.rke-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: #46644f;
	border: 1px solid #46644f;
	border-radius: 2px;
	margin-top: .375rem;
}

.rke-compare__col { background: var(--rke-field); padding: .875rem; min-width: 0; }

.rke-compare__col--b { background: var(--rke-field-deep); }

.rke-compare__label {
	margin: 0 0 .5rem;
	font-size: .75rem;
	line-height: 1.35;
	color: #b9c9bd;
}

.rke-compare__num {
	margin: 0;
	font-size: clamp(1.75rem, 8vw, 2.5rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	line-height: 1;
	color: #fff;
}

.rke-compare__unit { margin: .25rem 0 0; font-size: .8125rem; color: #b9c9bd; }

.rke-verdict {
	margin: .875rem 0 0;
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	padding-left: .75rem;
	border-left: 3px solid #7f9a87;
	color: #fff;
}

.rke-verdict--out { border-left-color: #d8a06a; }

/* --- Splits and log ----------------------------------------------- */

.rke-panel--splits { border-top-color: #46644f; margin-top: 1rem; }
.rke-panel--splits > summary { color: #cbd9ce; }
.rke-panel--splits > summary::before { color: #a8bdad; }
.rke-panel--splits .rke-table { color: #e4ece5; }
.rke-panel--splits .rke-table th,
.rke-panel--splits .rke-table td { border-bottom-color: #46644f; }
.rke-panel--splits .rke-table thead th { color: #b9c9bd; border-bottom-color: #5c7a66; }
.rke-panel--splits .rke-help { color: #a8bdad; }

.rke-log { padding-bottom: 1.25rem; }
.rke-log .rke-table { margin-top: .875rem; }

.rke-btn--tiny {
	min-height: auto;
	padding: .1875rem .5rem;
	font-size: .75rem;
	margin-top: 0;
}

.rke-field.is-locked .rke-input {
	background: var(--rke-note-bg);
	color: var(--rke-muted);
	cursor: not-allowed;
}

/* --- Flags -------------------------------------------------------- */

.rke-flags { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }

.rke-flag {
	font-size: .8125rem;
	line-height: 1.45;
	padding: .5rem .625rem;
	border-radius: 2px;
	background: rgba(255, 255, 255, .1);
	border-left: 3px solid #7f9a87;
	color: #e4ece5;
}

.rke-flag--warn { border-left-color: #d8a06a; background: rgba(216, 160, 106, .16); }

.rke-band-note {
	margin: .75rem 0 0;
	font-size: .8125rem;
	color: #a8bdad;
}

/* Static/no-JS variant sits on paper, not on the field block. */
.rke-shell > .rke-result:first-child { margin-top: 0; }

/* --- Panels ------------------------------------------------------- */

.rke-panels { margin-top: 1.25rem; display: grid; gap: 0; }

.rke-panel { border-top: 1px solid var(--rke-rule-soft); }

.rke-panel > summary {
	cursor: pointer;
	padding: .8125rem 0;
	font-size: .9375rem;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
}

.rke-panel > summary::-webkit-details-marker { display: none; }

.rke-panel > summary::before {
	content: "+";
	font-family: var(--rke-mono);
	color: var(--rke-muted);
	width: 1rem;
}

.rke-panel[open] > summary::before { content: "\2212"; }

.rke-panel--math > summary { color: var(--rke-field); }

/* --- Trace -------------------------------------------------------- */

.rke-trace { padding-bottom: 1.25rem; display: grid; gap: 1.125rem; }

.rke-trace__step { padding-left: .875rem; border-left: 2px solid var(--rke-rule); }

.rke-trace__step.is-heuristic { border-left-style: dashed; border-left-color: #b99c6b; }

.rke-trace__head {
	margin: 0 0 .5rem;
	font-size: .875rem;
	font-weight: 600;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
}

.rke-trace__cite {
	font-weight: 400;
	font-size: .75rem;
	color: var(--rke-field);
}

.rke-trace__table { width: 100%; border-collapse: collapse; font-size: .8125rem; }

.rke-trace__table th,
.rke-trace__table td {
	text-align: left;
	padding: .3125rem .5rem .3125rem 0;
	vertical-align: top;
	border-bottom: 1px solid var(--rke-rule-soft);
}

.rke-trace__table th { font-weight: 400; color: var(--rke-muted); white-space: nowrap; }

.rke-trace__expr {
	font-family: var(--rke-mono);
	font-size: .75rem;
	color: var(--rke-muted);
	word-break: break-word;
}

.rke-trace__note {
	margin: .5rem 0 0;
	font-size: .75rem;
	color: var(--rke-warn);
	line-height: 1.45;
}

.rke-trace__confidence {
	font-size: .8125rem;
	color: var(--rke-ink);
	background: var(--rke-note-bg);
	padding: .625rem .75rem;
	border-radius: 2px;
	margin: 0;
}

.rke-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rke-delta.is-up { color: var(--rke-warn); }
.rke-delta.is-down { color: var(--rke-field); }

/* --- Buttons ------------------------------------------------------ */

.rke-btn {
	font: inherit;
	font-size: .875rem;
	padding: .5rem .875rem;
	min-height: 2.75rem;
	background: var(--rke-ink);
	color: var(--rke-paper);
	border: 1px solid var(--rke-ink);
	border-radius: 2px;
	cursor: pointer;
	margin-top: .875rem;
}

.rke-btn--ghost { background: transparent; color: var(--rke-field); border-color: var(--rke-rule); }
.rke-btn--ghost:hover { border-color: var(--rke-field); }

/* --- Tables (also used standalone by shortcodes) ------------------ */

.rke-table-wrap { margin: 2rem 0; overflow-x: auto; }

.rke-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--rke-sans);
	font-size: .9375rem;
}

.rke-table caption {
	text-align: left;
	font-size: .875rem;
	color: var(--rke-muted);
	line-height: 1.5;
	padding-bottom: .75rem;
}

.rke-table th,
.rke-table td {
	padding: .5625rem .75rem;
	text-align: left;
	border-bottom: 1px solid var(--rke-rule-soft);
}

.rke-table thead th {
	font-size: .8125rem;
	color: var(--rke-muted);
	font-weight: 600;
	border-bottom: 2px solid var(--rke-rule);
	white-space: nowrap;
}

.rke-table tbody th { font-weight: 500; }

.rke-table td.rke-num,
.rke-table th.rke-num { text-align: right; }

.rke-table--compact { font-size: .8125rem; }
.rke-table--compact th,
.rke-table--compact td { padding: .375rem .5rem; }

.rke-row--highlight { background: var(--rke-warn-bg); }
.rke-row--highlight th { font-weight: 700; }

.rke-table-wrap figcaption {
	font-size: .8125rem;
	color: var(--rke-muted);
	padding-top: .75rem;
	line-height: 1.55;
}

/* --- Charts ------------------------------------------------------- */

.rke-chart-wrap { margin: 2rem 0; }

.rke-chart { width: 100%; }

.rke-svg { width: 100%; height: auto; display: block; }

.rke-svg__grid { stroke: #e4e1da; stroke-width: 1; }

.rke-svg__tick {
	font-family: var(--rke-sans);
	font-size: 12px;
	fill: #6b6a63;
	text-anchor: middle;
}

.rke-svg__tick--y { text-anchor: end; }

.rke-svg__series { font-family: var(--rke-sans); font-size: 12px; font-weight: 600; }

.rke-chart-wrap figcaption {
	font-size: .875rem;
	color: var(--rke-muted);
	line-height: 1.55;
	margin-top: .5rem;
}

.rke-chart-data { margin-top: .75rem; }

.rke-chart-data > summary {
	cursor: pointer;
	font-size: .8125rem;
	color: var(--rke-field);
	min-height: 2.75rem;
	display: flex;
	align-items: center;
}

/* --- Math, sources, limits, embed --------------------------------- */

.rke-math {
	border: 1px solid var(--rke-rule);
	border-left: 3px solid var(--rke-field);
	border-radius: 2px;
	padding: 1.125rem;
	margin: 2rem 0;
	background: var(--rke-paper);
}

.rke-math__eq {
	font-family: var(--rke-mono);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 .5rem;
	overflow-x: auto;
	color: var(--rke-ink);
}

.rke-math__terms {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3125rem .875rem;
	margin: 1rem 0 0;
	font-size: .875rem;
}

.rke-math__terms dt { font-family: var(--rke-mono); font-weight: 600; color: var(--rke-field); }
.rke-math__terms dd { margin: 0; color: var(--rke-muted); }

.rke-math__src { margin: 1rem 0 0; font-size: .8125rem; }

.rke-cite { font-style: normal; font-size: .875rem; line-height: 1.55; }
.rke-cite__id { font-family: var(--rke-mono); font-size: .75rem; color: var(--rke-muted); }
.rke-cite__context { font-size: .875rem; color: var(--rke-muted); margin: .5rem 0 0; line-height: 1.55; }

.rke-source { padding: 1.125rem 0; border-bottom: 1px solid var(--rke-rule-soft); }
.rke-source h3 { margin: 0 0 .5rem; font-size: 1.0625rem; line-height: 1.35; }

.rke-limit { padding: 1.125rem 0; border-bottom: 1px solid var(--rke-rule-soft); }
.rke-limit h3 { margin: 0 0 .375rem; font-size: 1rem; color: var(--rke-warn); }
.rke-limit p { margin: 0; font-size: .9375rem; line-height: 1.6; }

.rke-changelog { padding-left: 1.25rem; }
.rke-changelog h3 { font-size: .9375rem; margin: 0 0 .25rem; font-family: var(--rke-mono); }
.rke-changelog p { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.6; }

.rke-embed { margin: 2rem 0; }
.rke-embed__code {
	width: 100%;
	font-family: var(--rke-mono);
	font-size: .75rem;
	padding: .75rem;
	border: 1px solid var(--rke-rule);
	border-radius: 2px;
	background: #fff;
	resize: vertical;
}

.rke-noscript {
	padding: 1rem 1.25rem;
	margin: 0;
	font-size: .9375rem;
	background: var(--rke-note-bg);
	line-height: 1.6;
}

.rke-engine-version {
	margin: 0;
	padding: .75rem 1.25rem;
	font-size: .75rem;
	color: var(--rke-muted);
	border-top: 1px solid var(--rke-rule-soft);
}

.rke-engine-version a { color: var(--rke-field); }

/* --- Responsive --------------------------------------------------- */

@media (max-width: 30rem) {
	.rke-shell { padding: 1rem; }
	.rke-result { margin-left: -1rem; margin-right: -1rem; padding: 1rem; }
	.rke-group__body { grid-template-columns: 1fr; }
	.rke-trace__table th { white-space: normal; }
	.rke-trace__expr { font-size: .6875rem; }
	/* Compare stays two-up even on a phone — side by side is the point. */
	.rke-compare__col { padding: .625rem; }
	.rke-compare__label { font-size: .6875rem; }
	.rke-log .rke-table--compact th,
	.rke-log .rke-table--compact td { padding: .3125rem .25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.rke *, .rke *::before, .rke *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

@media print {
	.rke-panel, .rke-units, .rke-btn { display: none; }
	.rke-result { background: none; color: #000; border: 1px solid #000; }
	.rke-result__number, .rke-result__secondary span { color: #000; }
}