/*
 * Block: sn/margin-calculator — "Swiss Signal".
 *
 * An instrument on paper: a hairline-ruled frame, the inputs on the left, the
 * results on a CANVAS plane on the right (the theme's grid texture — this is
 * the one block where "the infinite canvas" is literally a working surface).
 *
 * THE HERO FIGURE IS INK, NOT RED, and it stays that way. A huge red number
 * beside odds reads as a payout or a price to chase; the margin is a cost,
 * and red on this skin means "the thing to act on". Red appears only as the
 * small square that marks the verdict and the rule above the hero figure.
 *
 * State arrives as data-sn-state (empty / ok / high / arb), so the verdict
 * selectors are ATTRIBUTE selectors: a modifier class could not survive the
 * skin hash in JS. The mark is DRAWN here — no glyph the font may not carry.
 *
 * Figures are tabular (Hanken Grotesk's digits share one advance already;
 * tabular-nums is set anyway), so numbers do not jiggle as they recalculate.
 */

.x1eab22bb {
	margin: var(--sn-sp-12) 0;
}

.x1ca5b0f5 {
	margin: 0 0 var(--sn-sp-3);
}

.x470f0b5f {
	margin: 0 0 var(--sn-sp-6);
	color: var(--sn-text-soft);
	max-width: 62ch;
}

.x46db3a01 {
	display: grid;
	/* --sn-border-strong: an instrument the reader operates needs a real edge;
	   the hairline token is 1.25:1. */
	border: var(--sn-border-w) solid var(--sn-border-strong);
	background: var(--sn-bg);
}

/* ---------- Inputs ---------- */

.x5b1138f3 {
	display: grid;
	gap: var(--sn-sp-4);
	align-content: start;
	padding: var(--sn-sp-6);
}

.x20ef8bf2 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sn-sp-3);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.x8ef42328,
.x297cbefb label,
.xa475b37d,
.xd628ee49,
.x432ad4db thead th {
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	color: var(--sn-text-muted);
}

.x8ef42328 {
	grid-column: 1 / -1;
	padding: 0;
	margin-bottom: var(--sn-sp-1);
	color: var(--sn-heading);
}

.x297cbefb {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-1);
	margin: 0;
	min-width: 0;
}

.x871b2c78 {
	display: block;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

/*
 * TWO CLASSES ON PURPOSE. underscores' style.css styles
 * `input[type="number"]` at (0,1,1) — the specificity of a one-class block
 * rule — and WordPress does not guarantee block stylesheets load after it, so
 * a one-class rule wins or loses by load order. (0,2,1) wins regardless.
 */
.x1eab22bb .x297cbefb input {
	width: 100%;
	min-height: 48px;
	padding: var(--sn-sp-3);
	background: var(--sn-bg);
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	color: var(--sn-heading);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-base);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	transition: border-color var(--sn-motion-fast) var(--sn-ease),
	            box-shadow var(--sn-motion-fast) var(--sn-ease);
}

.x1eab22bb .x297cbefb input:focus {
	border-color: var(--sn-heading);
	box-shadow: inset 0 0 0 1px var(--sn-heading);
	outline: none;
}

/* The keyboard ring is kept on top of the border change (base.css note). */
.x1eab22bb .x297cbefb input:focus-visible {
	outline: var(--sn-border-thick) solid var(--sn-heading);
	outline-offset: 2px;
}

/* ---------- Results ---------- */

.x63edf181 {
	display: grid;
	gap: var(--sn-sp-6);
	align-content: start;
	padding: var(--sn-sp-6);
	background: var(--sn-pat-canvas);
	border-top: var(--sn-border-w) solid var(--sn-border-strong);
}

.xc9f6a06e {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-2);
	margin: 0;
	padding-top: var(--sn-sp-4);
	border-top: var(--sn-border-thick) solid var(--sn-signal);
}

.xa475b37d {
	color: var(--sn-heading);
}

.xa1027920 {
	font-family: var(--sn-font-display);
	font-size: clamp(3rem, 2rem + 4vw, var(--sn-fs-4xl));
	font-weight: 800;
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	font-variant-numeric: tabular-nums;
	color: var(--sn-heading);
}

