/* ==========================================================================
   Delusion Meter — Standards Calculator
   --------------------------------------------------------------------------
   Design notes
   - Two type roles only: the system sans for reading, a monospace for every
     number, label and unit. The calculator is a measuring instrument, so the
     data face is doing the talking.
   - One hot accent (matches, primary action) and one cool accent (controls).
     The verdict tier is the only place colour is allowed to shout, and it
     shifts green through crimson as the odds get worse — the palette itself
     carries the answer.
   - Every colour is a custom property so a theme can be re-skinned by
     overriding :root, and so light/dark is one attribute swap.
   ========================================================================== */

.dmc {
	/* Light theme --------------------------------------------------------- */
	--dmc-bg: #fbf9ff;
	--dmc-surface: #ffffff;
	--dmc-surface-2: #f6f3fd;
	--dmc-surface-3: #efeaf9;
	--dmc-ink: #16102b;
	--dmc-ink-2: #4a4170;
	--dmc-muted: #79719a;
	--dmc-line: #e6e1f3;
	--dmc-line-2: #d6cfea;
	--dmc-cool: #3b39c9;
	--dmc-shadow: 0 1px 2px rgba(22, 16, 43, .05), 0 12px 32px -12px rgba(22, 16, 43, .16);
	--dmc-shadow-sm: 0 1px 2px rgba(22, 16, 43, .06);

	/* Set by the plugin, restated here so the CSS works standalone */
	--dmc-accent: #e11d5c;
	--dmc-accent-deep: #b8154a;
	--dmc-accent-soft: rgba(225, 29, 92, .1);

	/* Verdict tiers ------------------------------------------------------- */
	--dmc-t1: #15803d;
	--dmc-t2: #4d7c0f;
	--dmc-t3: #a16207;
	--dmc-t4: #c2410c;
	--dmc-t5: #be123c;
	--dmc-t6: #9f1239;
	--dmc-t7: #6b21a8;

	/* Type ---------------------------------------------------------------- */
	--dmc-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dmc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace;

	/* Rhythm -------------------------------------------------------------- */
	--dmc-r: 14px;
	--dmc-r-sm: 9px;
	--dmc-gap: 22px;

	box-sizing: border-box;
	color: var(--dmc-ink);
	font-family: var(--dmc-sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	container-type: inline-size;
}

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

.dmc[data-dmc-theme="dark"] {
	--dmc-bg: #15112b;
	--dmc-surface: #1d1839;
	--dmc-surface-2: #262048;
	--dmc-surface-3: #302858;
	--dmc-ink: #f2effc;
	--dmc-ink-2: #cbc3e6;
	--dmc-muted: #9b93bc;
	--dmc-line: #332c57;
	--dmc-line-2: #423a6b;
	--dmc-cool: #8b8cff;
	--dmc-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
	--dmc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
	--dmc-t1: #4ade80;
	--dmc-t2: #a3e635;
	--dmc-t3: #fbbf24;
	--dmc-t4: #fb923c;
	--dmc-t5: #fb7185;
	--dmc-t6: #f43f5e;
	--dmc-t7: #c084fc;
}

@media (prefers-color-scheme: dark) {
	.dmc[data-dmc-theme="auto"] {
		--dmc-bg: #15112b;
		--dmc-surface: #1d1839;
		--dmc-surface-2: #262048;
		--dmc-surface-3: #302858;
		--dmc-ink: #f2effc;
		--dmc-ink-2: #cbc3e6;
		--dmc-muted: #9b93bc;
		--dmc-line: #332c57;
		--dmc-line-2: #423a6b;
		--dmc-cool: #8b8cff;
		--dmc-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
		--dmc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
		--dmc-t1: #4ade80;
		--dmc-t2: #a3e635;
		--dmc-t3: #fbbf24;
		--dmc-t4: #fb923c;
		--dmc-t5: #fb7185;
		--dmc-t6: #f43f5e;
		--dmc-t7: #c084fc;
	}
}

/* Scoped resets — themes are aggressive, so restate what we rely on. */
.dmc p,
.dmc h1, .dmc h2, .dmc h3, .dmc h4,
.dmc ul, .dmc ol, .dmc li,
.dmc figure, .dmc dl, .dmc dd { margin: 0; padding: 0; }

.dmc ul, .dmc ol { list-style: none; }

.dmc button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.dmc select,
.dmc input { font: inherit; color: inherit; }

.dmc :focus-visible {
	outline: 2px solid var(--dmc-cool);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   Card shell
   ========================================================================== */

.dmc .dmc-card {
	background: var(--dmc-surface);
	border: 1px solid var(--dmc-line);
	border-radius: var(--dmc-r);
	box-shadow: var(--dmc-shadow);
	overflow: hidden;
}

.dmc .dmc-head {
	padding: 26px 26px 20px;
	border-bottom: 1px solid var(--dmc-line);
	background:
		radial-gradient(120% 140% at 100% 0%, var(--dmc-accent-soft) 0%, transparent 55%),
		var(--dmc-surface);
}

.dmc .dmc-eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-family: var(--dmc-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dmc-muted);
	margin-bottom: 12px;
}

.dmc .dmc-eyebrow__sep { opacity: .45; }

.dmc .dmc-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dmc-accent);
	flex: none;
	box-shadow: 0 0 0 3px var(--dmc-accent-soft);
	animation: dmc-pulse 2.6s ease-in-out infinite;
}

