/*
 * Review Kit: the product reviews section.
 * Every colour is a seam: var(--rvk-X, var(--pal-role, literal)). The plugin never defines --rvk-*; the private
 * --_rvk-* aliases below only shorten the chains. Sizes are em (bodysoul runs a 10px root). No prefers-color-scheme:
 * dark mode is the host theme's job (it re-points the --rvk-* seams). No color-mix(), so nothing here needs a
 * COLOR-COMPAT twin.
 */
.rvk {
	--_rvk-star: var(--rvk-star, var(--pal-rating-star, #b8860b));
	--_rvk-ink: var(--rvk-ink, var(--pal-ink, #2b2b2b));
	--_rvk-muted: var(--rvk-muted, #595959);
	--_rvk-line: var(--rvk-line, var(--pal-line, #8c8c8c));
	--_rvk-surface: var(--rvk-surface, var(--pal-surface, #ffffff));
	--_rvk-reply: var(--rvk-reply-surface, var(--pal-review-reply, #f4f4f4));
	--_rvk-action: var(--rvk-action, var(--pal-action, #2b2b2b));
	--_rvk-action-ink: var(--rvk-action-ink, #ffffff);
	--_rvk-focus: var(--rvk-focus, currentColor);
	--_rvk-radius: var(--rvk-radius, 0.4em);
	color: var(--_rvk-ink);
	box-sizing: border-box;
	max-width: 100%;
}
/* Explicit, not inherit: slotted children of <details> inherit from its UA shadow slot, which is content-box. */
.rvk, .rvk *, .rvk *::before, .rvk *::after { box-sizing: border-box; }
.rvk .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.rvk__title { margin: 0 0 0.6em; color: var(--_rvk-ink); }
.rvk-empty { margin: 0 0 1em; color: var(--_rvk-ink); }
.rvk-stars { margin: 0; color: var(--_rvk-star); letter-spacing: 0.05em; white-space: nowrap; }
.rvk-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0 0 1em; }
.rvk-summary .rvk-stars { font-size: 1.2em; }

/* Distribution: the whole row is the target. */
.rvk-dist { list-style: none; margin: 0 0 1em; padding: 0; max-width: 32em; }
.rvk-dist li { margin: 0; }
.rvk-dist a, .rvk-dist__row {
	display: grid;
	grid-template-columns: 2.6em 1fr 2.4em;
	align-items: center;
	gap: 0.8em;
	min-height: 2.75em;
	padding: 0 0.4em;
	color: var(--_rvk-ink);
	text-decoration: none;
	border-radius: var(--_rvk-radius);
}
.rvk-dist a:hover { text-decoration: underline; }
.rvk-dist a[aria-current="true"] { font-weight: 700; outline: 0.1em solid var(--_rvk-line); }
.rvk-dist__row { color: var(--_rvk-muted); }
.rvk-dist__bar { display: block; height: 0.8em; background: var(--_rvk-reply); border: 1px solid var(--_rvk-line); border-radius: 1em; overflow: hidden; }
.rvk-dist__bar > span { display: block; width: var(--rvk-pct, 0%); height: 100%; background: var(--_rvk-star); }
.rvk-dist__n { text-align: right; }
.rvk-dist__all { margin: 0 0 1em; }

.rvk-sort { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; margin: 0 0 1.2em; }
.rvk-sort a { display: inline-flex; align-items: center; min-height: 2.75em; color: var(--_rvk-ink); }
.rvk-sort a[aria-current="page"] { font-weight: 700; text-decoration: none; border-bottom: 0.15em solid var(--_rvk-action); }

/* Cards */
.rvk-list { list-style: none; margin: 0 0 1em; padding: 0; }
.rvk-list > li { margin: 0 0 1.4em; padding: 0 0 1.4em; border-bottom: 1px solid var(--_rvk-line); }
.rvk-review:focus { outline: none; }
.rvk-review:focus-visible { outline: 0.2em solid var(--_rvk-focus); outline-offset: 0.3em; }
.rvk-review__head .rvk-stars { font-size: 1.2em; }
.rvk-review__title { margin: 0.2em 0; font-size: 1.1em; color: var(--_rvk-ink); }
.rvk-review__meta { margin: 0 0 0.6em; color: var(--_rvk-muted); display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; }
.rvk-review__name { color: var(--_rvk-ink); font-weight: 600; }
.rvk-badge { color: var(--_rvk-ink); border: 1px solid var(--_rvk-line); border-radius: 2em; padding: 0 0.7em; }
.rvk-review__body p { margin: 0 0 0.8em; }
.rvk-removed { font-style: italic; color: var(--_rvk-muted); }
.rvk-reply { margin: 1em 0 0 1em; padding: 0.8em 1em; background: var(--_rvk-reply); border-radius: var(--_rvk-radius); }
.rvk-reply__label { margin: 0 0 0.3em; font-weight: 600; }
.rvk-reply p { margin: 0 0 0.5em; }

.rvk-more { margin: 0 0 1.4em; }
.rvk-more__link, .rvk-button, .rvk-write__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75em;
	padding: 0.5em 1.4em;
	border-radius: var(--_rvk-radius);
	font: inherit;
	cursor: pointer;
}
.rvk-more__link { color: var(--_rvk-ink); border: 1px solid var(--_rvk-line); background: var(--_rvk-surface); text-decoration: none; }
.rvk-button { color: var(--_rvk-action-ink); background: var(--_rvk-action); border: 1px solid var(--_rvk-action); }
.rvk-more__link:focus-visible, .rvk-button:focus-visible, .rvk-write__toggle:focus-visible,
.rvk-sort a:focus-visible, .rvk-dist a:focus-visible, .rvk-form input:focus-visible, .rvk-form textarea:focus-visible {
	outline: 0.2em solid var(--_rvk-focus);
	outline-offset: 0.2em;
}

/* The write block */
.rvk-write { margin: 0 0 1em; }
.rvk-write__toggle { list-style: none; color: var(--_rvk-action-ink); background: var(--_rvk-action); border: 1px solid var(--_rvk-action); gap: 0.6em; }
.rvk-write__toggle::-webkit-details-marker { display: none; }
.rvk-write__toggle::after { content: ""; width: 0.5em; height: 0.5em; border-right: 0.15em solid currentColor; border-bottom: 0.15em solid currentColor; transform: rotate(45deg) translateY(-0.1em); transition: transform 0.15s; }
.rvk-write[open] > .rvk-write__toggle { background: var(--_rvk-surface); color: var(--_rvk-ink); border-color: var(--_rvk-line); }
.rvk-write[open] > .rvk-write__toggle::after { transform: rotate(-135deg) translateY(-0.1em); }
@media (prefers-reduced-motion: reduce) { .rvk-write__toggle::after { transition: none; } }
.rvk-write__body { margin: 1em 0 0; padding: 1em 1.2em; background: var(--_rvk-surface); border: 1px solid var(--_rvk-line); border-radius: var(--_rvk-radius); max-width: 40em; }
.rvk-write__body a { color: var(--_rvk-ink); }
.rvk-write__mine, .rvk-form__notice, .rvk-policy { color: var(--_rvk-muted); }
.rvk-policy { margin: 1em 0 0; }
.rvk-policy a { color: var(--_rvk-ink); }

.rvk-notice { margin: 0 0 1em; padding: 0.8em 1em; border: 1px solid var(--_rvk-line); border-left-width: 0.4em; border-radius: var(--_rvk-radius); background: var(--_rvk-reply); }
.rvk-notice:focus { outline: none; }
.rvk-notice:focus-visible { outline: 0.2em solid var(--_rvk-focus); outline-offset: 0.2em; }
.rvk-notice p, .rvk-notice ul { margin: 0; }
.rvk-notice ul { padding-left: 1.2em; }
.rvk-notice a { color: var(--_rvk-ink); }

/* The form */
.rvk-form p { margin: 0 0 1em; }
.rvk-form label { display: block; margin: 0 0 0.3em; font-weight: 600; }
.rvk-form input[type="text"], .rvk-form input:not([type]), .rvk-form textarea {
	display: block;
	width: 100%;
	min-height: 2.75em;
	padding: 0.5em 0.7em;
	font: inherit;
	color: var(--_rvk-ink);
	background: var(--_rvk-surface);
	border: 1px solid var(--_rvk-line);
	border-radius: var(--_rvk-radius);
}
.rvk-form textarea { min-height: 8em; resize: vertical; }
.rvk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rvk-req, .rvk-form label span { font-weight: 400; color: var(--_rvk-muted); }

/*
 * Star radios. DOM order is 1..5 so the arrow keys follow the visual order; the fill reaches back with :has().
 * Without :has() only the chosen star lights, which still reads correctly.
 */
.rvk-rating { margin: 0 0 1em; padding: 0; border: 0; min-width: 0; }
.rvk-rating legend { padding: 0; margin: 0 0 0.3em; font-weight: 600; }
.rvk-rating legend:focus { outline: none; }
.rvk-rating legend:focus-visible { outline: 0.2em solid var(--_rvk-focus); outline-offset: 0.2em; }
.rvk-rating__stars { display: inline-flex; position: relative; }
.rvk-rating__stars input { position: absolute; opacity: 0; width: 2.75em; height: 2.75em; margin: 0; pointer-events: none; }
.rvk-rating__stars label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75em;
	height: 2.75em;
	margin: 0;
	font-size: 1em;
	cursor: pointer;
	border-radius: var(--_rvk-radius);
}
.rvk-rating__stars label::before { content: "\2605"; font-size: 2.2em; line-height: 1; color: var(--_rvk-line); }
.rvk-rating__stars input:checked + label::before { color: var(--_rvk-star); }
.rvk-rating__stars label:has(~ input:checked)::before { color: var(--_rvk-star); }
.rvk-rating__stars input:focus-visible + label { outline: 0.2em solid var(--_rvk-focus); outline-offset: 0; }
.rvk-rating__stars label:hover::before { color: var(--_rvk-star); }

@media (max-width: 40em) {
	.rvk-reply { margin-left: 0; }
	.rvk-dist { max-width: none; }
}