/*
 * furk.space — account forms (register / sign-in / account).
 * furkspace-core's auth blocks enqueue this.
 */

.fs-auth {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 26rem;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--sans);
}
.fs-auth,
.fs-auth * { box-sizing: border-box; }

/* ---- header auth nav ------------------------------------------------- */

.fs-authnav {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}
.fs-authnav a { text-decoration: none; }
.fs-authnav__out { color: var(--wp--preset--color--accent); }

/* Sign in reads as a distinct button, set apart from the rest of the nav. */
.fs-authnav__in {
	margin-left: 0.5rem;
	padding: 0.4rem 0.9rem;
	border-radius: 6px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	line-height: 1;
	transition: opacity 0.15s ease;
}
.fs-authnav__in:hover,
.fs-authnav__in:focus-visible { opacity: 0.85; }
.fs-authnav__me {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--contrast);
}
.fs-authnav__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.fs-authnav__out { color: var(--wp--preset--color--muted); }

/* ---- sign-in modal ------------------------------------------------- */

dialog.fs-modal {
	box-sizing: border-box;
	max-width: 27rem;
	width: calc(100% - 2rem);
	border: 0;
	border-radius: 8px;
	padding: 1.75rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
}
dialog.fs-modal:not([open]) { display: none; }
dialog.fs-modal::backdrop { background: rgba(20, 18, 15, 0.5); }
.fs-modal__close {
	margin: -0.75rem -0.75rem 0 0;
	text-align: right;
}
.fs-modal__close button {
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.2rem 0.4rem;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
}
.fs-modal__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.15rem;
	margin: 0 0 1rem;
}
dialog.fs-modal .fs-auth { margin-inline: 0; max-width: none; }

.fs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fs-auth__row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.fs-auth__row label,
.fs-auth__label {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}
.fs-auth__row small {
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
}

.fs-auth input[type="text"],
.fs-auth input[type="email"],
.fs-auth input[type="password"] {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
}
.fs-auth input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: transparent;
}

.fs-auth__pass {
	position: relative;
	display: block;
}
.fs-auth__pass input { padding-right: 2.6rem; }
.fs-auth__peek {
	position: absolute;
	right: 0.35rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	-webkit-mask: var(--fs-eye) center / 1.2rem no-repeat;
	mask: var(--fs-eye) center / 1.2rem no-repeat;
	background-color: var(--wp--preset--color--muted);
}
.fs-auth__peek.is-on { --fs-eye: var(--fs-eye-off); }

:root {
	--fs-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M247.31 124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57 61.26 162.88 48 128 48S61.43 61.26 36.34 86.35C17.51 105.18 9 124 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208s66.57-13.26 91.66-38.34c18.83-18.83 27.3-37.61 27.65-38.4a8 8 0 0 0 0-6.5ZM128 168a40 40 0 1 1 40-40 40 40 0 0 1-40 40Z'/%3E%3C/svg%3E");
	--fs-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228 175a8 8 0 0 1-10.92-3l-19-33.2A123.23 123.23 0 0 1 162 155.46l5.87 35.22a8 8 0 0 1-6.58 9.21 8.4 8.4 0 0 1-1.29.11 8 8 0 0 1-7.88-6.69l-5.77-34.58a133.06 133.06 0 0 1-36.68 0l-5.77 34.58A8 8 0 0 1 96 200a8.4 8.4 0 0 1-1.32-.11 8 8 0 0 1-6.58-9.21l5.9-35.22a123.23 123.23 0 0 1-36.06-16.69l-19 33.2A8 8 0 1 1 25 167l20-35a153.47 153.47 0 0 1-19.3-20 8 8 0 1 1 12.46-10c15.13 18.7 44.68 41 89.84 41s74.71-22.3 89.84-41a8 8 0 1 1 12.46 10 153.47 153.47 0 0 1-19.3 20l20 35a8 8 0 0 1-2.94 11Z'/%3E%3C/svg%3E");
}

.fs-auth__check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
}
.fs-auth__check input { margin-top: 0.15rem; }

/* avatar */
.fs-auth__avatar { gap: 0.5rem; }
.fs-auth__drop {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.8rem;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.12s ease;
}
.fs-auth__drop:hover { border-color: var(--wp--preset--color--accent); }
.fs-auth__drop input[type="file"] { position: absolute; left: -9999px; }
.fs-auth__preview {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--wp--preset--color--surface);
}
.fs-auth__drop-text {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.fs-auth__submit {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 2px;
	padding: 0.7em 1.4em;
	cursor: pointer;
}
.fs-auth__submit:hover { background: var(--wp--preset--color--contrast); }
.fs-auth__submit[disabled] { opacity: 0.55; cursor: progress; }

.fs-auth__status {
	margin: 0;
	min-height: 1.2em;
	font-size: 0.85rem;
}
.fs-auth__status.is-error { color: var(--wp--preset--color--accent-2); }
.fs-auth__status.is-ok { color: var(--wp--preset--color--accent); }

.fs-auth__alt {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
.fs-auth__alt a { color: var(--wp--preset--color--accent); }

.fs-auth__gate {
	max-width: 26rem;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--sans);
}

/* standalone subscribe form */
.fs-subscribe {
	font-family: var(--wp--preset--font-family--sans);
	max-width: 30rem;
}
.fs-subscribe__heading {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
}
.fs-subscribe__row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.fs-subscribe__row input {
	flex: 1 1 12rem;
	padding: 0.6rem 0.8rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.95rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	color: var(--wp--preset--color--contrast);
}
.fs-subscribe__row input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: transparent;
}
.fs-subscribe__row button {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 0.88rem;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 2px;
	padding: 0.6em 1.2em;
	cursor: pointer;
}
.fs-subscribe__row button:hover { background: var(--wp--preset--color--contrast); }
.fs-subscribe__row button[disabled] { opacity: 0.55; cursor: progress; }
.fs-subscribe__status {
	margin: 0.5rem 0 0;
	min-height: 1.1em;
	font-size: 0.82rem;
}
.fs-subscribe__status.is-error { color: var(--wp--preset--color--accent-2); }
.fs-subscribe__status.is-ok { color: var(--wp--preset--color--accent); }