@keyframes dmc-pulse {
	0%, 100% { box-shadow: 0 0 0 3px var(--dmc-accent-soft); }
	50%      { box-shadow: 0 0 0 6px transparent; }
}

.dmc .dmc-title {
	font-size: clamp(23px, 4.6cqi, 35px);
	line-height: 1.16;
	font-weight: 800;
	letter-spacing: -.032em;
	color: var(--dmc-ink);
	text-wrap: balance;
	margin: 0;
}

/* The headline doubles as the top-level control. Selects sit inline, marked
   with a dashed underline so they read as "fill in the blank". */
.dmc .dmc-inline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	color: var(--dmc-accent);
}

/* The word people actually read. Plain text, so it inherits the heading's
   size, weight and baseline and the dashed rule lands on the text itself. */
.dmc .dmc-inline__text {
	display: inline-block;
	border-bottom: 2px dashed currentColor;
	padding-right: 17px;
	transition: background-color .15s ease;
}

/* The real control, laid over the word at zero opacity: native picker on
   mobile, native keyboard and screen-reader behaviour everywhere. */
.dmc .dmc-inline__sel {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.dmc .dmc-inline:hover .dmc-inline__text { background: var(--dmc-accent-soft); }

.dmc .dmc-inline::after {
	content: "";
	position: absolute;
	right: 2px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}

.dmc .dmc-inline:focus-within .dmc-inline__text {
	outline: 2px solid var(--dmc-cool);
	outline-offset: 3px;
	border-radius: 3px;
}

.dmc .dmc-inline--static .dmc-inline__text { padding-right: 0; border-bottom-style: solid; }
.dmc .dmc-inline--static::after { display: none; }

/* ==========================================================================
   Body layout
   ========================================================================== */

.dmc .dmc-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 0;
	align-items: start;
}

.dmc .dmc-controls {
	padding: 24px 26px 28px;
	display: flex;
	flex-direction: column;
	gap: var(--dmc-gap);
	min-width: 0;
}

/* ==========================================================================
   Range fields
   ========================================================================== */

.dmc .dmc-field { min-width: 0; }

.dmc .dmc-field__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 2px;
}

.dmc .dmc-field__label {
	font-family: var(--dmc-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dmc-muted);
}

.dmc .dmc-field__note {
	font-family: var(--dmc-mono);
	font-size: 11px;
	color: var(--dmc-muted);
	letter-spacing: .02em;
}

.dmc .dmc-field__value {
	font-family: var(--dmc-mono);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--dmc-ink);
	margin-bottom: 8px;
}

.dmc .dmc-field__hint {
	font-size: 12.5px;
	color: var(--dmc-muted);
	margin-top: 9px;
	min-height: 1.4em;
}

.dmc .dmc-field__hint b {
	color: var(--dmc-ink-2);
	font-weight: 600;
	font-family: var(--dmc-mono);
	font-variant-numeric: tabular-nums;
}

.dmc .dmc-unit {
	font-family: var(--dmc-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--dmc-cool);
	background: var(--dmc-surface-2);
	border: 1px solid var(--dmc-line);
	border-radius: 999px;
	padding: 2px 9px;
	transition: background-color .15s ease;
}

.dmc .dmc-unit:hover { background: var(--dmc-surface-3); }

/* Dual-handle slider ------------------------------------------------------ */

.dmc .dmc-slider {
	position: relative;
	height: 30px;
	touch-action: none;
}

.dmc .dmc-slider__rail {
	position: absolute;
	left: 9px;
	right: 9px;
	top: 50%;
	height: 6px;
	margin-top: -3px;
	border-radius: 999px;
	background: var(--dmc-line-2);
	overflow: hidden;
}

.dmc .dmc-slider__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--dmc-cool), var(--dmc-accent));
}

.dmc .dmc-slider__input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
	z-index: 2;
}

.dmc .dmc-slider__input--min { z-index: 3; }
.dmc .dmc-slider__input--max { z-index: 4; }
.dmc .dmc-slider.is-minTop .dmc-slider__input--min { z-index: 5; }

.dmc .dmc-slider__input::-webkit-slider-runnable-track {
	height: 30px;
	background: transparent;
	border: 0;
}

.dmc .dmc-slider__input::-moz-range-track {
	height: 30px;
	background: transparent;
	border: 0;
}

.dmc .dmc-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--dmc-surface);
	border: 2px solid var(--dmc-accent);
	box-shadow: var(--dmc-shadow-sm);
	cursor: grab;
	transition: transform .12s ease, box-shadow .12s ease;
}

.dmc .dmc-slider__input::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dmc-surface);
	border: 2px solid var(--dmc-accent);
	box-shadow: var(--dmc-shadow-sm);
	cursor: grab;
	transition: transform .12s ease, box-shadow .12s ease;
}

