/* Tracker star widget — "The closer, scored" (mockup/ratings/src/r25-closer-scored.html,
   user pick 2026-09-01, issue #115). A full-width closing band at the foot of every board:
   a display question, five oversized outline stars over a soft wash, the average as one big
   number (gold once it exists), "out of 5", and the count in mono. One reserved foot line
   carries "Your rating N · change" and the transient status, so nothing ever adds a line.
   The widget is the last child of .ct-wrap / .crx-wrap, which pad with --pad at every width;
   the negative inline margin cancels exactly that, so the band cannot overflow.
   Fail-closed pages emit no markup; this sheet is enqueued only when the widget renders. */
.cds-rate{
	position:relative;
	container-type:inline-size;
	margin:0 calc(var(--pad,24px) * -1) 26px;
	padding:0 var(--pad,24px);
	border-bottom:1px solid var(--hair,rgba(255,255,255,.075));
	background:radial-gradient(56% 100% at 50% -22%,rgba(79,199,234,.07),transparent 62%);
	text-align:center;
	font-family:var(--font-body,"Inter",system-ui,sans-serif);
	scroll-margin-top:calc(var(--top-h,66px) + 76px);
}
.cds-rate::before{
	content:"";position:absolute;inset:0 0 auto 0;height:1px;
	background:var(--grad,linear-gradient(115deg,#4FC7EA,#2F97EE 45%,#7B4DF2));
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.cds-rate-inner{padding:30px 0 26px}
/* the shells reset h2/p margins with (0,1,1) selectors — two classes keep the centring */
.cds-rate .cds-rate-q{
	margin:0 auto;max-width:26ch;
	font-family:var(--font-display,"Sora","Inter",sans-serif);
	font-size:clamp(22px,4.4cqi,30px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#fff;
}

/* --- stars over the wash ------------------------------------------------- */
.cds-rate-starwrap{position:relative;display:inline-block;max-width:100%;margin-top:14px}
.cds-rate-glow{
	position:absolute;left:-8%;right:-8%;top:-58%;bottom:-58%;pointer-events:none;
	background:radial-gradient(50% 58% at 50% 50%,rgba(79,199,234,.11),rgba(123,77,242,.07) 48%,transparent 74%);
	transition:opacity .35s ease;
}
.cds-rate-glow-warm{
	background:radial-gradient(50% 58% at 50% 50%,rgba(245,196,81,.13),transparent 72%);
	opacity:0;
}
.cds-rate:has(.cds-rate-star:hover) .cds-rate-glow-warm,
.cds-rate:has(.cds-rate-star:focus-visible) .cds-rate-glow-warm,
.cds-rate.is-voted .cds-rate-glow-warm{opacity:1}
.cds-rate-stars{position:relative;display:flex;align-items:center;justify-content:center}

/* Every board shell has a `<prefix> button{color:inherit}` reset (.crx, .ctx, .ftx …)
   that would paint the stars ink; the two-class selector (0,2,0) outranks all of them
   so the resting state stays dim on every family. */
.cds-rate .cds-rate-star{
	appearance:none;-webkit-appearance:none;
	display:inline-flex;align-items:center;justify-content:center;
	width:66px;height:66px;padding:0;margin:0;
	border:0;border-radius:14px;background:transparent;
	color:var(--ink-4,#7E849C);cursor:pointer;
	transition:color .16s ease,transform .16s ease;
}
.cds-rate-icon{width:42px;height:42px;display:block}
.cds-rate-icon path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
/* chosen state: every star up to the vote is gold and filled; the exact one lifts */
.cds-rate .cds-rate-star.is-on{color:var(--gold,#F5C451)}
.cds-rate-star.is-on .cds-rate-icon path{fill:currentColor}
.cds-rate-star[aria-pressed="true"]{transform:translateY(-2px)}
/* hover preview: the hovered star and every star before it, overriding the chosen state.
   Specificity is deliberate: the "dim everything" rule is (0,4,0); the hovered-star rule
   must beat it, so it repeats the .cds-rate-stars:hover context — (0,5,0) / (0,6,0).
   (2.60.20 shipped the hovered star at (0,3,0): stars before the pointer lit, the one
   under it stayed grey, so a 5-star hover read as four.) */
.cds-rate .cds-rate-stars:hover .cds-rate-star{color:var(--ink-4,#7E849C)}
.cds-rate .cds-rate-stars:hover .cds-rate-star .cds-rate-icon path{fill:none}
.cds-rate .cds-rate-stars:hover .cds-rate-star:hover,
.cds-rate .cds-rate-stars:hover .cds-rate-star:has(~ .cds-rate-star:hover){color:var(--gold,#F5C451)}
.cds-rate .cds-rate-stars:hover .cds-rate-star:hover .cds-rate-icon path,
.cds-rate .cds-rate-stars:hover .cds-rate-star:has(~ .cds-rate-star:hover) .cds-rate-icon path{fill:currentColor}
.cds-rate-star:focus{outline:none}
.cds-rate-star:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}
.cds-rate.is-busy .cds-rate-star{pointer-events:none}

/* --- the readout ---------------------------------------------------------- */
.cds-rate .cds-rate-res{
	display:flex;align-items:baseline;justify-content:center;gap:9px;
	margin:10px 0 0;min-height:30px;
}
.cds-rate-avg{
	font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:30px;color:#fff;
	font-variant-numeric:tabular-nums;
	/* "—" and "4.6" differ by ~14px at this size; reserve so the row never re-centres */
	min-width:44px;text-align:right;
	transition:color .25s ease;
}
.cds-rate.is-populated .cds-rate-avg{color:var(--gold,#F5C451)}
.cds-rate-of{font-size:13px;color:var(--ink-3,#A9AFC4)}
.cds-rate-sep{width:1px;height:14px;background:var(--hair-2,rgba(255,255,255,.14));flex:none;align-self:center}
.cds-rate-n{
	font-family:var(--font-mono,ui-monospace,monospace);font-size:12.5px;letter-spacing:.04em;
	color:var(--ink-3,#A9AFC4);white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* --- one reserved foot line: your rating / status share a cell ------------ */
.cds-rate .cds-rate-foot{display:grid;min-height:22px;margin-top:6px}
.cds-rate .cds-rate-foot>*{grid-area:1/1;margin:0;font-size:12.5px;line-height:22px;color:var(--ink-4,#7E849C);visibility:hidden;white-space:nowrap}
.cds-rate.is-voted .cds-rate-you{visibility:visible}
.cds-rate-you b{color:var(--gold,#F5C451);font-weight:700;font-variant-numeric:tabular-nums}
.cds-rate .cds-rate-change{
	appearance:none;-webkit-appearance:none;
	margin-left:8px;padding:2px 8px;min-height:22px;border-radius:999px;
	border:1px solid var(--hair-2,rgba(255,255,255,.14));background:var(--card,#1B2030);
	font:inherit;font-size:12px;font-weight:600;line-height:1;color:var(--ink-3,#A9AFC4);cursor:pointer;
	transition:color .16s ease,border-color .16s ease;
}
.cds-rate .cds-rate-change:hover{color:#fff;border-color:var(--ink-4,#7E849C)}
.cds-rate-change:focus{outline:none}
.cds-rate-change:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}
.cds-rate-status{color:var(--up,#2ED47F)}
.cds-rate-status.is-error{color:var(--down,#FF5C7A)}
.cds-rate-status:not(:empty){visibility:visible}
/* while the status shows, it owns the line */
.cds-rate-foot:has(.cds-rate-status:not(:empty))>.cds-rate-you{visibility:hidden}

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

/* --- narrow columns: the widget's own width is what matters ------------- */
@container (max-width:700px){
	.cds-rate-inner{padding:24px 0 22px}
	.cds-rate .cds-rate-star{width:54px;height:54px}
	.cds-rate-icon{width:32px;height:32px}
}
@container (max-width:340px){
	.cds-rate .cds-rate-star{width:46px;height:46px}
	.cds-rate-icon{width:28px;height:28px}
	.cds-rate-glow{left:0;right:0}
	.cds-rate-avg{font-size:24px}
}
@container (max-width:260px){
	.cds-rate .cds-rate-star{width:44px;height:44px}
	.cds-rate-icon{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
	.cds-rate-star,.cds-rate-glow,.cds-rate-change,.cds-rate-avg{transition:none}
}