/**
 * lore-portal-theme — assets/css/modal.css
 *
 * Version: 1.1.2
 *
 * Changelog:
 *   v1.1.2 — Reverted the v1.1.1 modal-register restyle (operator decision).
 *            The auth popup is intentionally distinct from the inquiry "Send
 *            Me Details" modal, so the register form returns to its original
 *            rescue-layer styling — no register-scoped overrides remain. The
 *            login form, /login, and /register pages were never touched in any
 *            of this work. The never-shipped v1.1.2 floating-label follow-up
 *            (placeholder=" " + :has() floating; functions.php v2.11.1) was
 *            abandoned and NOT deployed. The inquiry "Log in" nudge still opens
 *            this popup in sign-in mode (inquiry.js v1.0.6, unchanged). This
 *            file is byte-identical to v1.1.0 apart from this changelog note.
 *   v1.1.0 — SCOPE-7.4 Phase 3 Deploy 1 (Shape E). Close-button polished to
 *            bubble-X treatment matching the inquiry-modal close (listing.css
 *            .lore-inquiry-modal__close). Cross-modal consistency per
 *            BACKLOG §3.23. The X glyph is now drawn via CSS pseudo-
 *            elements (22×2px bars at ±45°) rather than the ×
 *            HTML entity, so font rendering of the × character no
 *            longer affects the visual. functions.php v2.0.41 removes
 *            the × from the button HTML in coordination.
 *   v1.0.2 — Border-radius polish to match the shipped /register page
 *            visual. Inputs were rendering at --radius-sm (6px) and the
 *            submit at --radius-pill (999px). The shipped page-register
 *            renders inputs + submit at ~12px rounded-rect. (The auth.css
 *            source declares pill on submit, but GeneratePress is
 *            overriding it on page-register — the visible-on-staging
 *            rendering is rounded-rect. The modal's 3-class rescue layer
 *            wins against GP, so we'd render the source-declared pill
 *            instead — visually inconsistent.) Fix: rescue-layer values
 *            switched to --radius-lg (12px) for inputs and submit. Match
 *            achieved; tracking the auth.css/GP discrepancy for the Phase
 *            6 doc batch as a follow-up to normalize source-vs-rendered.
 *
 *   v1.0.1 — (1) Suppress browser's blue focus-ring on <dialog>.
 *            (2) Form-rescue layer at 3-class specificity to beat GP +
 *                UA <dialog> defaults that defeated auth.css's 2-class
 *                form selectors.
 *
 *   v1.0.0 — Initial. SCOPE-7.4 Phase 1 modal shell.
 *
 * Auth modal overlay shell. Login + register share a single <dialog>
 * element; modes are driven by [data-mode] on the dialog root. Forms
 * inside use the .lore-auth__form ancestor-scoped rules from auth.css
 * (ADR-042) — modal.css adds no input/label/button rules, only the
 * surrounding shell.
 *
 * Loaded unconditionally on every page (the trigger lives in the
 * header). File is small; transit cost is acceptable.
 *
 * Tokens consumed (all defined in tokens.css v1.1.0):
 *   --color-bg, --color-text, --color-text-muted, --color-border-soft,
 *   --color-cabernet, --radius-lg, --space-3/4/5/6, --font-display,
 *   --font-body, --fs-base, --fs-sm, --fs-2xl, --fw-medium.
 *
 * Tokens with hardcoded fallbacks match auth.css v1.2.0's values so
 * the modal renders coherently even if tokens.css fails to load.
 *
 * Mobile-first per ADR-014. Mobile breakpoint at 599px (per SCOPE-7.4
 * §7.2 spec): below = bottom sheet, above = centered modal.
 *
 * See SCOPE-7.4-auth-modals.md §7.2 for the design intent and
 * DECISIONS.md ADR-042 for the form-rule specificity convention.
 */

/* -----------------------------------------------------------------------
 * Dialog reset
 *
 * <dialog> defaults: 1px solid border, 2px padding, white background,
 * centered via margin: auto. Strip all of that — the .__sheet child
 * carries the visible surface so the dialog is just a positioning
 * wrapper.
 * ----------------------------------------------------------------------- */