.dmc .dmc-slider__input:hover::-webkit-slider-thumb { transform: scale(1.12); }
.dmc .dmc-slider__input:hover::-moz-range-thumb { transform: scale(1.12); }
.dmc .dmc-slider__input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2); }
.dmc .dmc-slider__input:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.2); }

.dmc .dmc-slider__input:focus-visible {
	outline: none;
}

.dmc .dmc-slider__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px var(--dmc-accent-soft), var(--dmc-shadow-sm);
}

.dmc .dmc-slider__input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px var(--dmc-accent-soft), var(--dmc-shadow-sm);
}

@media (pointer: coarse) {
	.dmc .dmc-slider { height: 38px; }
	.dmc .dmc-slider__input { height: 38px; }
	.dmc .dmc-slider__input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: 7px; }
	.dmc .dmc-slider__input::-moz-range-thumb { width: 24px; height: 24px; }
	.dmc .dmc-slider__input::-webkit-slider-runnable-track { height: 38px; }
	.dmc .dmc-slider__input::-moz-range-track { height: 38px; }
}

/* ==========================================================================
   Extra standards
   ========================================================================== */

.dmc .dmc-more {
	border-top: 1px solid var(--dmc-line);
	padding-top: 6px;
	margin-top: 2px;
}

.dmc .dmc-more__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 0;
	font-family: var(--dmc-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dmc-cool);
}

.dmc .dmc-more__sign {
	position: relative;
	width: 16px;
	height: 16px;
	border: 1.5px solid currentColor;
	border-radius: 5px;
	flex: none;
}

.dmc .dmc-more__sign::before,
.dmc .dmc-more__sign::after {
	content: "";
	position: absolute;
	background: currentColor;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity .18s ease, transform .18s ease;
}

.dmc .dmc-more__sign::before { width: 8px; height: 1.5px; }
.dmc .dmc-more__sign::after { width: 1.5px; height: 8px; }

.dmc .dmc-more__toggle[aria-expanded="true"] .dmc-more__sign::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.dmc .dmc-more__label { flex: 1; }

.dmc .dmc-more__count {
	font-size: 11px;
	background: var(--dmc-accent);
	color: #fff;
	border-radius: 999px;
	padding: 1px 8px;
	letter-spacing: .04em;
}

.dmc .dmc-more__panel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 6px 0 4px;
}

.dmc .dmc-more__panel[hidden] { display: none; }

.dmc .dmc-seg__label {
	display: block;
	font-family: var(--dmc-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dmc-muted);
	margin-bottom: 8px;
}

.dmc .dmc-seg__opts {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var(--dmc-surface-2);
	border: 1px solid var(--dmc-line);
	border-radius: 10px;
	padding: 4px;
	max-width: 100%;
}

.dmc .dmc-seg__btn {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--dmc-ink-2);
	padding: 7px 13px;
	border-radius: 7px;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.dmc .dmc-seg__btn:hover { background: var(--dmc-surface-3); }

.dmc .dmc-seg__btn.is-on {
	background: var(--dmc-surface);
	color: var(--dmc-ink);
	font-weight: 600;
	box-shadow: var(--dmc-shadow-sm);
}

.dmc[data-dmc-theme="dark"] .dmc-seg__btn.is-on { background: var(--dmc-surface-3); }

/* Checkboxes -------------------------------------------------------------- */

.dmc .dmc-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dmc .dmc-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px 9px 11px;
	border: 1px solid var(--dmc-line);
	border-radius: 10px;
	background: var(--dmc-surface-2);
	cursor: pointer;
	font-size: 13.5px;
	transition: border-color .15s ease, background-color .15s ease;
}

.dmc .dmc-check:hover { border-color: var(--dmc-line-2); }

.dmc .dmc-check input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
}

.dmc .dmc-check__box {
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--dmc-line-2);
	border-radius: 5px;
	background: var(--dmc-surface);
	flex: none;
	position: relative;
	transition: background-color .15s ease, border-color .15s ease;
}

.dmc .dmc-check__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.4);
	opacity: 0;
	transition: opacity .12s ease, transform .12s ease;
}

.dmc .dmc-check input:checked ~ .dmc-check__box {
	background: var(--dmc-accent);
	border-color: var(--dmc-accent);
}

.dmc .dmc-check input:checked ~ .dmc-check__box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.dmc .dmc-check input:checked ~ .dmc-check__text { font-weight: 600; }

.dmc .dmc-check input:focus-visible ~ .dmc-check__box {
	outline: 2px solid var(--dmc-cool);
	outline-offset: 2px;
}

/* Ethnicity --------------------------------------------------------------- */

.dmc .dmc-eth[hidden] { display: none; }

.dmc .dmc-eth__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.dmc .dmc-chip {
	font-size: 13px;
	padding: 6px 13px;
	border: 1px solid var(--dmc-line-2);
	border-radius: 999px;
	background: var(--dmc-surface);
	color: var(--dmc-ink-2);
	transition: all .15s ease;
}

.dmc .dmc-chip:hover { border-color: var(--dmc-accent); }

