/*
 * Membership & Subscriptions Suite: front-end design system.
 *
 * The suite renders inside any theme, light or dark, so nothing here hardcodes
 * a page color. Surfaces, borders and muted text are mixed from currentColor,
 * which makes them follow the theme's own ink. The accent follows the theme's
 * primary preset when it has one. Override any --mss-* token in your theme to
 * re-skin every screen at once.
 */

:root {
	--mss-accent: var(--wp--preset--color--primary, oklch(0.55 0.16 258));
	--mss-radius-lg: 18px;
	--mss-radius: 12px;
	--mss-radius-sm: 8px;
	--mss-gap: clamp(16px, 2.6vw, 24px);
	--mss-pad: clamp(18px, 3.2vw, 28px);

	--mss-tone-success: oklch(0.64 0.15 150);
	--mss-tone-warning: oklch(0.74 0.15 72);
	--mss-tone-danger: oklch(0.6 0.19 27);
	--mss-tone-info: oklch(0.62 0.13 250);
	--mss-tone-neutral: oklch(0.6 0.01 260);

	/* Fallbacks for browsers without color-mix(). */
	--mss-line: rgba(128, 128, 128, 0.28);
	--mss-fill: rgba(128, 128, 128, 0.06);
	--mss-fill-2: rgba(128, 128, 128, 0.13);
	--mss-muted: inherit;
}

@supports (color: color-mix(in oklch, red, blue)) {
	:root {
		--mss-line: color-mix(in oklch, currentColor 15%, transparent);
		--mss-fill: color-mix(in oklch, currentColor 3.5%, transparent);
		--mss-fill-2: color-mix(in oklch, currentColor 8%, transparent);
		--mss-muted: color-mix(in oklch, currentColor 66%, transparent);
	}
}

/* ---------- Primitives ---------- */

.mss-icon { flex: none; display: inline-block; vertical-align: middle; }

.mss-tone-success { --mss-tone: var(--mss-tone-success); }
.mss-tone-warning { --mss-tone: var(--mss-tone-warning); }
.mss-tone-danger  { --mss-tone: var(--mss-tone-danger); }
.mss-tone-info    { --mss-tone: var(--mss-tone-info); }
.mss-tone-neutral { --mss-tone: var(--mss-tone-neutral); }
.mss-tone-accent  { --mss-tone: var(--mss-accent); }

/* Status pill: a dot plus a label, so state never relies on color alone. */
.mss-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.2em 0.75em 0.2em 0.6em;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	color: color-mix(in oklch, var(--mss-tone, var(--mss-tone-neutral)) 62%, currentColor);
	background: color-mix(in oklch, var(--mss-tone, var(--mss-tone-neutral)) 15%, transparent);
}
.mss-pill::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--mss-tone, var(--mss-tone-neutral));
}

/* Meter: progress bar for usage, seats and time left. */
.mss-meter {
	height: 8px;
	border-radius: 999px;
	background: var(--mss-fill-2);
	overflow: hidden;
}
.mss-meter > span {
	display: block;
	height: 100%;
	min-width: 4px;
	border-radius: inherit;
	background: var(--mss-tone, var(--mss-accent));
	transition: width 0.4s ease;
}

/* Callout: inline message that belongs to one panel. */
.mss-callout {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 18px 0 0;
	padding: 14px 16px;
	border-radius: var(--mss-radius);
	border: 1px solid color-mix(in oklch, var(--mss-tone, var(--mss-tone-info)) 35%, transparent);
	background: color-mix(in oklch, var(--mss-tone, var(--mss-tone-info)) 9%, transparent);
}
.mss-callout > .mss-icon { margin-top: 1px; color: color-mix(in oklch, var(--mss-tone, var(--mss-tone-info)) 75%, currentColor); }
.mss-callout__body { flex: 1; min-width: 0; }
.mss-callout__body p { margin: 0; }
.mss-callout__body p + p,
.mss-callout__body p + .mss-actions-inline { margin-top: 10px; }
.mss-callout__title { font-weight: 600; }

