/*
 * Block: sn/payout-calculator
 *
 * Follows the stat-tile contract: exactly ONE hero figure, values in the
 * squared accent face, and a verdict whose state is carried by a MARK and by
 * WORDING, never by colour alone.
 *
 * The verdict's state comes from [data-sn-state], not from a modifier class:
 * inc/skin-hash.php rewrites every sn-* class into an opaque token, so a class
 * name cannot be reconstructed by view.js. data-sn-* is excluded from that
 * transform, which makes it the only hook that works on both sides.
 *
 * ONE RESTRAINT WORTH KEEPING: the tiles rotate through the neons, but the
 * FIGURES themselves stay in the money colour and the ink. A stat whose colour
 * changes with its position implies the colour means something, and here it
 * means nothing but position.
 *
 * THE RESULTS PANE IS A TERMINAL WINDOW on this skin — the recessed
 * near-black surface, scanlined, lit from inside — which is the same material
 * as sn/key-takeaways and for the same reason: both are things a reader is
 * meant to read off a screen rather than be sold.
 */

.xb91fe3b8 {
	position: relative;
	margin: var(--sn-sp-16) 0;
	padding: var(--sn-sp-6);
	background: var(--sn-pat-scanlines), var(--sn-pat-grid), var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-acc-1);
	border-radius: var(--sn-radius);
	clip-path: var(--sn-notch-path);
	filter:
		drop-shadow(0 0 18px color-mix(in srgb, var(--sn-acc-1) 42%, transparent))
		drop-shadow(0 0 50px color-mix(in srgb, var(--sn-acc-3) 22%, transparent));
}

.x023495fb {
	display: inline-flex;
	align-items: baseline;
	margin: 0 0 var(--sn-sp-3);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	border: var(--sn-rule) solid var(--sn-acc-3);
	clip-path: var(--sn-notch-path);
	background: color-mix(in srgb, var(--sn-acc-3) 12%, var(--sn-surface));
	color: var(--sn-acc-3);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
}

.x023495fb::before {
	content: '>' / '';
	margin-right: .5em;
	font-family: var(--sn-font-accent);
	font-weight: 700;
	letter-spacing: var(--sn-hud-track);
	opacity: .8;
}

.xb1957a2e {
	margin: 0 0 var(--sn-sp-6);
}

.x42961a1d {
	margin-bottom: var(--sn-sp-8);
	color: var(--sn-text);
}

.x42961a1d > :first-child { margin-top: 0; }
.x42961a1d > :last-child { margin-bottom: 0; }

.x3614dc43 {
	display: grid;
	gap: var(--sn-sp-8);
}

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

.xb02df0da {
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-acc-1);
	font-family: var(--sn-font-display);
	font-size: var(--sn-fs-md);
	font-weight: 600;
	letter-spacing: 0;
}

.xe2f8dedf {
	display: grid;
	gap: var(--sn-sp-2);
	margin-bottom: var(--sn-sp-4);
}

.xe2f8dedf label {
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-xs);
}

/*
 * Inputs get the full treatment — thick frame, generous padding. They are the
 * interactive heart of the block's one link-worthy tool, so they are the last
 * place to be timid.
 *
 * TWO CLASSES IN THE SELECTOR, DELIBERATELY. `.xe2f8dedf input` is
 * (0,1,1), which only TIES with underscores' `input[type="number"]` reset in
 * style.css — and this block's stylesheet is not guaranteed to load after it
 * (see the long note in base.css). Adding the block root makes it (0,2,1) and
 * the tie disappears. Do not "simplify" these selectors back to one class.
 */
.xb91fe3b8 .xe2f8dedf input,
.xb91fe3b8 .xe2f8dedf select {
	width: 100%;
	padding: var(--sn-sp-3) var(--sn-sp-4);
	background: var(--sn-surface-2);
	border: var(--sn-rule) solid var(--sn-acc-1);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-heading);
	font-family: var(--sn-font-accent);
	font-size: var(--sn-fs-md);
	font-weight: 700;
	/* Thai numerals and Latin digits mix in these fields; tabular figures stop
	   the value jumping around as it is typed. */
	font-variant-numeric: tabular-nums;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.xb91fe3b8 .xe2f8dedf input::placeholder {
	color: var(--sn-text-muted);
}