.dmc .dmc-chip.is-on {
	background: var(--dmc-accent);
	border-color: var(--dmc-accent);
	color: #fff;
	font-weight: 600;
}

.dmc .dmc-reset {
	align-self: flex-start;
	font-family: var(--dmc-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dmc-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 4px 0;
}

.dmc .dmc-reset:hover { color: var(--dmc-accent); }

/* ==========================================================================
   Live meter — the signature element
   ========================================================================== */

.dmc .dmc-meter {
	border-left: 1px solid var(--dmc-line);
	background: var(--dmc-surface-2);
	align-self: stretch;
}

.dmc .dmc-meter__inner {
	position: sticky;
	top: 16px;
	padding: 24px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dmc .dmc-meter__cap {
	font-family: var(--dmc-mono);
	font-size: 10.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dmc-muted);
}

.dmc .dmc-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 4px;
	min-height: 96px;
}

.dmc .dmc-grid__cell {
	display: block;
	aspect-ratio: 1;
	border-radius: 3px;
	background: var(--dmc-line-2);
	opacity: .45;
	transition: background-color .35s ease, opacity .35s ease, transform .35s ease;
}

.dmc .dmc-grid__cell.is-hit {
	background: var(--dmc-accent);
	opacity: 1;
	transform: scale(1.06);
}

.dmc .dmc-grid.is-empty .dmc-grid__cell { opacity: .3; }

.dmc .dmc-readout { display: flex; flex-direction: column; gap: 2px; }

.dmc .dmc-readout__odds {
	font-family: var(--dmc-mono);
	font-size: clamp(30px, 9cqi, 40px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.045em;
	font-variant-numeric: tabular-nums;
	color: var(--dmc-ink);
}

.dmc .dmc-readout__pct,
.dmc .dmc-readout__count {
	font-family: var(--dmc-mono);
	font-size: 12px;
	color: var(--dmc-muted);
	font-variant-numeric: tabular-nums;
}

.dmc .dmc-readout__pct span { color: var(--dmc-accent); font-weight: 600; }

.dmc .dmc-verdict {
	border-top: 1px solid var(--dmc-line);
	padding-top: 14px;
}

.dmc .dmc-verdict__tier {
	display: inline-block;
	font-family: var(--dmc-mono);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 6px;
	color: #fff;
	background: var(--dmc-tier, var(--dmc-t1));
}

.dmc .dmc-verdict[data-tier="1"] { --dmc-tier: var(--dmc-t1); }
.dmc .dmc-verdict[data-tier="2"] { --dmc-tier: var(--dmc-t2); }
.dmc .dmc-verdict[data-tier="3"] { --dmc-tier: var(--dmc-t3); }
.dmc .dmc-verdict[data-tier="4"] { --dmc-tier: var(--dmc-t4); }
.dmc .dmc-verdict[data-tier="5"] { --dmc-tier: var(--dmc-t5); }
.dmc .dmc-verdict[data-tier="6"] { --dmc-tier: var(--dmc-t6); }
.dmc .dmc-verdict[data-tier="7"] { --dmc-tier: var(--dmc-t7); }

.dmc[data-dmc-theme="dark"] .dmc-verdict__tier { color: #15112b; }

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Note: the scoped `.dmc button` reset above is (0,1,1), so every variant here
   is written at (0,2,0) or higher. Dropping the `.dmc` prefix makes the
   background silently disappear. */

.dmc .dmc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.005em;
	padding: 13px 20px;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
	text-decoration: none;
	cursor: pointer;
}

.dmc .dmc-btn:active { transform: translateY(1px); }
.dmc .dmc-btn--wide { width: 100%; }

.dmc .dmc-btn--primary {
	background: var(--dmc-accent);
	color: #fff;
	box-shadow: 0 6px 18px -8px var(--dmc-accent);
}

.dmc .dmc-btn--primary:hover { background: var(--dmc-accent-deep); color: #fff; }

.dmc .dmc-btn--ghost {
	background: var(--dmc-surface);
	border-color: var(--dmc-line-2);
	color: var(--dmc-ink);
}

.dmc .dmc-btn--ghost:hover { background: var(--dmc-surface-2); }

/* ==========================================================================
   Result
   ========================================================================== */

.dmc .dmc-result[hidden] { display: none; }

.dmc .dmc-result {
	margin-top: 18px;
	animation: dmc-rise .42s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes dmc-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.dmc .dmc-panel {
	background: var(--dmc-surface);
	border: 1px solid var(--dmc-line);
	border-radius: var(--dmc-r);
	box-shadow: var(--dmc-shadow);
	overflow: hidden;
}

.dmc .dmc-verdictBlock {
	padding: 30px 28px;
	border-bottom: 1px solid var(--dmc-line);
	background:
		radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--dmc-tier) 14%, transparent) 0%, transparent 60%),
		var(--dmc-surface);
	--dmc-tier: var(--dmc-t1);
}

