/* ==========================================================================
   PEM Frontend — mobile-first base styles
   ========================================================================== */

:root {
	--pem-color-primary:      #1a1a2e;
	--pem-color-primary-dark: #16213e;
	--pem-color-accent:       #e94560;
	--pem-color-accent-hover: #c73652;
	--pem-color-surface:      #ffffff;
	--pem-color-border:       #d1d5db;
	--pem-color-text:         #111827;
	--pem-color-text-muted:   #6b7280;
	--pem-color-success-bg:   #ecfdf5;
	--pem-color-success-text: #065f46;
	--pem-color-success-border: #6ee7b7;
	--pem-color-error-bg:     #fef2f2;
	--pem-color-error-text:   #991b1b;
	--pem-color-error-border: #fca5a5;

	--pem-radius:   0.375rem;
	--pem-spacing:  1rem;
	--pem-font:     inherit;
}

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */

.pem-invite-wrap {
	max-width: 480px;
	margin: 0 auto;
	padding: var(--pem-spacing);
	font-family: var(--pem-font);
	color: var(--pem-color-text);
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.pem-notice {
	margin-bottom: var(--pem-spacing);
	padding: 0.75rem 1rem;
	border-radius: var(--pem-radius);
	border-width: 1px;
	border-style: solid;
}

.pem-notice p {
	margin: 0 0 0.25rem;
}

.pem-notice p:last-child {
	margin-bottom: 0;
}

.pem-notice--success {
	background-color: var(--pem-color-success-bg);
	border-color:     var(--pem-color-success-border);
	color:            var(--pem-color-success-text);
}

.pem-notice--error {
	background-color: var(--pem-color-error-bg);
	border-color:     var(--pem-color-error-border);
	color:            var(--pem-color-error-text);
}

.pem-invite-token code {
	display: block;
	margin-top: 0.25rem;
	word-break: break-all;
	font-size: 0.8em;
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.pem-invite-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.pem-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.pem-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pem-color-text);
}

.pem-required {
	color: var(--pem-color-accent);
	margin-left: 0.125rem;
}

.pem-input,
.pem-select {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--pem-color-border);
	border-radius: var(--pem-radius);
	background-color: var(--pem-color-surface);
	color: var(--pem-color-text);
	font-size: 1rem;
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pem-input:focus,
.pem-select:focus {
	outline: none;
	border-color: var(--pem-color-accent);
	box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.pem-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.25rem;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.pem-actions {
	margin-top: 0.25rem;
}

.pem-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.5rem;
	border: none;
	border-radius: var(--pem-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
	text-decoration: none;
}

.pem-btn--primary {
	background-color: var(--pem-color-accent);
	color: #ffffff;
	width: 100%;
}

.pem-btn--primary:hover,
.pem-btn--primary:focus {
	background-color: var(--pem-color-accent-hover);
}

.pem-btn--primary:active {
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Readonly / locked input variant
   -------------------------------------------------------------------------- */

.pem-input--readonly {
	background-color: var(--pem-color-border);
	color: var(--pem-color-text-muted);
	cursor: default;
}

.pem-input--readonly:focus {
	border-color: var(--pem-color-border);
	box-shadow: none;
}

.pem-field-note {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--pem-color-text-muted);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Profile completion — wider wrapper for multi-member form
   -------------------------------------------------------------------------- */

.pem-complete-wrap {
	max-width: 600px;
}

/* Member fieldset group */

.pem-member-group {
	border: 1px solid var(--pem-color-border);
	border-radius: var(--pem-radius);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
}

.pem-member-group__legend {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pem-color-text-muted);
	padding: 0 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Checkbox field variant */

.pem-field--checkbox {
	flex-direction: row;
	align-items: center;
}

.pem-label--checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Responsive — wider viewports get a card treatment
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
	.pem-invite-wrap {
		padding: 2rem;
		background-color: var(--pem-color-surface);
		border: 1px solid var(--pem-color-border);
		border-radius: calc(var(--pem-radius) * 2);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}
}