/* RazMania Votes — reader sentiment control
 *
 * Reads as a market indicator in a financial paper, not a poll widget. Two
 * rules drive every decision below:
 *
 *   1. The headline is the hero. This component sits under it and never
 *      competes — hairline rules, 9–10px labels, colour carried by text.
 *   2. Both states occupy the SAME footprint. A card must not jump when a
 *      reader votes, and a grid of eight must not look ragged because three
 *      of them are showing results.
 *
 * Two defensive notes, both learned the hard way on this site:
 *
 *   - razmania-cards ships `.rzm-hub p { margin:0 !important }` as a scoped
 *     reset, and the story lists we inject into live inside `.rzm-hub`. Among
 *     !important declarations specificity decides, so any margin we set on a
 *     <p> has to carry !important too or it is silently swallowed.
 *   - Themeco Pro styles bare <button> heavily. Every button property we care
 *     about is restated rather than inherited.
 */

.rzmv {
	--rzmv-buy:    #15803d;
	--rzmv-pass:   #b3261e;
	--rzmv-ink:    #1a1a1a;
	--rzmv-muted:  #8a8a8a;
	--rzmv-rule:   rgba(0, 0, 0, .18);
	--rzmv-track:  rgba(0, 0, 0, .09);
	--rzmv-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--rzmv-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Set per variant; both states are locked to it. */
	--rzmv-h:      28px;

	box-sizing: border-box;
	font-family: var(--rzmv-sans);
	/* Hidden until hydrated: an un-hydrated widget would show a stale or empty
	   tally out of the 31-day Cloudflare cache, which is worse than nothing. */
	opacity: 0;
	transition: opacity .18s ease;
}

.rzmv.is-ready { opacity: 1; }
.rzmv *, .rzmv *::before, .rzmv *::after { box-sizing: border-box; }

/* The [hidden] attribute is only `display:none` in the USER-AGENT stylesheet,
   and any author rule beats the UA sheet regardless of specificity. So the
   `display:flex` rules below silently defeat hidden="" and both states render
   on top of each other. This restores it. */
.rzmv [hidden] { display: none !important; }

/* Both states share one row height, so voting never reflows the card. */
.rzmv__actions,
.rzmv__result {
	display: flex;
	align-items: center;
	min-height: var(--rzmv-h);
}

/* ------------------------------------------------------- pre-vote: prompt */

.rzmv__prompt {
	flex: 0 0 auto;
	margin-right: 10px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--rzmv-muted);
	white-space: nowrap;
}

/* ---------------------------------------- pre-vote: the segmented control */

/* One control, not two buttons. The shared outer rule and the single hairline
   divider are what make it read as an instrument rather than a form. */
.rzmv__seg {
	display: inline-flex;
	flex: 0 0 auto;
	border: 1px solid var(--rzmv-rule);
	border-radius: 2px;
	overflow: hidden;
	background: transparent;
}

.rzmv__btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--rzmv-h) - 2px);
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--rzmv-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .14s ease, color .14s ease;
}

.rzmv__btn + .rzmv__btn { border-left: 1px solid var(--rzmv-rule); }

.rzmv__btn--buy  { color: var(--rzmv-buy); }
.rzmv__btn--pass { color: var(--rzmv-pass); }

/* A wash of the accent, not a fill. No shadow, no gradient — those are the
   SaaS tells the brief rules out. */
.rzmv__btn--buy:hover,  .rzmv__btn--buy:focus-visible  { background: rgba(21, 128, 61, .08); outline: none; }
.rzmv__btn--pass:hover, .rzmv__btn--pass:focus-visible { background: rgba(179, 38, 30, .08);  outline: none; }

.rzmv__btn:focus-visible { box-shadow: inset 0 0 0 1px currentColor; }

.rzmv.is-busy .rzmv__seg { opacity: .45; pointer-events: none; }

/* ----------------------------------------------- post-vote: the indicator */

.rzmv__readout {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.rzmv__side {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	flex: 0 0 auto;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.rzmv__side-label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rzmv-muted);
	transition: color .2s ease;
}

.rzmv__side b {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
}

.rzmv__side--buy  b { color: var(--rzmv-buy); }
.rzmv__side--pass b { color: var(--rzmv-pass); }

/* The reader's own call carries a little more weight — enough to find at a
   glance, not enough to read as a winner. */
.rzmv[data-rzmv-mine="1"] .rzmv__side--buy  b,
.rzmv[data-rzmv-mine="0"] .rzmv__side--pass b { font-weight: 800; }

.rzmv[data-rzmv-mine="1"] .rzmv__side--buy  .rzmv__side-label { color: var(--rzmv-buy); }
.rzmv[data-rzmv-mine="0"] .rzmv__side--pass .rzmv__side-label { color: var(--rzmv-pass); }

.rzmv__bar {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 40px;
	height: 5px;
	border-radius: 1px;
	overflow: hidden;
	background: var(--rzmv-track);
}