.dmc .dmc-verdictBlock[data-tier="1"] { --dmc-tier: var(--dmc-t1); }
.dmc .dmc-verdictBlock[data-tier="2"] { --dmc-tier: var(--dmc-t2); }
.dmc .dmc-verdictBlock[data-tier="3"] { --dmc-tier: var(--dmc-t3); }
.dmc .dmc-verdictBlock[data-tier="4"] { --dmc-tier: var(--dmc-t4); }
.dmc .dmc-verdictBlock[data-tier="5"] { --dmc-tier: var(--dmc-t5); }
.dmc .dmc-verdictBlock[data-tier="6"] { --dmc-tier: var(--dmc-t6); }
.dmc .dmc-verdictBlock[data-tier="7"] { --dmc-tier: var(--dmc-t7); }

.dmc .dmc-verdictBlock__badge {
	display: inline-block;
	font-family: var(--dmc-mono);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 6px;
	background: var(--dmc-tier);
	color: #fff;
	margin-bottom: 18px;
}

.dmc[data-dmc-theme="dark"] .dmc-verdictBlock__badge { color: #15112b; }

.dmc .dmc-bigOdds {
	font-family: var(--dmc-mono);
	font-size: clamp(46px, 13cqi, 84px);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.055em;
	font-variant-numeric: tabular-nums;
	color: var(--dmc-tier);
	margin-bottom: 12px;
}

.dmc .dmc-bigOdds small {
	display: block;
	font-size: clamp(13px, 2.4cqi, 16px);
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--dmc-muted);
	margin-bottom: 4px;
	text-transform: uppercase;
}

.dmc .dmc-lede {
	font-size: clamp(16px, 2.3cqi, 20px);
	line-height: 1.45;
	color: var(--dmc-ink);
	max-width: 42em;
	text-wrap: pretty;
	margin-bottom: 8px;
}

.dmc .dmc-lede b {
	font-weight: 700;
	font-family: var(--dmc-mono);
	font-variant-numeric: tabular-nums;
}

.dmc .dmc-sub {
	font-size: 14.5px;
	color: var(--dmc-muted);
	max-width: 42em;
	text-wrap: pretty;
}

.dmc .dmc-section {
	padding: 26px 28px;
	border-bottom: 1px solid var(--dmc-line);
}

.dmc .dmc-section:last-child { border-bottom: 0; }

.dmc .dmc-section__title {
	font-family: var(--dmc-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dmc-muted);
	margin-bottom: 16px;
}

/* Attribution bars -------------------------------------------------------- */

.dmc .dmc-bars { display: flex; flex-direction: column; gap: 13px; }

.dmc .dmc-bar__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 5px;
}

.dmc .dmc-bar__name { font-size: 14px; font-weight: 500; color: var(--dmc-ink); }
.dmc .dmc-bar__name em { font-style: normal; color: var(--dmc-muted); font-weight: 400; }

.dmc .dmc-bar__pct {
	font-family: var(--dmc-mono);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--dmc-ink-2);
	white-space: nowrap;
}

.dmc .dmc-bar__track {
	height: 8px;
	border-radius: 999px;
	background: var(--dmc-surface-3);
	overflow: hidden;
}

.dmc .dmc-bar__fill {
	display: block; /* it's a <span>; width/height are ignored while inline */
	height: 100%;
	border-radius: 999px;
	background: var(--dmc-cool);
	width: 0;
	transition: width .7s cubic-bezier(.2, .7, .3, 1);
}

.dmc .dmc-bar.is-worst .dmc-bar__fill { background: var(--dmc-accent); }
.dmc .dmc-bar.is-worst .dmc-bar__name { font-weight: 700; }

.dmc .dmc-callout {
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 10px;
	background: var(--dmc-accent-soft);
	border-left: 3px solid var(--dmc-accent);
	font-size: 14.5px;
	color: var(--dmc-ink);
	text-wrap: pretty;
}

.dmc .dmc-callout b { font-weight: 700; }

/* Loosen chips ------------------------------------------------------------ */

.dmc .dmc-loosen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
}

.dmc .dmc-loosenBtn {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	border: 1px solid var(--dmc-line-2);
	border-radius: 11px;
	background: var(--dmc-surface-2);
	transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
	text-align: left;
}

.dmc .dmc-loosenBtn:hover {
	border-color: var(--dmc-accent);
	background: var(--dmc-surface);
	transform: translateY(-1px);
}

.dmc .dmc-loosenBtn__what { font-size: 14px; font-weight: 600; color: var(--dmc-ink); }

.dmc .dmc-loosenBtn__gain {
	font-family: var(--dmc-mono);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--dmc-accent);
	font-weight: 600;
}

.dmc .dmc-loosenBtn__odds {
	font-family: var(--dmc-mono);
	font-size: 11.5px;
	color: var(--dmc-muted);
	font-variant-numeric: tabular-nums;
}

/* Stat strip -------------------------------------------------------------- */

.dmc .dmc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--dmc-line);
	border: 1px solid var(--dmc-line);
	border-radius: 11px;
	overflow: hidden;
}

.dmc .dmc-stat { background: var(--dmc-surface); padding: 15px 16px; }

.dmc .dmc-stat__k {
	font-family: var(--dmc-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dmc-muted);
	margin-bottom: 4px;
}