.x26bbdf62 {
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Outcome table — ruled like base.css tables, compact. On canvas the
   hairline would be 1.13:1, so the rows take --sn-border-strong at 40%. */
.x432ad4db {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--sn-fs-base);
	font-variant-numeric: tabular-nums;
}

.x432ad4db th,
.x432ad4db td {
	padding: var(--sn-sp-2) var(--sn-sp-3) var(--sn-sp-2) 0;
	border: 0;
	text-align: left;
}

.x432ad4db thead th {
	border-bottom: var(--sn-border-thick) solid var(--sn-border-ink);
	white-space: nowrap;
}

.x432ad4db tbody th,
.x432ad4db tbody td {
	border-bottom: var(--sn-border-w) solid color-mix(in srgb, var(--sn-border-strong) 40%, transparent);
}

.x432ad4db tbody th {
	font-weight: 600;
	color: var(--sn-heading);
}

.x432ad4db td {
	font-weight: 600;
	color: var(--sn-heading);
}

.x432ad4db tr[hidden] {
	display: none;
}

.x03b04afe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sn-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.xe86fa92d {
	display: flex;
	flex-direction: column;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-4);
	background: var(--sn-bg);
	border: var(--sn-border-w) solid var(--sn-border);
	min-width: 0;
}

.x35912e59 {
	font-size: var(--sn-fs-lg);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: var(--sn-tracking-display);
	font-variant-numeric: tabular-nums;
	color: var(--sn-heading);
	overflow-wrap: anywhere;
}

/* ---------- Verdict ---------- */

.x2c577ddd {
	display: flex;
	align-items: flex-start;
	gap: var(--sn-sp-3);
	margin: 0;
	font-size: var(--sn-fs-base);
	line-height: var(--sn-lh-body);
	color: var(--sn-heading);
}

/*
 * The MARK carries the state together with the wording — never colour alone:
 *   ok     filled ink square
 *   high   filled RED square (the one place red means "look at this")
 *   empty  hollow square
 *   arb    hollow square crossed by a diagonal — "does not apply"
 */
.x94925ba1 {
	position: relative;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: .45em;
	background: var(--sn-heading);
	border: var(--sn-border-thick) solid var(--sn-heading);
}

.x2c577ddd[data-sn-state="high"] .x94925ba1 {
	background: var(--sn-signal);
	border-color: var(--sn-signal);
}

.x2c577ddd[data-sn-state="empty"] .x94925ba1,
.x2c577ddd[data-sn-state="arb"] .x94925ba1 {
	background: transparent;
	border-color: var(--sn-border-strong);
}

.x2c577ddd[data-sn-state="arb"] .x94925ba1::after {
	content: '';
	position: absolute;
	left: 50%;
	top: -3px;
	bottom: -3px;
	width: var(--sn-border-thick);
	margin-left: -1px;
	background: var(--sn-border-strong);
	transform: rotate(45deg);
}

.x2c577ddd[data-sn-state="empty"],
.x2c577ddd[data-sn-state="arb"] {
	color: var(--sn-text-soft);
}

.x81793f8d {
	margin: var(--sn-sp-3) 0 0;
	font-size: var(--sn-fs-sm);
	color: var(--sn-text-muted);
	max-width: 70ch;
}

/* ---------- Layout ---------- */

@media (min-width: 768px) {
	.x46db3a01 {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.x5b1138f3,
	.x63edf181 {
		padding: var(--sn-sp-8);
	}

	.x63edf181 {
		border-top: 0;
		border-left: var(--sn-border-w) solid var(--sn-border-strong);
	}
}

/* Narrow phones: three odds boxes side by side are ~95px each at 360px, which
   is enough for "3.60" but not for the uppercase labels — stack the labels'
   hint under them (already block) and let the boxes keep one row. */
@media (max-width: 359px) {
	.x20ef8bf2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.x1eab22bb .x297cbefb input {
		transition: none;
	}
}