/* Always transitioned, never gated behind a class. An element revealed from
   display:none has no rendered "from" value, so a transition that is switched
   on in the same task as the width change does not fire — the reveal is
   sequenced with a double rAF in votes.js instead, and this stays declarative. */
.rzmv__bar-buy,
.rzmv__bar-pass {
	width: 50%;
	transition: width .26s cubic-bezier(.32, .72, .28, 1);
}

.rzmv__bar-buy  { background: var(--rzmv-buy); }
.rzmv__bar-pass { background: var(--rzmv-pass); }

/* The reader's side is the solid one; the other is very slightly recessed. */
.rzmv[data-rzmv-mine="1"] .rzmv__bar-pass,
.rzmv[data-rzmv-mine="0"] .rzmv__bar-buy { opacity: .55; }

.rzmv__change {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	margin: 0;
	padding: 2px 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--rzmv-muted);
	font-family: var(--rzmv-sans);
	font-size: 9px;
	letter-spacing: .04em;
	line-height: 1;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: color .14s ease;
}

.rzmv__change:hover { color: var(--rzmv-ink); }

.rzmv__err {
	margin: 6px 0 0 !important;
	font-size: 10px;
	color: var(--rzmv-pass);
}

/* ------------------------------------------------- variant: in story lists */

.rzmv--mini {
	--rzmv-h: 28px;
	margin: 9px 0 0 !important;
	max-width: 340px;
}

/* -------------------------------------------- variant: on the article page */

.rzmv--full {
	--rzmv-h: 38px;
	margin: 32px 0 !important;
	padding: 22px 24px;
	border-top: 1px solid var(--rzmv-rule);
	border-bottom: 1px solid var(--rzmv-rule);
}

.rzmv--full .rzmv__head { margin-bottom: 16px; }

.rzmv__eyebrow {
	display: block;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--rzmv-muted);
	margin: 0 0 8px !important;
}

.rzmv__q {
	font-family: var(--rzmv-serif);
	font-size: 21px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--rzmv-ink);
	margin: 0 0 5px !important;
}

.rzmv__subject {
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--rzmv-muted);
	margin: 0 !important;
}

.rzmv--full .rzmv__prompt  { font-size: 10px; margin-right: 14px; }
.rzmv--full .rzmv__btn     { font-size: 11px; padding: 0 22px; }
.rzmv--full .rzmv__readout { gap: 14px; max-width: 520px; }
.rzmv--full .rzmv__bar     { height: 6px; }
.rzmv--full .rzmv__side b  { font-size: 13px; }
.rzmv--full .rzmv__side-label,
.rzmv--full .rzmv__change  { font-size: 10px; }

/* ----------------------------------------------------------------- mobile */

@media (max-width: 560px) {
	/* Keep one line for the numbers. If anything has to drop, it is Change —
	   wrapping the percentages away from their bar breaks the reading. */
	.rzmv__readout { flex-wrap: wrap; row-gap: 6px; }

	.rzmv__change {
		order: 10;
		flex-basis: 100%;
		text-align: left;
		padding: 4px 0;   /* keeps the tap target usable once it is on its own line */
	}

	.rzmv__side  { flex: 0 0 auto; }
	.rzmv__bar   { min-width: 32px; }

	/* Comfortable thumb target without growing the row on desktop. */
	.rzmv--mini { --rzmv-h: 30px; }
	.rzmv--mini .rzmv__btn { padding: 0 16px; }

	/* Change drops onto its own line here, so the voted row is taller than the
	   unvoted one. Reserve the taller of the two for BOTH states or every card
	   still shifts by 8px the moment someone votes — the exact thing the fixed
	   footprint exists to prevent, just moved to mobile. */
	.rzmv__actions,
	.rzmv__result { min-height: 38px; }

	.rzmv--full { padding: 18px 0; }
	.rzmv--full .rzmv__q { font-size: 19px; }
}

/* --------------------------------------------------------- dark surfaces
   NOT keyed to `.rzm-hub`. The design notes describe the hub on #121212, but
   the site was since rebuilt light (cream) and the hub class stayed — so that
   selector inverted the tokens on a light page and ghosted the control to
   near-invisible. Dark styling is explicit opt-in only. */

.rzmv-dark .rzmv {
	--rzmv-ink:   #F4F1EA;
	--rzmv-muted: #A8A8A8;
	--rzmv-rule:  rgba(255, 255, 255, .22);
	--rzmv-track: rgba(255, 255, 255, .12);
	--rzmv-buy:   #4ade80;
	--rzmv-pass:  #f87171;
}

/* Motion here is decorative. Anyone who has asked the OS to stop it gets the
   same numbers, instantly. */
@media (prefers-reduced-motion: reduce) {
	.rzmv__bar-buy,
	.rzmv__bar-pass { transition: none; }
	.rzmv { transition: none; }
}