/*
 * Martin's Star Ratings. Phone first, dark-friendly (it inherits the page's text colour).
 * The colours and size come from CSS variables, set from the settings page (defaults: the values
 * kk Star Ratings had on the site). The class names kk-star-ratings, kksr-stars and kksr-legend are
 * kept on purpose: martin-theme styles them inside .pv-acts.
 */
.mfsr {
	--mfsr-size: 16px;
	--mfsr-off: #c5c5c5;
	--mfsr-on: #e78e0a;
	--mfsr-hover: #ead515;
	--mfsr-cell: 44px; /* Hit area of one star: at least 44 x 44 CSS px. The drawn star is smaller. */
	--mfsr-gold: #f1c46f;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	max-width: 100%;
	margin: 0 0 1rem;
	color: inherit;
	line-height: 1.25;
}

.mfsr *,
.mfsr *::before,
.mfsr *::after {
	box-sizing: border-box;
}

.mfsr.kksr-valign-bottom {
	margin: 1rem 0 0;
}

.mfsr.kksr-align-center {
	justify-content: center;
}

.mfsr.kksr-align-right {
	justify-content: flex-end;
}

/* Not a member / read only: just the legend. */
.mfsr--static {
	display: inline-flex;
	align-items: baseline;
	gap: 4px 10px;
}

.mfsr--static .mfsr-hint {
	display: inline;
	opacity: .7;
}

/* The member's widget: a rounded box that changes look with the state. */
.mfsr:not(.mfsr--static) {
	padding: 2px 16px 2px 6px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 26px;
}

.mfsr[data-state="unrated"] {
	border-style: dashed;
	border-color: rgba(234, 213, 21, .7);
}

.mfsr[data-state="rated"],
.mfsr[data-state="legacy"] {
	border-style: solid;
	border-color: rgba(226, 178, 106, .9);
	background: rgba(226, 178, 106, .12);
}

