/*
 * Rethy Reruns Utilities — shared frontend + admin styles.
 * Zero dependencies, plain CSS. Colors are chosen for at least a 4.5:1
 * text/background contrast ratio (WCAG 2.1 AA for normal text).
 */

:root {
	--rr-focus-ring: #1d4ed8;
	--rr-success-bg: #e6f4ea;
	--rr-success-text: #1e4620;
	--rr-success-border: #b7dfc0;
	--rr-error-bg: #fdecea;
	--rr-error-text: #7a1f1a;
	--rr-error-border: #f3c2bd;
	--rr-notice-bg: #e8f0fe;
	--rr-notice-text: #1a3d7c;
	--rr-notice-border: #b8cdf7;
	--rr-pending-bg: #fff4e5;
	--rr-pending-text: #7a4100;
	--rr-pending-border: #f4d19a;
	--rr-na-bg: #f1f1f1;
	--rr-na-text: #4b4b4b;
	--rr-na-border: #d8d8d8;
	--rr-button-bg: #1d4ed8;
	--rr-button-text: #ffffff;
	--rr-border: #c9c9c9;
	--rr-text: #1f1f1f;
}

/* Focus visibility, applied everywhere this plugin renders interactive
 * controls (form fields, buttons, callout links, admin disclosure widgets). */
.rr-registration-form :focus-visible,
.rr-login-form :focus-visible,
.rr-callout :focus-visible,
.rr-connection-details summary:focus-visible {
	outline: 3px solid var(--rr-focus-ring);
	outline-offset: 2px;
}

/* Alerts (registration success/error, "already logged in" notice). */
.rr-alert {
	border: 1px solid;
	border-radius: 4px;
	padding: 0.75em 1em;
	margin: 0 0 1.5em;
}

.rr-alert p {
	margin: 0.25em 0;
}

.rr-alert ul {
	margin: 0.5em 0 0;
	padding-inline-start: 1.5em;
}

.rr-alert--success {
	background: var(--rr-success-bg);
	color: var(--rr-success-text);
	border-color: var(--rr-success-border);
}

.rr-alert--error {
	background: var(--rr-error-bg);
	color: var(--rr-error-text);
	border-color: var(--rr-error-border);
}

.rr-alert--notice {
	background: var(--rr-notice-bg);
	color: var(--rr-notice-text);
	border-color: var(--rr-notice-border);
}

/* Registration form. */
.rr-login-hint {
	margin: 0 0 1.25em;
}

.rr-registration-form fieldset {
	border: 1px solid var(--rr-border);
	border-radius: 6px;
	padding: 1.25em;
	max-width: 32em;
}

.rr-registration-form legend {
	font-weight: 600;
	padding: 0 0.5em;
}

.rr-field {
	margin: 0 0 1.25em;
}

.rr-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.rr-field input[type='text'],
.rr-field input[type='email'],
.rr-field input[type='password'],
.rr-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5em 0.6em;
	border: 1px solid var(--rr-border);
	border-radius: 4px;
	font: inherit;
	color: var(--rr-text);
}

.rr-field--error input,
.rr-field--error textarea {
	border-color: var(--rr-error-border);
}

.rr-field-error {
	display: block;
	color: var(--rr-error-text);
	font-size: 0.9em;
	margin-top: 0.35em;
}

.rr-required {
	color: var(--rr-error-text);
}

/* Login form. */
.rr-login-form {
	max-width: 32em;
}

.rr-field--checkbox label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
}

.rr-login-links {
	margin-top: 1.25em;
}

/* Honeypot: hidden from sighted users via CSS, and from assistive tech via
 * aria-hidden on the wrapping element (kept in the DOM, off-screen, and
 * without display:none, so basic bots that skip hidden fields still fill it). */
.rr-field--honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Cloudflare Turnstile widget, when configured. */
.cf-turnstile {
	margin: 0 0 1.25em;
}

.rr-button,
.rr-registration-form button[type='submit'] {
	display: inline-block;
	background: var(--rr-button-bg);
	color: var(--rr-button-text);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 0.6em 1.4em;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.rr-button:hover,
.rr-registration-form button[type='submit']:hover {
	opacity: 0.9;
}

.rr-button--secondary {
	background: transparent;
	color: var(--rr-button-bg);
	border-color: var(--rr-button-bg);
}

/* Members-only callout shown in place of gated post content. */
.rr-callout {
	border: 1px solid var(--rr-notice-border);
	background: var(--rr-notice-bg);
	color: var(--rr-notice-text);
	border-radius: 6px;
	padding: 1.5em;
	margin: 1.5em 0;
}

.rr-callout h2 {
	margin-top: 0;
}

.rr-callout-actions {
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
	margin-top: 1em;
}

/* Admin: Users list table badges + expandable connection reason. */
.rr-badge {
	display: inline-block;
	border: 1px solid;
	border-radius: 3px;
	padding: 0.15em 0.6em;
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}

.rr-badge--pending {
	background: var(--rr-pending-bg);
	color: var(--rr-pending-text);
	border-color: var(--rr-pending-border);
}

.rr-badge--approved {
	background: var(--rr-success-bg);
	color: var(--rr-success-text);
	border-color: var(--rr-success-border);
}

.rr-badge--denied {
	background: var(--rr-error-bg);
	color: var(--rr-error-text);
	border-color: var(--rr-error-border);
}

.rr-badge--na {
	background: var(--rr-na-bg);
	color: var(--rr-na-text);
	border-color: var(--rr-na-border);
}

.rr-muted {
	color: #6b6b6b;
}

.rr-connection-details summary {
	cursor: pointer;
}

/* "Member Exclusive" badge on post listings and the single post — purely
 * informational, shown to everyone regardless of access, so it uses the
 * same blue tone as the members-only callout rather than the admin-only
 * approval-status colors above. */
.rr-badge--member {
	background: var(--rr-notice-bg);
	color: var(--rr-notice-text);
	border-color: var(--rr-notice-border);
	margin: 0 0.5em 0.75em 0;
}

/* Login/register prompt shown in place of the comment form on a locked post. */
.rr-comment-login-prompt {
	padding: 1em;
	border: 1px solid var(--rr-notice-border);
	border-radius: 6px;
	background: var(--rr-notice-bg);
	color: var(--rr-notice-text);
}