.mss-actions-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mss-actions-inline .button { margin: 0; }
.mss-form-submit { margin: 14px 0 0; }

/* Empty state. */
.mss-empty {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: clamp(28px, 6vw, 48px) var(--mss-pad);
	border: 1px dashed var(--mss-line);
	border-radius: var(--mss-radius-lg);
	text-align: center;
}
.mss-empty__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border-radius: 50%;
	color: var(--mss-accent);
	background: color-mix(in oklch, var(--mss-accent) 12%, transparent);
}
.mss-empty__title { margin: 0; font-size: 1.125em; font-weight: 600; }
.mss-empty__text { margin: 0 0 12px; max-width: 42ch; color: var(--mss-muted); }
.mss-empty .button { margin: 0; }

/* ---------- Account layout ---------- */

.mss-account { display: grid; gap: var(--mss-gap); margin: 0 0 1.5em; }

.mss-panel {
	container-type: inline-size;
	padding: var(--mss-pad);
	border: 1px solid var(--mss-line);
	border-radius: var(--mss-radius-lg);
	background: var(--mss-fill);
}

.mss-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 16px;
}
.mss-panel__heading { min-width: 0; }
.mss-panel__title { margin: 0; font-size: 1.3em; line-height: 1.25; }
.mss-panel__sub { margin: 4px 0 0; font-size: 0.9em; color: var(--mss-muted); }

/* Key facts (label above value). */
.mss-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 18px 24px;
	margin: 22px 0 0;
	padding: 0;
}
.mss-facts > div { min-width: 0; }
.mss-facts dt { margin: 0 0 3px; font-size: 0.8125rem; font-weight: 500; color: var(--mss-muted); }
.mss-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mss-facts dd small { display: block; font-weight: 400; color: var(--mss-muted); }
.mss-facts dd a { font-weight: 600; }

/* Action bar: one primary, then secondary, destructive last. */
.mss-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--mss-line);
}
.mss-actions .button { margin: 0; }
.mss-actions > .mss-confirm { margin-inline-start: auto; }

/* Disclosure used for "change payment" and the cancel confirmation. */
.mss-disclosure > summary,
.mss-confirm > summary { cursor: pointer; list-style: none; }
.mss-disclosure > summary::-webkit-details-marker,
.mss-confirm > summary::-webkit-details-marker { display: none; }

.mss-disclosure > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.55em 1em;
	border: 1px solid var(--mss-line);
	border-radius: var(--mss-radius-sm);
	font-weight: 600;
	line-height: 1.4;
}
.mss-disclosure > summary:hover { border-color: currentColor; }
.mss-disclosure[open] { flex-basis: 100%; }
.mss-disclosure[open] > summary { border-color: currentColor; }
.mss-disclosure__panel {
	margin-top: 12px;
	padding: 16px;
	border: 1px solid var(--mss-line);
	border-radius: var(--mss-radius);
}

.mss-confirm > summary {
	padding: 0.55em 0.25em;
	font-weight: 600;
	color: color-mix(in oklch, var(--mss-tone-danger) 78%, currentColor);
}
.mss-confirm > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.mss-confirm[open] { flex-basis: 100%; margin-inline-start: 0; }
.mss-confirm[open] > summary { display: none; }
.mss-confirm .mss-callout { margin-top: 0; }

.mss-button-danger.button {
	background: var(--mss-tone-danger);
	border-color: var(--mss-tone-danger);
	color: #fff;
}
.mss-button-danger.button:hover { background: color-mix(in oklch, var(--mss-tone-danger) 85%, black); color: #fff; }

/* Choice list (radio rows). */
.mss-choices { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.mss-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--mss-line);
	border-radius: var(--mss-radius-sm);
	cursor: pointer;
}
.mss-choice:has(input:checked) { border-color: var(--mss-accent); background: color-mix(in oklch, var(--mss-accent) 7%, transparent); }
.mss-choice input { margin: 0; }
.mss-choice-group { display: grid; gap: 6px; margin: -2px 0 4px 26px; }
.mss-choice-group .mss-choice { padding: 9px 12px; font-size: 0.9375em; }