.dmc .dmc-stat__v {
	font-family: var(--dmc-mono);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--dmc-ink);
}

/* Actions ----------------------------------------------------------------- */

.dmc .dmc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 22px 28px;
	background: var(--dmc-surface-2);
}

/* Methodology ------------------------------------------------------------- */

.dmc .dmc-method {
	border-top: 1px solid var(--dmc-line);
	padding: 0 28px;
}

.dmc .dmc-method summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 0;
	font-family: var(--dmc-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dmc-muted);
	display: flex;
	align-items: center;
	gap: 8px;
}

.dmc .dmc-method summary::-webkit-details-marker { display: none; }

.dmc .dmc-method summary::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .2s ease;
	flex: none;
}

.dmc .dmc-method[open] summary::before { transform: rotate(45deg); }

.dmc .dmc-method__body {
	padding-bottom: 20px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--dmc-muted);
	max-width: 60em;
}

.dmc .dmc-method__body p { margin-bottom: 10px; }
.dmc .dmc-method__body p:last-child { margin-bottom: 0; }
.dmc .dmc-method__body strong { color: var(--dmc-ink-2); }

/* Empty state ------------------------------------------------------------- */

.dmc .dmc-result__empty {
	background: var(--dmc-surface);
	border: 1px dashed var(--dmc-line-2);
	border-radius: var(--dmc-r);
	padding: 44px 28px;
	text-align: center;
}

.dmc .dmc-result__empty .dmc-eyebrow { justify-content: center; }

.dmc .dmc-result__emptyTitle {
	font-size: clamp(20px, 3.4cqi, 27px);
	font-weight: 800;
	letter-spacing: -.028em;
	line-height: 1.2;
	margin-bottom: 8px;
	text-wrap: balance;
}

.dmc .dmc-result__emptyBody {
	color: var(--dmc-muted);
	margin-bottom: 20px;
}

