/* MrGym Exercise Rating — front-end (RTL, "Gold Arena", light/dark aware).
   The control is usable with CSS alone; JS only submits the vote. */

.mger{
	--g1:#f4c43a; --g2:#e0a800; --g3:#ffd771;
	--line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
	--tx:#eef1f6; --tx2:#aab3c0; --tx3:#7f8a99;
	--hd:#ffffff;
	--surf:rgba(255,255,255,.03);
	--dim:rgba(255,255,255,.16);
	--numgrad:linear-gradient(135deg,#fff,var(--g3));
	--bg:radial-gradient(140% 120% at 100% 0,#1b2230 0,#11151c 48%,#0c0f14 100%);
	--shadow:0 24px 60px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
	--aura:radial-gradient(circle,rgba(224,168,0,.22),transparent 62%);
	--ok:#34d399; --err:#f87171; --rad:18px;

	position:relative; margin:42px 0; padding:26px 24px 22px;
	background:var(--bg);
	border:1px solid var(--line2); border-radius:var(--rad);
	box-shadow:var(--shadow);
	color:var(--tx);
	font-family:inherit; line-height:1.7; overflow:hidden;
	direction:rtl; text-align:right;
	-webkit-tap-highlight-color:transparent;
}

body[data-lqd-page-color-scheme="light"] .mger,
.mger[data-theme="light"]{
	--line:rgba(15,23,42,.10); --line2:rgba(15,23,42,.14);
	--tx:#1a2433; --tx2:#566273; --tx3:#7c8696;
	--hd:#15202e;
	--surf:#f5f7fb;
	--dim:rgba(15,23,42,.16);
	--numgrad:linear-gradient(135deg,#1c2636,var(--g2));
	--bg:radial-gradient(140% 120% at 100% 0,#ffffff 0,#f7f9fc 48%,#eef3f9 100%);
	--shadow:0 18px 44px -26px rgba(20,30,50,.26), inset 0 1px 0 rgba(255,255,255,.7);
	--aura:radial-gradient(circle,rgba(224,168,0,.14),transparent 62%);
}

.mger__aura{
	position:absolute; inset-block-start:-140px; inset-inline-start:-120px;
	width:360px; height:360px; background:var(--aura);
	pointer-events:none;
}

.mger__head{ position:relative; margin-bottom:18px; }

.mger__title{
	margin:0 0 4px; padding:0;
	font-size:clamp(17px,2.4vw,21px); font-weight:800; line-height:1.6;
	color:var(--hd); border:0;
}

.mger__sub{ margin:0; font-size:13.5px; color:var(--tx2); }

.mger__grid{
	position:relative; display:grid; gap:16px;
	grid-template-columns:minmax(150px,190px) 1fr;
	align-items:stretch;
}
@media (max-width:640px){ .mger__grid{ grid-template-columns:1fr; } }

/* ---- average readout ---- */
.mger__score{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:6px; padding:16px 12px;
	background:var(--surf); border:1px solid var(--line); border-radius:14px;
}

.mger__avg{
	font-size:40px; font-weight:900; line-height:1.1;
	background:var(--numgrad); -webkit-background-clip:text; background-clip:text;
	-webkit-text-fill-color:transparent; color:var(--g3);
}
.mger__score[data-empty="1"] .mger__avg{
	font-size:30px; -webkit-text-fill-color:var(--tx3); color:var(--tx3);
}

.mger__stars-static{
	position:relative; display:inline-block;
	font-size:19px; line-height:1; letter-spacing:2px; direction:ltr;
}
.mger__stars-bg{ color:var(--dim); }
.mger__stars-fg{
	position:absolute; inset-block-start:0; inset-inline-start:0;
	overflow:hidden; white-space:nowrap; color:var(--g1);
}

.mger__count{ font-size:12.5px; color:var(--tx3); }

/* ---- vote control ---- */
.mger__vote{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:10px; padding:16px 12px;
	background:var(--surf); border:1px solid var(--line); border-radius:14px;
}

.mger__label{ font-size:14px; font-weight:700; color:var(--tx); }

/* Row is laid out LTR so "fill to the right of the hovered star" works with the
   sibling selector; stars are visually symmetric so RTL reading is unaffected. */
.mger__picker{ display:flex; flex-direction:row-reverse; justify-content:center; gap:4px; }

.mger__radio{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.mger__star{
	cursor:pointer; font-size:32px; line-height:1; color:var(--dim);
	transition:transform .12s ease, color .12s ease;
	user-select:none;
}
.mger__star:hover{ transform:scale(1.14); }

/* Hovering/checking a star lights it and every star after it in the row. */
.mger__picker:hover .mger__star:hover,
.mger__picker:hover .mger__star:hover ~ .mger__star,
.mger__radio:checked ~ .mger__star{ color:var(--g1); }

/* While hovering, the checked state must not out-rank the hover preview. */
.mger__picker:hover .mger__radio:checked ~ .mger__star{ color:var(--dim); }
.mger__picker:hover .mger__star:hover,
.mger__picker:hover .mger__star:hover ~ .mger__star{ color:var(--g1); }

.mger__radio:focus-visible + .mger__star{
	outline:2px solid var(--g2); outline-offset:3px; border-radius:4px;
}

.mger__msg{ min-height:20px; font-size:13px; font-weight:600; color:var(--tx2); text-align:center; }
.mger__msg[data-state="ok"]{ color:var(--ok); }
.mger__msg[data-state="err"]{ color:var(--err); }

/* Locked after voting (or when a previous vote is detected). */
.mger.is-locked .mger__star{ cursor:default; }
.mger.is-locked .mger__star:hover{ transform:none; }
.mger.is-locked .mger__picker{ pointer-events:none; }

.mger.is-busy{ opacity:.75; }

@media (prefers-reduced-motion:reduce){
	.mger__star{ transition:none; }
	.mger__star:hover{ transform:none; }
}