/* ---------- Members area ---------- */

.mss-membership__overview { display: grid; gap: var(--mss-gap); margin-top: 4px; }
.mss-membership__overview > .mss-members-section { margin-top: 0; }

@container (min-width: 620px) {
	.mss-membership__overview:has(> .mss-card-section) {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
		align-items: start;
	}
	.mss-membership__overview > .mss-card-section { grid-column: 2; grid-row: 1 / span 2; }
}

.mss-time-left { margin-top: 18px; }
.mss-time-left__label { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 0.875rem; color: var(--mss-muted); font-variant-numeric: tabular-nums; }

.mss-members-section { margin-top: 30px; }
.mss-members-section > h4,
.mss-members-section__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 1rem;
	line-height: 1.3;
}
.mss-members-section > h4 .mss-icon,
.mss-members-section__title .mss-icon { color: var(--mss-muted); }
.mss-members-section > p { margin: 0 0 12px; }
.mss-card-section > h4 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Link list (content and products a plan unlocks). */
.mss-linklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mss-linklist li { margin: 0; }
.mss-linklist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--mss-line);
	border-radius: var(--mss-radius-sm);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mss-linklist a:hover,
.mss-linklist a:focus-visible { border-color: var(--mss-accent); background: color-mix(in oklch, var(--mss-accent) 6%, transparent); }
.mss-linklist a .mss-icon { color: var(--mss-muted); transition: transform 0.15s ease; }
.mss-linklist a:hover .mss-icon { transform: translateX(2px); color: var(--mss-accent); }

/* Chips (member discounts). */
.mss-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mss-chip {
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: color-mix(in oklch, var(--mss-tone-success) 70%, currentColor);
	background: color-mix(in oklch, var(--mss-tone-success) 13%, transparent);
}

/* Notes from the store. */
.mss-notes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mss-notes li { margin: 0; padding: 12px 14px; border-inline-start: 3px solid var(--mss-accent); border-radius: 0 var(--mss-radius-sm) var(--mss-radius-sm) 0; background: var(--mss-fill-2); }

/* Usage allotments. */
.mss-usage { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.mss-usage li { margin: 0; }
.mss-usage__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.mss-usage__label { font-weight: 600; }
.mss-usage__count { font-variant-numeric: tabular-nums; }
.mss-usage__count strong { font-size: 1.05em; }
.mss-usage__reset { margin: 6px 0 0; font-size: 0.8125rem; color: var(--mss-muted); }

/* Guest passes. */
.mss-passes { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mss-passes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 14px; border: 1px solid var(--mss-line); border-radius: var(--mss-radius-sm); }
.mss-passes code { padding: 2px 8px; border-radius: 6px; background: var(--mss-fill-2); font-size: 0.9375em; letter-spacing: 0.04em; }
.mss-passes .mss-pass-guest { color: var(--mss-muted); }
.mss-passes .mss-pill { margin-inline-start: auto; }
.mss-subhead { margin: 22px 0 0; font-size: 0.9375rem; }

/* Inline forms (issue a pass, invite a member). */
.mss-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 16px 0 0; }
.mss-inline-form .mss-field { display: grid; gap: 5px; flex: 1 1 200px; min-width: 0; margin: 0; }
.mss-inline-form .mss-field span { font-size: 0.8125rem; font-weight: 500; color: var(--mss-muted); }
.mss-inline-form input[type="text"],
.mss-inline-form input[type="email"] { width: 100%; box-sizing: border-box; }
.mss-inline-form .button { margin: 0; }