/* The star row */
.mfsr-stars {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	touch-action: pan-y; /* Horizontal drags are ours (pick a star); vertical ones scroll the page. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.mfsr-star {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mfsr-cell);
	height: var(--mfsr-cell);
	border-radius: 50%;
	outline: none;
}

.mfsr-star svg {
	display: block;
	width: var(--mfsr-size);
	height: var(--mfsr-size);
	fill: none;
	stroke: var(--mfsr-off);
	stroke-width: 1.6;
	stroke-linejoin: round;
	pointer-events: none;
	transition: fill .12s, stroke .12s, transform .12s;
}

.mfsr-star.is-on svg {
	fill: var(--mfsr-on);
	stroke: var(--mfsr-on);
}

/* While choosing (hover with a mouse, finger down on a phone, keyboard focus). */
.mfsr-star.is-pv svg {
	fill: var(--mfsr-hover);
	stroke: var(--mfsr-hover);
	transform: scale(1.18);
}

.mfsr-star:focus-visible {
	box-shadow: 0 0 0 2px var(--mfsr-hover);
}

.mfsr.is-saving .mfsr-stars {
	opacity: .75;
}

/*
 * The words: ONE line, never wrapped. Every piece is in the markup; the state on the root picks which show.
 *   unrated: Rate this gallery · 5.0/5 (3 votes)
 *   rated:   ✓ You rated ★4 · 4.7/5 (4 votes) · tap to change · remove
 *   legacy:  ✓ You've rated this · 4.7/5 (4 votes) · tap to change
 * Next to the stars when it fits, else under them (the body does not shrink, so the flex row wraps it
 * whole). It scales with the screen, and what still does not fit loses its tail: "tap to change" is
 * cut first (ellipsis), then the line is clipped. Never a second line.
 */
.mfsr-body {
	flex: 1 0 auto;
	min-width: 0;
	max-width: 100%;
	padding: 0 0 0 8px;
}

.mfsr-line {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	min-width: 0;
	padding: 4px 6px 6px 0; /* the right 6px: the "remove" button's own padding must not count as overflow */
	overflow: hidden;
	white-space: nowrap;
	font-size: clamp(11px, 3.2vw, 13.5px);
	font-weight: 400;
}

.mfsr-line > * {
	flex: 0 0 auto;
}

.mfsr-line > .mfsr-hint {
	flex: 0 1 auto; /* the first piece to give way */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mfsr-lead {
	display: inline-flex;
	align-items: baseline;
	font-weight: 700;
}

.mfsr-prompt,
.mfsr-badge,
.mfsr-badge-unknown,
.mfsr-hint,
.mfsr-remove {
	display: none;
}

.mfsr[data-state="unrated"] .mfsr-prompt {
	display: inline;
}

.mfsr[data-state="rated"] .mfsr-badge,
.mfsr[data-state="legacy"] .mfsr-badge-unknown {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	color: var(--mfsr-gold);
}

.mfsr[data-state="rated"] .mfsr-hint,
.mfsr[data-state="legacy"] .mfsr-hint {
	display: block;
}

.mfsr[data-state="rated"] .mfsr-remove {
	display: inline-flex;
	align-items: baseline;
}

.mfsr-mini {
	display: block;
	flex: none;
	width: .95em;
	height: .95em;
	margin-right: -.12em;
	fill: var(--mfsr-on);
	stroke: none;
}

.mfsr-n {
	font-variant-numeric: tabular-nums;
}

.mfsr-legend {
	font-weight: 400;
	opacity: .9;
}

.mfsr-hint {
	opacity: .75;
}

/* The separator between pieces: a middle dot with real room around it (not read aloud). */
.mfsr-line .mfsr-legend::before,
.mfsr-line .mfsr-hint::before,
.mfsr-line .mfsr-remove::before {
	content: "\00b7";
	content: "\00b7" / "";
	margin: 0 .4em;
	opacity: .7;
}

/* "remove": a text link. Padding makes the target at least 24 px tall (WCAG 2.5.8); the margins hand that room back. */
.mfsr-clear {
	margin: -4px -6px;
	padding: 4px 6px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: .8;
	cursor: pointer;
}

.mfsr-clear:hover,
.mfsr-clear:focus-visible {
	opacity: 1;
}

.mfsr--starsonly .mfsr-body {
	display: none;
}

/* An error replaces the words for a moment (the next press brings them back). */
.mfsr.is-error .mfsr-body {
	display: none;
}

/* Screen reader messages; an error is also shown. */
.mfsr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mfsr.is-error .mfsr-live {
	position: static;
	flex-basis: 100%;
	width: auto;
	height: auto;
	padding: 0 0 4px 8px;
	overflow: visible;
	clip: auto;
	white-space: normal;
	color: #ff9aa8;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.mfsr-star svg {
		transition: none;
	}

	.mfsr-star.is-pv svg {
		transform: none;
	}
}

/*
 * Inside martin-theme's hero actions (.pv-acts): the theme draws .kk-star-ratings as a 40px pill
 * next to the bookmark button. The member's widget is taller (44px stars, two lines of words), so it
 * takes over the pill's height and, on phones, a row of its own.
 */
.members-post .pv-acts .kk-star-ratings.mfsr:not(.mfsr--static) {
	height: auto;
	min-height: 48px;
	justify-content: flex-start;
	gap: 2px 8px;
	padding: 2px 16px 2px 6px;
	border-radius: 26px;
	font: 700 14px/1.25 var(--pv-font);
}

.members-post .pv-acts .mfsr .kksr-stars {
	flex: none;
	margin: 0;
}

.members-post .pv-acts .mfsr .kksr-legend {
	color: #eadbe4;
	font-weight: 400 !important;
	font-size: 1em !important; /* the line's own responsive size */
	white-space: nowrap;
}

.members-post .pv-acts .mfsr[data-state="unrated"] {
	border: 1px dashed rgba(234, 213, 21, .7);
}

.members-post .pv-acts .mfsr[data-state="rated"],
.members-post .pv-acts .mfsr[data-state="legacy"] {
	border: 1px solid rgba(226, 178, 106, .9);
	background: rgba(226, 178, 106, .12);
}

/* The theme gives every action the same width; the rating pill is wider than the bookmark button. */
.members-post .pv-acts:has(.mfsr) {
	grid-auto-columns: auto;
}

/* PC: the Favorites pill next to the rating stretches to the rating box's height. */
@media (min-width: 600px) {
	.members-post .pv-acts:has(.mfsr) {
		align-items: stretch;
	}

	.members-post .pv-acts:has(.mfsr) .mbk-btn {
		height: auto;
		min-height: 44px;
	}

	/* 40% + 25% less space between the stars: the 16px star in a 29px-wide cell (was 44: a 28px gap, now 13px). */
	.members-post .pv-acts .mfsr .mfsr-star {
		width: 29px;
	}
}

/* Wide screens: the rating box and the Favorites pill are both exactly 44px tall (the words fit on one row). */
@media (min-width: 760px) {
	.members-post .pv-acts .kk-star-ratings.mfsr:not(.mfsr--static) {
		height: 44px;
		min-height: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	.members-post .pv-acts .mfsr .mfsr-star {
		height: 42px; /* 44px box - 2px border */
	}

	.members-post .pv-acts .mfsr .mfsr-line {
		padding-top: 0;
		padding-bottom: 0;
	}

	.members-post .pv-acts:has(.mfsr) .mbk-btn {
		height: 44px;
	}
}

@media (max-width: 599px) {
	/* The theme lays the actions out in two columns, side by side; the rating gets the full row. */
	.members-post .pv-acts:has(.mfsr) {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}

	.members-post .pv-acts .kk-star-ratings.mfsr {
		padding-right: 12px;
	}

	/*
	 * A slimmer rating box on phones: the stars keep their 16px size, with 36% less space between them
	 * (28 -> 18px, so a 34px pitch), the same thin space above the stars and below the words (4px box
	 * padding + the star cell's own 4px), and 30% less between the star row and the words (18 -> 12px).
	 * The touch area stays 44px tall: the row's ::before reaches 10px above and below it, and the pick
	 * still comes from the finger's x over the row, as before.
	 */
	.members-post .pv-acts .kk-star-ratings.mfsr:not(.mfsr--static) {
		min-height: 0;
		padding-top: 4px;
		padding-bottom: 8px; /* the words' line box ends ~4px above its text, so 8 here looks equal to the top gap */
	}

	.members-post .pv-acts .mfsr .mfsr-stars {
		position: relative;
	}

	.members-post .pv-acts .mfsr .mfsr-stars::before {
		content: "";
		position: absolute;
		inset: -10px 0;
	}

	.members-post .pv-acts .mfsr .mfsr-star {
		width: 34px;
		height: 24px;
	}

	.members-post .pv-acts .mfsr .mfsr-line {
		padding: 6px 6px 0; /* equal sides, so the words centre truly (the 6px right is the remove button's own reach) */
		justify-content: center;
	}

	/* The star row and the words are both centred in the box (equal side padding, no left indent). */
	.members-post .pv-acts .kk-star-ratings.mfsr:not(.mfsr--static) {
		justify-content: center;
		padding-left: 12px;
		padding-right: 12px;
	}

	.members-post .pv-acts .mfsr .mfsr-body {
		flex: 1 0 100%;
		padding: 0;
		text-align: center;
	}

	/*
	 * The same without :has() (older browsers). The theme's actions grid flows in columns, so the rating
	 * is pinned to row 1 across both columns and the next action (the bookmark button) to row 2.
	 */
	.members-post .pv-acts > .kk-star-ratings.mfsr:not(.mfsr--static) {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.members-post .pv-acts > .kk-star-ratings.mfsr:not(.mfsr--static) + * {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}