.dmc .dmc-toast {
	font-family: var(--dmc-mono);
	font-size: 12px;
	color: var(--dmc-t1);
	align-self: center;
	letter-spacing: .04em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@container (max-width: 760px) {
	.dmc .dmc-body { grid-template-columns: minmax(0, 1fr); }

	.dmc .dmc-meter {
		border-left: 0;
		border-top: 1px solid var(--dmc-line);
		order: -1;
	}

	.dmc .dmc-meter__inner {
		position: static;
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		grid-template-areas:
			"cap  cap"
			"grid read"
			"btn  btn";
		gap: 8px 18px;
		align-items: center;
		padding: 18px 20px 20px;
	}

	.dmc .dmc-meter__cap { grid-area: cap; }
	.dmc .dmc-grid { grid-area: grid; gap: 3px; min-height: 0; }
	.dmc .dmc-readout { grid-area: read; }
	.dmc .dmc-verdict { display: none; }

	.dmc .dmc-meter [data-dmc-submit] { grid-area: btn; margin-top: 6px; }

	/* Compact rhythm: the desktop spacing costs ~130px of scroll on a phone
	   for no benefit, and left dead air under the last control. */
	.dmc .dmc-head { padding: 16px 16px 13px; }
	.dmc .dmc-eyebrow { margin-bottom: 9px; }
	.dmc .dmc-title { font-size: clamp(21px, 6.2cqi, 27px); line-height: 1.14; }

	.dmc .dmc-meter__inner { padding: 14px 16px 16px; gap: 6px 14px; }
	.dmc .dmc-meter__inner { grid-template-columns: 84px minmax(0, 1fr); }
	.dmc .dmc-grid { gap: 2px; }
	.dmc .dmc-readout__odds { font-size: clamp(26px, 8cqi, 34px); }
	.dmc .dmc-meter [data-dmc-submit] { margin-top: 4px; padding: 12px 18px; }

	.dmc .dmc-controls { padding: 16px 16px 10px; gap: 15px; }
	.dmc .dmc-field__value { font-size: 17px; margin-bottom: 6px; }
	.dmc .dmc-field__hint { font-size: 12px; line-height: 1.45; margin-top: 7px; }
	.dmc .dmc-more { padding-top: 2px; margin-top: 0; }
	.dmc .dmc-more__toggle { padding: 11px 0 9px; }
	.dmc .dmc-more__panel { gap: 15px; }

	/* Field label and value share one row on narrow screens. Stacking them
	   costs ~25px per field for no gain when the value can just sit right. */
	.dmc .dmc-field {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "top value" "slider slider" "hint hint";
		align-items: baseline;
		column-gap: 10px;
		row-gap: 6px;
	}
	.dmc .dmc-field__top { grid-area: top; margin-bottom: 0; }
	.dmc .dmc-field__value { grid-area: value; text-align: right; margin-bottom: 0; }
	.dmc .dmc-slider { grid-area: slider; }
	.dmc .dmc-field__hint { grid-area: hint; margin-top: 0; }

	.dmc .dmc-grid { grid-template-columns: repeat(10, 1fr); }
	.dmc .dmc-meter__inner { grid-template-columns: 68px minmax(0, 1fr); }

	/* Result panel ---------------------------------------------------- */
	.dmc .dmc-verdictBlock { padding: 20px 16px; }
	.dmc .dmc-section { padding: 18px 16px; }
	.dmc .dmc-lede { font-size: 16px; line-height: 1.42; }
	.dmc .dmc-sub { font-size: 13.5px; }
	.dmc .dmc-bigOdds { margin-bottom: 9px; }
	.dmc .dmc-verdictBlock__badge { margin-bottom: 13px; }
	.dmc .dmc-section__title { margin-bottom: 12px; }
	.dmc .dmc-callout { margin-top: 14px; padding: 11px 14px; font-size: 13.5px; }

	/* Each suggestion becomes one compact row instead of a stacked card. */
	.dmc .dmc-loosen { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.dmc .dmc-loosenBtn {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "what gain" "what odds";
		align-items: center;
		column-gap: 12px;
		row-gap: 0;
		padding: 10px 14px;
	}
	.dmc .dmc-loosenBtn__what { grid-area: what; }
	.dmc .dmc-loosenBtn__gain { grid-area: gain; text-align: right; }
	.dmc .dmc-loosenBtn__odds { grid-area: odds; text-align: right; }

	.dmc .dmc-stat { padding: 11px 13px; }
	.dmc .dmc-stat__v { font-size: 16px; }

	/* Full-width primary for the thumb, secondaries paired on one row. */
	.dmc .dmc-actions { padding: 14px 16px; gap: 8px; }
	.dmc .dmc-actions .dmc-btn { flex: 1 1 calc(50% - 4px); padding: 12px 14px; font-size: 14.5px; }
	.dmc .dmc-actions .dmc-btn--primary { flex: 1 1 100%; }
	.dmc .dmc-method { padding: 0 16px; }
}

@media (max-width: 782px) {
	.dmc .dmc-body { grid-template-columns: minmax(0, 1fr); }

	.dmc .dmc-meter {
		border-left: 0;
		border-top: 1px solid var(--dmc-line);
		order: -1;
	}

	.dmc .dmc-meter__inner {
		position: static;
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		grid-template-areas:
			"cap  cap"
			"grid read"
			"btn  btn";
		gap: 8px 18px;
		align-items: center;
		padding: 18px 20px 20px;
	}

	.dmc .dmc-meter__cap { grid-area: cap; }
	.dmc .dmc-grid { grid-area: grid; gap: 3px; min-height: 0; }
	.dmc .dmc-readout { grid-area: read; }
	.dmc .dmc-verdict { display: none; }
	.dmc .dmc-meter [data-dmc-submit] { grid-area: btn; margin-top: 6px; }

	.dmc .dmc-head { padding: 20px 18px 16px; }
	.dmc .dmc-controls { padding: 20px 18px 24px; }
	.dmc .dmc-section,
	.dmc .dmc-verdictBlock { padding: 22px 18px; }
	.dmc .dmc-actions { padding: 18px; }
	.dmc .dmc-method { padding: 0 18px; }
	.dmc .dmc-actions .dmc-btn { flex: 1 1 auto; }

	/* Compact rhythm: the desktop spacing costs ~130px of scroll on a phone
	   for no benefit, and left dead air under the last control. */
	.dmc .dmc-head { padding: 16px 16px 13px; }
	.dmc .dmc-eyebrow { margin-bottom: 9px; }
	.dmc .dmc-title { font-size: clamp(21px, 6.2cqi, 27px); line-height: 1.14; }

	.dmc .dmc-meter__inner { padding: 14px 16px 16px; gap: 6px 14px; }
	.dmc .dmc-meter__inner { grid-template-columns: 84px minmax(0, 1fr); }
	.dmc .dmc-grid { gap: 2px; }
	.dmc .dmc-readout__odds { font-size: clamp(26px, 8cqi, 34px); }
	.dmc .dmc-meter [data-dmc-submit] { margin-top: 4px; padding: 12px 18px; }

	.dmc .dmc-controls { padding: 16px 16px 10px; gap: 15px; }
	.dmc .dmc-field__value { font-size: 17px; margin-bottom: 6px; }
	.dmc .dmc-field__hint { font-size: 12px; line-height: 1.45; margin-top: 7px; }
	.dmc .dmc-more { padding-top: 2px; margin-top: 0; }
	.dmc .dmc-more__toggle { padding: 11px 0 9px; }
	.dmc .dmc-more__panel { gap: 15px; }

	/* Field label and value share one row on narrow screens. Stacking them
	   costs ~25px per field for no gain when the value can just sit right. */
	.dmc .dmc-field {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "top value" "slider slider" "hint hint";
		align-items: baseline;
		column-gap: 10px;
		row-gap: 6px;
	}
	.dmc .dmc-field__top { grid-area: top; margin-bottom: 0; }
	.dmc .dmc-field__value { grid-area: value; text-align: right; margin-bottom: 0; }
	.dmc .dmc-slider { grid-area: slider; }
	.dmc .dmc-field__hint { grid-area: hint; margin-top: 0; }

	.dmc .dmc-grid { grid-template-columns: repeat(10, 1fr); }
	.dmc .dmc-meter__inner { grid-template-columns: 68px minmax(0, 1fr); }

	/* Result panel ---------------------------------------------------- */
	.dmc .dmc-verdictBlock { padding: 20px 16px; }
	.dmc .dmc-section { padding: 18px 16px; }
	.dmc .dmc-lede { font-size: 16px; line-height: 1.42; }
	.dmc .dmc-sub { font-size: 13.5px; }
	.dmc .dmc-bigOdds { margin-bottom: 9px; }
	.dmc .dmc-verdictBlock__badge { margin-bottom: 13px; }
	.dmc .dmc-section__title { margin-bottom: 12px; }
	.dmc .dmc-callout { margin-top: 14px; padding: 11px 14px; font-size: 13.5px; }

	/* Each suggestion becomes one compact row instead of a stacked card. */
	.dmc .dmc-loosen { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.dmc .dmc-loosenBtn {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "what gain" "what odds";
		align-items: center;
		column-gap: 12px;
		row-gap: 0;
		padding: 10px 14px;
	}
	.dmc .dmc-loosenBtn__what { grid-area: what; }
	.dmc .dmc-loosenBtn__gain { grid-area: gain; text-align: right; }
	.dmc .dmc-loosenBtn__odds { grid-area: odds; text-align: right; }

	.dmc .dmc-stat { padding: 11px 13px; }
	.dmc .dmc-stat__v { font-size: 16px; }

	/* Full-width primary for the thumb, secondaries paired on one row. */
	.dmc .dmc-actions { padding: 14px 16px; gap: 8px; }
	.dmc .dmc-actions .dmc-btn { flex: 1 1 calc(50% - 4px); padding: 12px 14px; font-size: 14.5px; }
	.dmc .dmc-actions .dmc-btn--primary { flex: 1 1 100%; }
	.dmc .dmc-method { padding: 0 16px; }
}

@media (max-width: 420px) {
	/* One notch smaller keeps every hint on a single line down to 360px. */
	.dmc .dmc-field__hint { font-size: 11.5px; }
	.dmc .dmc-checks { flex-direction: column; align-items: stretch; }
	.dmc .dmc-seg__opts { width: 100%; }
.dmc .dmc-seg__btn { flex: 1 1 auto; text-align: center; }
}

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

@media print {
	.dmc .dmc-controls,
	.dmc .dmc-actions,
	.dmc .dmc-loosen { display: none; }
}

/* ==========================================================================
   Q&A block
   Answers here are computed from the same dataset the calculator runs on, so
   the visible text and the FAQPage markup always agree. Kept typographically
   quiet — the numbers are the point, not the container.
   ========================================================================== */

.dmc .dmc-qa { padding: 4px 0 0; }

.dmc .dmc-qa__head {
	padding: 24px 28px 18px;
	border-bottom: 1px solid var(--dmc-line);
}

.dmc .dmc-qa__title {
	font-size: clamp(21px, 3.4cqi, 30px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.18;
	color: var(--dmc-ink);
	text-wrap: balance;
}

.dmc .dmc-qa__list { padding: 0 28px; }

.dmc .dmc-qa__item { border-bottom: 1px solid var(--dmc-line); }
.dmc .dmc-qa__item:last-child { border-bottom: 0; }

.dmc .dmc-qa__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 17px 0;
}

.dmc .dmc-qa__q::-webkit-details-marker { display: none; }

.dmc .dmc-qa__q::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-top: 7px;
	margin-left: auto;
	border-right: 2px solid var(--dmc-muted);
	border-bottom: 2px solid var(--dmc-muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.dmc .dmc-qa__item[open] .dmc-qa__q::after { transform: rotate(-135deg); margin-top: 11px; }

.dmc .dmc-qa__qText {
	font-size: clamp(15px, 2.1cqi, 17px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.012em;
	color: var(--dmc-ink);
	text-wrap: pretty;
}

.dmc .dmc-qa__a {
	padding: 0 30px 20px 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--dmc-ink-2);
	max-width: 62ch;
	text-wrap: pretty;
}

.dmc .dmc-qa__src {
	padding: 16px 28px 22px;
	border-top: 1px solid var(--dmc-line);
	font-family: var(--dmc-mono);
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--dmc-muted);
}

@media (max-width: 782px) {
	.dmc .dmc-qa__head { padding: 20px 18px 16px; }
	.dmc .dmc-qa__list { padding: 0 18px; }
	.dmc .dmc-qa__src { padding: 14px 18px 18px; }
	.dmc .dmc-qa__a { padding-right: 0; }
}

/* Slim header (heading="none") — for pages that already have their own H1
   above the calculator, where a second headline is wasted screen. */
.dmc .dmc-head--slim { padding: 13px 26px; }

.dmc .dmc-slim {
	font-size: 15px;
	font-weight: 500;
	color: var(--dmc-muted);
	letter-spacing: -.005em;
}

.dmc .dmc-head--slim .dmc-inline { color: var(--dmc-accent); font-weight: 700; }

@media (max-width: 782px) {
	.dmc .dmc-head--slim { padding: 11px 16px; }
	.dmc .dmc-slim { font-size: 14.5px; }
}