/* Team seats. */
.mss-seats-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.mss-seats-summary span { color: var(--mss-muted); }
.mss-people { display: grid; margin: 16px 0 0; padding: 0; list-style: none; border: 1px solid var(--mss-line); border-radius: var(--mss-radius); }
.mss-people li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; }
.mss-people li + li { border-top: 1px solid var(--mss-line); }
.mss-avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 0.8125rem;
	font-weight: 700;
	color: color-mix(in oklch, var(--mss-accent) 75%, currentColor);
	background: color-mix(in oklch, var(--mss-accent) 14%, transparent);
}
.mss-person { flex: 1; min-width: 0; display: grid; }
.mss-person strong,
.mss-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mss-person span { font-size: 0.875rem; color: var(--mss-muted); }
.mss-people form { margin: 0; }
.mss-people .mss-remove-seat.button {
	padding: 0.4em 0.8em;
	font-size: 0.875rem;
	background: transparent;
	border: 1px solid var(--mss-line);
	color: inherit;
}
.mss-people .mss-remove-seat.button:hover { border-color: var(--mss-tone-danger); color: color-mix(in oklch, var(--mss-tone-danger) 80%, currentColor); }

/* ---------- Digital membership card ---------- */

.mss-card {
	--mss-card-base: oklch(0.38 0.12 258);
	--mss-card-ink: #fff;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 1.586;
	box-sizing: border-box;
	padding: 20px 22px;
	overflow: hidden;
	border-radius: 16px;
	container-type: inline-size;
	color: var(--mss-card-ink);
	background:
		radial-gradient(120% 130% at 100% 0%, rgb(255 255 255 / 0.22), transparent 55%),
		linear-gradient(140deg, var(--mss-card-base), oklch(from var(--mss-card-base) calc(l - 0.14) c h));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 20px 40px -22px rgb(0 0 0 / 0.55);
	font-variant-numeric: tabular-nums;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
@supports (color: oklch(from red l c h)) {
	/* Follow the brand accent, but cap its lightness so white text stays readable. */
	.mss-card { --mss-card-base: oklch(from var(--mss-accent) min(l, 0.46) c h); }
}
.mss-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(115deg, transparent 0 22px, rgb(255 255 255 / 0.035) 22px 23px);
	pointer-events: none;
}
.mss-card:has(.mss-card-extra) { aspect-ratio: auto; }

.mss-card-metal {
	--mss-card-ink: oklch(0.94 0.01 85);
	background:
		linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.14) 46%, transparent 60%),
		linear-gradient(140deg, oklch(0.34 0.01 260), oklch(0.2 0.008 260) 55%, oklch(0.3 0.012 260));
}
.mss-card-metal .mss-card-plan { background: linear-gradient(135deg, oklch(0.86 0.06 85), oklch(0.7 0.07 75)); color: oklch(0.24 0.03 70); }