/* The focus state shifts the border to a DIFFERENT accent than the resting
   one and adds an inner glow, on top of the global :focus-visible ring. */
.xb91fe3b8 .xe2f8dedf input:focus,
.xb91fe3b8 .xe2f8dedf select:focus {
	border-color: var(--sn-acc-3);
	background: var(--sn-surface);
	box-shadow: 0 0 20px color-mix(in srgb, var(--sn-acc-3) 55%, transparent);
}

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

.x425f1e67 {
	padding: var(--sn-sp-6);
	background: var(--sn-pat-scanlines), var(--sn-surface-2);
	border: var(--sn-rule) dashed var(--sn-acc-3);
	border-radius: var(--sn-radius-sm);
	box-shadow: inset 0 0 30px color-mix(in srgb, var(--sn-acc-3) 12%, transparent);
}

/* The ONE hero figure. Everything else on the block is a supporting tile.
   This is also where --sn-gold belongs: gold means MONEY on this skin, never
   action, so the payout figure carries it and no button ever does. */
.x7d9afbaf {
	padding-bottom: var(--sn-sp-4);
	border-bottom: var(--sn-rule) solid var(--sn-acc-1);
}

.x9be99de8 {
	margin: 0 0 var(--sn-sp-2);
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
}

.xc288e433 {
	margin: 0;
	color: var(--sn-gold);
	font-family: var(--sn-font-accent);
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	/* A glow in the money colour, NOT the RGB split: the split paints a coral
	   and an azure ghost beside every digit, and a figure a reader is meant
	   to trust must not look mis-scanned. */
	text-shadow: 0 0 .18em color-mix(in srgb, var(--sn-gold) 55%, transparent);
}

.xd2292d90 {
	display: grid;
	gap: var(--sn-sp-3);
	margin-top: var(--sn-sp-6);
}

.xa223b941 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sn-sp-3);
	padding: var(--sn-sp-2) var(--sn-sp-3);
	border-left: var(--sn-rule-heavy) solid var(--sn-acc);
	border-radius: 0 var(--sn-radius-sm) var(--sn-radius-sm) 0;
	background: color-mix(in srgb, var(--sn-acc) 9%, transparent);
	box-shadow: inset 12px 0 22px -12px color-mix(in srgb, var(--sn-acc) 55%, transparent);
}

.xf390afdd {
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-xs);
}

.xccb4f0a9 {
	color: var(--sn-heading);
	font-family: var(--sn-font-accent);
	font-size: var(--sn-fs-md);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

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

.x56677273 {
	position: relative;
	margin: var(--sn-sp-6) 0 0;
	padding-left: var(--sn-sp-8);
	color: var(--sn-heading);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	line-height: 1.75;
}

/* State is carried by a MARK as well as by colour, so it survives both
   greyscale and colour-blindness (WCAG 1.4.1). */
.x56677273::before {
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--sn-font-accent);
	font-size: 1.15em;
	font-weight: 700;
	line-height: inherit;
}

.x56677273[data-sn-state="good"]::before {
	content: '\25CB'; /* ○ — "yes" in the Thai/East Asian convention */
	color: var(--sn-tip);
}

.x56677273[data-sn-state="bad"]::before {
	content: '\00D7'; /* × */
	/* The lifted coral: this mark is the block's only failure signal and it
	   sits on the recessed results pane (tokens.css rule 2). */
	color: var(--sn-acc-2-fg);
}

.x56677273[data-sn-state="neutral"]::before {
	content: '\2013'; /* – */
	color: var(--sn-text-muted);
}

.x56677273[data-sn-state="neutral"] {
	color: var(--sn-text-muted);
	font-weight: 400;
}

.xf28c47b5 {
	margin: var(--sn-sp-3) 0 0;
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
	line-height: 1.75;
}

.xf28c47b5[hidden] {
	display: none;
}

.x39ce40a1 {
	margin: var(--sn-sp-6) 0 0;
}

@media (min-width: 768px) {
	.xb91fe3b8 {
		padding: var(--sn-sp-8);
	}

	.x3614dc43 {
		grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
		gap: var(--sn-sp-8);
		align-items: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.xb91fe3b8 .xe2f8dedf input,
	.xb91fe3b8 .xe2f8dedf select {
		transition: none;
	}
}