.lore-auth-modal {
	padding: 0;
	border: none;
	background: transparent;
	max-width: 100vw;
	max-height: 100vh;
	color: var(--color-text, #282828);
}

/* The browser draws a focus ring on the <dialog> element when it
   opens via showModal(). We don't want it — the dialog itself is a
   positioning wrapper, the sheet child is the visible surface. Form
   elements inside still get their own :focus-visible rings. */
.lore-auth-modal:focus,
.lore-auth-modal:focus-visible {
	outline: none;
}

.lore-auth-modal::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

/* -----------------------------------------------------------------------
 * Sheet (the visible surface)
 *
 * Desktop default: centered 420px card. Mobile override below shifts
 * to full-width bottom sheet.
 * ----------------------------------------------------------------------- */

.lore-auth-modal__sheet {
	position: relative;
	background: var(--color-bg, #ffffff);
	border: 1px solid var(--color-border-soft, #ececec);
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-6, 32px);
	width: 420px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------
 * Close button — bubble-X treatment (v1.1.0)
 *
 * Lifted verbatim from listing.css .lore-inquiry-modal__close so the
 * auth modal, inquiry modal, and (separately) the mobile hamburger
 * overlay all share one bubble close affordance. Per BACKLOG §3.23.
 *
 * The X glyph is drawn via ::before + ::after pseudo-elements (two
 * 22×2px bars rotated ±45°) rather than the &times; HTML entity, so
 * font rendering of × can't make the close button look thin/lopsided.
 * functions.php v2.0.41 removes the &times; from the button HTML.
 *
 * 44×44 touch target per convention #18. Top-right --space-2 offset
 * matches inquiry-modal placement.
 * ----------------------------------------------------------------------- */

.lore-auth-modal__close {
	position: absolute;
	top: var(--space-2, 8px);
	right: var(--space-2, 8px);
	width: 44px;
	height: 44px;
	border: none;
	background: var(--color-border-soft, #ececec);
	cursor: pointer;
	color: var(--color-text, #282828);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-round, 999px);
	-webkit-tap-highlight-color: transparent;
	transition: color 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.lore-auth-modal__close:hover,
.lore-auth-modal__close:active {
	background: var(--color-border, #d4d4d4);
}

.lore-auth-modal__close:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
}

.lore-auth-modal__close::before,
.lore-auth-modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	background: var(--color-text, #282828);
	border-radius: 1px;
}

.lore-auth-modal__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.lore-auth-modal__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* -----------------------------------------------------------------------
 * Drag handle (mobile only — visual affordance for the bottom-sheet
 * shape; not a functional swipe target in v1 per SCOPE §10).
 * ----------------------------------------------------------------------- */

.lore-auth-modal__handle {
	display: none; /* desktop hides; mobile rule below shows */
}

/* -----------------------------------------------------------------------
 * Heading
 *
 * Display font (Larken) to match auth.css .lore-auth__title.
 * Smaller than the page-title (32px → 24px in the modal) — the modal
 * is a constrained surface and the heading shouldn't dominate.
 * ----------------------------------------------------------------------- */

.lore-auth-modal__heading {
	font-family: var(--font-display, Larken, Georgia, serif);
	font-size: var(--fs-2xl, 24px);
	font-weight: 400;
	color: var(--color-text, #282828);
	margin: 0 0 var(--space-5, 20px) 0;
	line-height: 1.2;
	/* Reserve space for the close button on the right so a long heading
	   doesn't run under it. */
	padding-right: 44px;
}

/* -----------------------------------------------------------------------
 * Notice surface (inline; replaces form area pattern documented in
 * SCOPE-7.4 §4.4 — for v1 we render the notice above the form rather
 * than replacing it. Simpler and matches the existing page-level
 * notice anchor at the top of the form).
 *
 * The .__notice element is `hidden` by default — JS removes the
 * attribute when populating, adds it back on dismiss / mode switch.
 * ----------------------------------------------------------------------- */

.lore-auth-modal__notice {
	border: 1px solid var(--color-border-soft, #ececec);
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-3, 12px) var(--space-4, 16px);
	margin-bottom: var(--space-5, 20px);
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	line-height: 1.5;
}

.lore-auth-modal__notice[hidden] {
	display: none;
}

.lore-auth-modal__notice--error {
	background-color: #fcf3f3;
	border-color: #e6c8c8;
	color: #6b1a1a;
}

.lore-auth-modal__notice--success {
	background-color: #f3f8f3;
	border-color: #c8dec8;
	color: #1a4a1a;
}

/* -----------------------------------------------------------------------
 * Mode-driven form visibility
 *
 * Both forms render on every load (no AJAX swap, no "loading…" flash).
 * The [data-mode] attribute on the dialog flips which form displays.
 *
 * The forms themselves use .lore-auth__form classes from auth.css, so
 * inputs/labels/submits inherit the form-element styling without
 * needing modal-specific rules.
 * ----------------------------------------------------------------------- */

.lore-auth-modal[data-mode="login"] .lore-auth-modal__form--register {
	display: none;
}

.lore-auth-modal[data-mode="register"] .lore-auth-modal__form--login {
	display: none;
}

/* -----------------------------------------------------------------------
 * Mode-toggle link ("Don't have an account? Create one" /
 * "Already have an account? Sign in")
 *
 * Single <p> with two spans inside, one per mode. JS hides the inactive
 * span via the `hidden` attribute. Keeps the DOM small and the toggle
 * instant.
 * ----------------------------------------------------------------------- */

.lore-auth-modal__toggle-link {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	color: var(--color-text-muted, #696969);
	text-align: center;
	margin: var(--space-5, 20px) 0 0 0;
}

.lore-auth-modal__toggle-link a {
	color: var(--color-cabernet, #500000);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.lore-auth-modal__toggle-link a:hover {
	text-decoration-thickness: 2px;
}

.lore-auth-modal__toggle-link [hidden] {
	display: none;
}

/* -----------------------------------------------------------------------
 * Mobile (<=599px): bottom sheet
 *
 * <dialog> defaults to centered via margin: auto. Override to pin to
 * the bottom edge. The sheet keeps its visual identity (rounded top
 * corners only, full-width, 90vh max so the user can still see the
 * page behind the top of the sheet).
 *
 * Slide-up animation on open. The native <dialog> doesn't animate
 * .show()/.showModal() by default; this @keyframes runs once on open
 * via the animation property on .lore-auth-modal[open] (the [open]
 * attribute is set by the browser when showModal() is called).
 * ----------------------------------------------------------------------- */

@media (max-width: 599px) {
	.lore-auth-modal {
		/* Pin to bottom edge */
		margin: 0;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		max-height: 100%;
	}

	.lore-auth-modal[open] {
		animation: lore-auth-modal-slide-up 250ms ease-out;
	}

	.lore-auth-modal__sheet {
		width: 100%;
		max-width: 100%;
		border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
		padding: var(--space-5, 20px);
		max-height: 90vh;
		overflow-y: auto;
		/* Preserve room for the drag handle above the heading */
		padding-top: var(--space-3, 12px);
	}

	.lore-auth-modal__handle {
		display: block;
		width: 36px;
		height: 4px;
		border-radius: 999px;
		background: var(--color-border-soft, #ececec);
		margin: 0 auto var(--space-4, 16px) auto;
	}

	@keyframes lore-auth-modal-slide-up {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}
}

/* -----------------------------------------------------------------------
 * Form-rescue layer (added v1.0.1)
 *
 * Inside the <dialog> top-layer context, GeneratePress and/or UA
 * defaults defeat auth.css v1.2.1's two-class form selectors
 * (.lore-auth__form .foo). The screenshot evidence (label-input
 * side-by-side instead of stacked; submit button rendering as the
 * default GP slate-grey instead of cabernet) confirms specificity
 * loss in this context.
 *
 * Rescue strategy: re-assert the critical form-element rules at
 * three-class specificity (.lore-auth-modal .lore-auth__form .foo)
 * which beats any plausible GP rule. Rules are scoped tight to the
 * modal so the page-register form is unaffected.
 *
 * This is a documented deviation from SCOPE-7.4 §7.2's "modal.css
 * adds no form-element styling" rule. The rule's underlying intent
 * (don't re-style page-register; don't fork the source of truth on
 * field styling) is preserved by the modal-only scoping.
 *
 * Values mirror auth.css v1.2.1 verbatim — when auth.css changes, this
 * rescue layer must change too. If this rescue stays in place beyond
 * Phase 1, consider promoting the affected rules to a shared
 * three-class form in auth.css instead.
 * ----------------------------------------------------------------------- */

/* Field: column-stacked label + input, with gap. */
.lore-auth-modal .lore-auth__form .lore-auth__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
	margin-bottom: var(--space-4, 16px);
}

/* Field row-modifier (Remember-me + Forgot-password). */
.lore-auth-modal .lore-auth__form .lore-auth__field--row {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 12px);
	flex-wrap: wrap;
}

/* Label: stacked above input. */
.lore-auth-modal .lore-auth__form .lore-auth__label {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	font-weight: var(--fw-medium, 500);
	color: var(--color-text, #282828);
	line-height: 1.4;
}

/* Input: full-width, bordered. */
.lore-auth-modal .lore-auth__form .lore-auth__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-3, 12px) var(--space-4, 16px);
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-base, 16px);
	line-height: 1.4;
	color: var(--color-text, #282828);
	background-color: var(--color-bg, #ffffff);
	border: 1px solid var(--color-border-soft, #ececec);
	border-radius: var(--radius-lg, 12px);
	transition: border-color 120ms ease, box-shadow 120ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.lore-auth-modal .lore-auth__form .lore-auth__input:focus,
.lore-auth-modal .lore-auth__form .lore-auth__input:focus-visible {
	outline: none;
	border-color: var(--color-cabernet, #500000);
	box-shadow: 0 0 0 3px rgba(80, 0, 0, 0.15);
}

/* Help text below inputs. */
.lore-auth-modal .lore-auth__form .lore-auth__help {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-xs, 12px);
	color: var(--color-text-muted, #696969);
	line-height: 1.4;
	margin: 0;
}

/* Submit button: cabernet pill. */
.lore-auth-modal .lore-auth__form .lore-auth__submit {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-3, 12px) var(--space-5, 20px);
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-base, 16px);
	font-weight: var(--fw-medium, 500);
	color: var(--color-white, #ffffff);
	background-color: var(--color-cabernet, #500000);
	border: 1px solid var(--color-cabernet, #500000);
	border-radius: var(--radius-lg, 12px);
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
	-webkit-appearance: none;
	appearance: none;
	min-height: 48px;
}

.lore-auth-modal .lore-auth__form .lore-auth__submit:hover {
	background-color: #3d0000;
	border-color: #3d0000;
}

.lore-auth-modal .lore-auth__form .lore-auth__submit:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
}

.lore-auth-modal .lore-auth__form .lore-auth__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Two-column row (first/last name on register form). */
.lore-auth-modal .lore-auth__form .lore-auth__row--split {
	display: flex;
	flex-direction: row;
	gap: var(--space-3, 12px);
	margin-bottom: var(--space-4, 16px);
}

.lore-auth-modal .lore-auth__form .lore-auth__row--split .lore-auth__field {
	flex: 1;
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.lore-auth-modal .lore-auth__form .lore-auth__row--split {
		flex-direction: column;
		gap: 0;
	}
	.lore-auth-modal .lore-auth__form .lore-auth__row--split .lore-auth__field {
		margin-bottom: var(--space-4, 16px);
	}
}

/* Honeypot — visually hidden but accessible to bots. */
.lore-auth-modal .lore-auth__form .lore-auth__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Turnstile widget container. */
.lore-auth-modal .lore-auth__form .lore-auth__turnstile {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-4, 16px);
}

/* Checkbox composite (Remember me). */
.lore-auth-modal .lore-auth__form .lore-auth__checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 8px);
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	color: var(--color-text, #282828);
	cursor: pointer;
	line-height: 1.4;
}

.lore-auth-modal .lore-auth__form .lore-auth__checkbox input[type="checkbox"] {
	margin: 0;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--color-cabernet, #500000);
}

/* Forgot-password help link. */
.lore-auth-modal .lore-auth__form .lore-auth__help-link {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	color: var(--color-cabernet, #500000);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.lore-auth-modal .lore-auth__form .lore-auth__help-link:hover {
	text-decoration-thickness: 2px;
}

/* -----------------------------------------------------------------------
 * Prevent body scroll while the modal is open.
 *
 * <dialog>.showModal() does NOT lock background scroll — it only
 * applies `inert` to background elements (focus and click are blocked
 * but scroll passes through). Lock scroll via :has() on html, matching
 * the existing pattern in header.css for the mobile overlay.
 *
 * Note: :has() has universal support in 2026 (Safari 15.4+, Chrome
 * 105+, Firefox 121+ — matches the <dialog> baseline).
 * ----------------------------------------------------------------------- */

html:has(.lore-auth-modal[open]) {
	overflow: hidden;
}