.mss-card-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; letter-spacing: 0.01em; }
.mss-card-site { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mss-card-plan {
	flex: 0 1 auto;
	max-width: 55%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: rgb(255 255 255 / 0.18);
}
.mss-card-holder { margin-top: auto; }
@container (max-width: 330px) {
	.mss-card-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
	.mss-card-plan { max-width: 100%; }
}
.mss-card-name { display: block; font-size: clamp(1.1rem, 4.6cqi, 1.45rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.mss-card-body { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; }
.mss-card-body > div { min-width: 0; }
.mss-card-body dt { margin: 0; font-size: 0.6875rem; font-weight: 500; opacity: 0.72; }
.mss-card-body dd { margin: 0; font-size: 0.875rem; font-weight: 600; }
.mss-card-number dd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; }
.mss-card-extra { display: flex; justify-content: center; padding: 10px; border-radius: 10px; background: #fff; color: #111; }
.mss-card-extra img,
.mss-card-extra svg { max-width: 100%; height: auto; }

/* ---------- Subscriptions ---------- */

.mss-subscription .mss-panel__title { font-size: 1.2em; }

/* ---------- Restriction notice ---------- */

/* Teaser preview fades into the notice below it. */
.mss-teaser {
	-webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
	mask-image: linear-gradient(to bottom, #000 35%, transparent);
}
.mss-teaser + .mss-restricted-content { margin-top: 0; }

.mss-restricted-content {
	margin: 1.5em 0;
	padding: clamp(24px, 5vw, 44px) clamp(18px, 4vw, 32px);
	border: 1px solid var(--mss-line);
	border-radius: var(--mss-radius-lg);
	background: var(--mss-fill);
	text-align: center;
}
.mss-restricted-icon {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: 50%;
	color: var(--mss-accent);
	background: color-mix(in oklch, var(--mss-accent) 13%, transparent);
	line-height: 1;
}
.mss-restricted-delayed .mss-restricted-icon {
	color: color-mix(in oklch, var(--mss-tone-info) 80%, currentColor);
	background: color-mix(in oklch, var(--mss-tone-info) 13%, transparent);
}
.mss-restricted-message { max-width: 46ch; margin: 0 auto; font-size: 1.0625em; }
.mss-restricted-message > :last-child { margin-bottom: 0; }
.mss-restricted-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 20px; }
.mss-restricted-actions .button { margin: 0; }
.mss-restricted-login { margin: 0; font-size: 0.9375em; color: var(--mss-muted); }
.mss-restricted-login a { font-weight: 600; }
.mss-restricted-cta { display: inline-block; }
.mss-restricted-price { font-size: 0.9375em; color: var(--mss-muted); }

/* ---------- Members directory ---------- */

.mss-directory {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}
.mss-directory-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 22px 18px;
	border: 1px solid var(--mss-line);
	border-radius: var(--mss-radius-lg);
	background: var(--mss-fill);
	text-align: center;
}
.mss-directory-member img.avatar { width: 72px; height: 72px; margin: 0 0 4px; border-radius: 50%; object-fit: cover; }
.mss-directory-name { font-weight: 700; }
.mss-directory-bio {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 0.9375em;
	color: var(--mss-muted);
}
.mss-directory-empty { color: var(--mss-muted); }
.mss-directory-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

/* ---------- Prices and checkout ---------- */

.mss-checkout-terms {
	margin: 0 0 1em;
	padding: 14px 16px;
	border: 1px solid var(--mss-line);
	border-radius: var(--mss-radius);
	background: var(--mss-fill);
}
.mss-checkout-terms__title { margin: 0 0 6px; font-weight: 600; }
.mss-checkout-terms__summary { margin: 0 0 10px; padding-inline-start: 1.1em; font-size: 0.9375em; }
.mss-checkout-terms__summary li { margin: 0 0 4px; }
.mss-checkout-terms__accept.form-row { margin: 0; padding: 0; }
.mss-checkout-terms__accept label { display: inline; }
.mss-checkout-terms__link { font-size: 0.9375em; font-weight: 600; }

.mss-recurring-total th,
.mss-recurring-total td { font-weight: 600; }

.mss-member-price del { opacity: 0.6; margin-right: 4px; }
.mss-member-price ins { text-decoration: none; font-weight: 700; }
.mss-member-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	vertical-align: middle;
	color: color-mix(in oklch, var(--mss-tone-success) 70%, currentColor);
	background: color-mix(in oklch, var(--mss-tone-success) 14%, transparent);
}
.mss-member-teaser {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin-top: 6px;
	font-size: 0.875rem;
	color: var(--mss-muted);
}
.mss-member-teaser a { font-weight: 600; }
.mss-product-discount { font-weight: 600; color: color-mix(in oklch, var(--mss-tone-success) 70%, currentColor); }

.mss-block-badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 600;
	background: var(--mss-fill-2);
}

/* ---------- Small screens and print ---------- */

@container (max-width: 440px) {
	.mss-actions .button,
	.mss-actions > .mss-disclosure > summary { flex: 1 1 auto; justify-content: center; text-align: center; }
	.mss-actions > .mss-confirm { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mss-meter > span,
	.mss-linklist a,
	.mss-linklist a .mss-icon { transition: none; }
}

@media print {
	.mss-actions,
	.mss-inline-form,
	.mss-people form { display: none; }
	.mss-panel { break-inside: avoid; }
}