/* stg/post-vote — up/down vote widget.
 *
 * Palette: up = signal-green (positive), down = muted fg-3 (neutral).
 * No coral / purple — those carry brand meaning elsewhere and reading them as
 * "good / bad" on a vote widget was visually confusing.
 *
 * Back-compat classes (.gs-thumbsplus, .gs-thumbsminus, .gs-thumbscount,
 * .scaleperc, .alreadyhot) are preserved for any existing selectors.
 */
.stg-vote {
	--stg-vote-svg: 18px;
	--stg-vote-count-size: 0.875rem;
	--stg-vote-gap: 2px;
	--stg-vote-up: var(--brand-green, #05e27c);
	--stg-vote-down: var(--fg-3, #707085);
	--stg-vote-btn-size: 34px;
	--stg-vote-radius: 8px;
	--stg-vote-surface: rgba(255, 255, 255, 0.04);
	--stg-vote-surface-hover: rgba(255, 255, 255, 0.08);
	display: inline-flex;
	align-items: center;
	gap: var(--stg-vote-gap);
	padding: 2px;
	background: var(--stg-vote-surface);
	border: 1px solid var(--border-subtle, #2d2d4a);
	border-radius: calc(var(--stg-vote-radius) + 2px);
	line-height: 1;
	font-family: var(--ff-display, 'Hubot Sans', system-ui, sans-serif);
}

.stg-vote--small {
	--stg-vote-svg: 15px;
	--stg-vote-count-size: 0.75rem;
	--stg-vote-btn-size: 28px;
}

.stg-vote--large {
	--stg-vote-svg: 20px;
	--stg-vote-count-size: 1rem;
	--stg-vote-btn-size: 40px;
}

/* Buttons */
.stg-vote__btn {
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	width: var(--stg-vote-btn-size);
	height: var(--stg-vote-btn-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: var(--stg-vote-svg);
	border-radius: var(--stg-vote-radius);
	transition:
		color 150ms var(--ease-std, ease-out),
		background-color 150ms var(--ease-std, ease-out);
	color: var(--fg-2, #b0b0c0);
}
.stg-vote__btn svg {
	width: var(--stg-vote-svg);
	height: var(--stg-vote-svg);
	display: block;
}
.stg-vote__btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 3px rgba(97, 76, 212, 0.5));
}
.stg-vote__btn:hover:not([aria-disabled="true"]) {
	background: var(--stg-vote-surface-hover);
}
.stg-vote__up:hover:not([aria-disabled="true"]) {
	color: var(--stg-vote-up);
}
.stg-vote__down:hover:not([aria-disabled="true"]) {
	color: var(--stg-vote-down);
	filter: brightness(1.2);
}
.stg-vote__btn[aria-disabled="true"] {
	cursor: not-allowed;
}
.stg-vote__btn.is-voted {
	background: color-mix(in srgb, currentColor 12%, transparent);
}
.stg-vote__up.is-voted {
	color: var(--stg-vote-up);
}
.stg-vote__down.is-voted {
	color: var(--coral-300, #ff8398);
}

/* Order: down, count, up — natural left-to-right reading "was it bad | score | was it good". */
.stg-vote__down { order: 1; }
.stg-vote__count { order: 2; }
.stg-vote__up { order: 3; }
.stg-vote__scale { order: 4; }

/* Count */
.stg-vote__count {
	min-width: 2.2ch;
	padding: 0 6px;
	font-size: var(--stg-vote-count-size);
	font-weight: 600;
	font-variation-settings: 'slnt' 0, 'wdth' 100;
	color: var(--fg-1, #f0f0f5);
	font-variant-numeric: tabular-nums;
	text-align: center;
	user-select: none;
}

/* Hidden while the net is zero or below. The pill reserves the figure's width
   (min-width below) so it, and the toolbar row around it, do not change width
   when a vote reveals it; the two thumbs sit centred in that width meanwhile,
   so there is no empty slot between them. */
.stg-vote__count[hidden] {
	display: none;
}
.stg-vote:not(.stg-vote--cta) {
	justify-content: center;
	min-width: calc(var(--stg-vote-btn-size) * 2 + var(--stg-vote-count-size) * 1.25 + 12px + var(--stg-vote-gap) * 2 + 6px);
}

/* Optional scale bar — off by default. Rendered as a subtle glow line to the right. */
.stg-vote__scale {
	display: inline-block;
	width: 32px;
	height: 3px;
	margin-left: 6px;
	border-radius: 999px;
	background-image: linear-gradient(
		90deg,
		var(--coral-300, #ff8398) 0%,
		var(--fg-3, #707085) 50%,
		var(--brand-green, #05e27c) 100%
	);
	opacity: 0.6;
	flex: 0 0 auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.stg-vote__btn { transition: none; }
}

/* Prompted layout — a value question stacked above the pill (the end-of-read
   instance via prompt="auto"). The .stg-vote pill stays a self-contained
   inline-flex; the field just stacks the prompt above it. Block-owned CSS
   (served as the block style — no theme min rebuild). */
.stg-vote-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
	align-items: flex-start;
}
.stg-vote__prompt {
	margin: 0;
	max-width: 46ch;
	font-family: var(--ff-display, 'Hubot Sans', system-ui, sans-serif);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--fg-1, #f0f0f5);
}

/* Inline label (prompt="short"): one word beside the toolbar pill, so the thumbs
   read as a question and not as a score display. Visually hidden on narrow
   phones and from 901 to 1179px, where the toolbar row has no room for it
   (measured: it pushed the share icons 51px into the disclaimer at 1024). */
.stg-vote-field--inline {
	flex-direction: row;
	align-items: center;
	gap: var(--space-2, 8px);
}
.stg-vote-field--inline .stg-vote__prompt {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--fg-2, #b0b0c0);
}
@media (max-width: 480px), (min-width: 901px) and (max-width: 1179px) {
	.stg-vote-field--inline .stg-vote__prompt {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ── Call-to-action layout (layout="cta") ───────────────────────────────────
   A question, two labelled buttons of EQUAL weight (Yes / No), then the score
   and the reason to vote. Self-contained card, so it can be dropped anywhere;
   .stg-outro-vote (global.css) supplies its own panel and strips this chrome. */
.stg-vote-field--cta {
	align-items: center;
	gap: var(--space-4, 16px);
	padding: var(--space-6, 24px) var(--space-5, 20px);
	background: var(--bg-elevated, #252540);
	border: 1px solid var(--border-subtle, #2d2d4a);
	border-radius: var(--radius-xl, 12px);
	text-align: center;
}
.stg-vote__eyebrow {
	margin: 0;
	font-family: var(--ff-display, 'Hubot Sans', system-ui, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-green, #05e27c);
}
.stg-vote-field--cta .stg-vote__prompt {
	max-width: 24ch;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.stg-vote--cta {
	--stg-vote-svg: 22px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3, 12px);
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.stg-vote--cta .stg-vote__btn {
	flex: 1 1 0;
	width: auto;
	min-width: 112px;
	max-width: 200px;
	height: auto;
	min-height: 52px;
	gap: 10px;
	padding: 0 var(--space-5, 20px);
	border: 1.5px solid var(--border-strong, #3a3a5c);
	border-radius: var(--radius-pill, 999px);
	background: var(--stg-vote-surface);
	color: var(--fg-1, #f0f0f5);
	transition:
		color 150ms var(--ease-std, ease-out),
		background-color 150ms var(--ease-std, ease-out),
		border-color 150ms var(--ease-std, ease-out),
		opacity 150ms var(--ease-std, ease-out);
}
.stg-vote__btn-label {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
}
.stg-vote--cta .stg-vote__up { order: 1; }
.stg-vote--cta .stg-vote__down { order: 2; }
.stg-vote--cta .stg-vote__up:hover:not([aria-disabled="true"]) {
	border-color: var(--stg-vote-up);
	background: color-mix(in srgb, var(--stg-vote-up) 12%, transparent);
}
.stg-vote--cta .stg-vote__down:hover:not([aria-disabled="true"]) {
	border-color: var(--fg-2, #b0b0c0);
	color: var(--fg-1, #f0f0f5);
	filter: none;
}
.stg-vote--cta .stg-vote__up.is-voted {
	border-color: var(--stg-vote-up);
	background: var(--stg-vote-up);
	color: #0a0a12;
}
.stg-vote--cta .stg-vote__down.is-voted {
	border-color: var(--coral-300, #ff8398);
	background: color-mix(in srgb, var(--coral-300, #ff8398) 14%, transparent);
}
.stg-vote--cta.has-voted .stg-vote__btn:not(.is-voted) {
	opacity: 0.45;
}
/* One line under the buttons: the score (when positive), then the reason to
   vote, which the confirmation REPLACES in place after a vote. The line never
   comes or goes, and on phones it reserves two rows, so a vote does not move
   the page (a late shift after a tap counts against CLS: measured 0.054 on a
   review at 390 before this). The confirmation is an empty inline span until
   then, so it is in the accessibility tree before its text arrives. */
.stg-vote__meta {
	order: 3;
	flex: 1 1 100%;
	margin: 0;
	min-height: 1.4em;
	font-family: var(--ff-display, 'Hubot Sans', system-ui, sans-serif);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--fg-2, #b0b0c0);
}
@media (max-width: 600px) {
	.stg-vote__meta {
		min-height: 2.8em;
	}
}
.stg-vote__score {
	margin-right: 0.6em;
	font-weight: 700;
	color: var(--fg-1, #f0f0f5);
}
.stg-vote__score[hidden] {
	display: none;
}
.stg-vote--cta .stg-vote__count {
	order: 0;
	display: inline;
	visibility: visible;
	min-width: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	color: var(--stg-vote-up);
}
.stg-vote__thanks {
	font-weight: 700;
	color: var(--stg-vote-up);
}
/* The reason-to-vote line is hidden once the widget is locked (has-voted),
   whether or not the thanks line has text. */
.stg-vote--cta.has-voted .stg-vote__hook {
	display: none;
}