/* AAF Auth — Actors & Filmmakers. Colors come from settings via CSS variables. */
:root {
	--aaf-primary: #00B4FF;
	--aaf-accent: #D62B30;
	--aaf-text: #15171C;
	--aaf-bg: #FFFFFF;
	--aaf-radius: 16px;
}

.aaf-auth, .aaf-modal {
	--aaf-muted: color-mix(in srgb, var(--aaf-text) 58%, transparent);
	--aaf-line: color-mix(in srgb, var(--aaf-text) 13%, transparent);
	--aaf-soft: color-mix(in srgb, var(--aaf-primary) 8%, var(--aaf-bg));
	--aaf-ring: color-mix(in srgb, var(--aaf-primary) 30%, transparent);
	--aaf-field-r: calc(var(--aaf-radius) * .65);
	/* Field colours — overridden from Settings → Design when set. */
	--aaf-input-text: var(--aaf-text);
	--aaf-input-bg: var(--aaf-bg);
	--aaf-input-border: var(--aaf-line);
	--aaf-label: var(--aaf-text);
	--aaf-placeholder: color-mix(in srgb, var(--aaf-input-text) 40%, transparent);
}

.aaf-auth, .aaf-auth *, .aaf-modal, .aaf-modal * { box-sizing: border-box; }

.aaf-auth {
	color: var(--aaf-text);
	font-size: 15px;
	line-height: 1.5;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
}

.aaf-auth .aaf-card {
	position: relative;
	background: var(--aaf-bg);
	border-radius: var(--aaf-radius);
	padding: 30px 28px 26px;
	box-shadow: 0 1px 2px rgba(10, 25, 45, .06), 0 18px 50px rgba(10, 25, 45, .10);
	overflow: hidden;
}
.aaf-auth .aaf-card::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 4px;
	background: linear-gradient(90deg, var(--aaf-primary) 0%, var(--aaf-primary) 62%, var(--aaf-accent) 100%);
}
.aaf-auth--modal .aaf-card { box-shadow: none; }

/* Header */
.aaf-auth .aaf-head { text-align: center; margin-bottom: 18px; }
.aaf-auth .aaf-logo { display: block; width: 210px; max-width: 70%; height: auto; margin: 2px auto 14px; }
.aaf-auth .aaf-title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--aaf-text); letter-spacing: -.01em; }
.aaf-auth .aaf-sub { margin: 6px 0 0; color: var(--aaf-muted); font-size: 14px; }

/* Tabs */
.aaf-auth .aaf-tabs {
	position: relative; display: grid; grid-template-columns: 1fr 1fr;
	background: var(--aaf-soft); border-radius: 999px; padding: 4px; margin: 0 0 18px;
}
.aaf-auth .aaf-tab {
	position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer;
	font: inherit; font-weight: 600; font-size: 14px; color: var(--aaf-muted);
	padding: 9px 12px; border-radius: 999px; transition: color .2s;
}
.aaf-auth .aaf-tab.is-active { color: var(--aaf-text); }
.aaf-auth .aaf-tabs__ink {
	position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
	background: var(--aaf-bg); border-radius: 999px; box-shadow: 0 1px 3px rgba(10, 25, 45, .12);
	transition: transform .28s cubic-bezier(.3, .7, .2, 1);
}
.aaf-auth[data-current="join"] .aaf-tabs__ink { transform: translateX(100%); }
.aaf-auth[data-current="verify"] .aaf-tabs,
.aaf-auth[data-current="sent"] .aaf-tabs,
.aaf-auth[data-current="pending"] .aaf-tabs,
.aaf-auth.is-google .aaf-tabs { display: none; }

/* Panels & fields */
.aaf-auth .aaf-panel[hidden], .aaf-auth [hidden] { display: none !important; }
.aaf-auth .aaf-panel { animation: aaf-in .25s ease both; }
.aaf-auth .aaf-panel--center { text-align: center; }
@keyframes aaf-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.aaf-auth .aaf-form { display: grid; gap: 14px; margin: 0; }
.aaf-auth .aaf-field { display: grid; gap: 6px; }
.aaf-auth .aaf-field > label, .aaf-auth .aaf-types legend {
	font-size: 13px; font-weight: 600; color: var(--aaf-label); margin: 0; padding: 0;
}
.aaf-auth .aaf-help { font-size: 12px; color: var(--aaf-muted); }
.aaf-auth .aaf-opt { font-weight: 400; color: var(--aaf-muted); }

/* Field colours use !important so theme styles can't make typed text invisible. */
.aaf-auth .aaf-input {
	width: 100%; margin: 0; font: inherit; font-size: 16px;
	color: var(--aaf-input-text) !important; -webkit-text-fill-color: var(--aaf-input-text) !important;
	caret-color: var(--aaf-input-text);
	background: var(--aaf-input-bg) !important; border: 1.5px solid var(--aaf-input-border); border-radius: var(--aaf-field-r);
	padding: 11px 14px; min-height: 46px; box-shadow: none; outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.aaf-auth textarea.aaf-input { min-height: 88px; resize: vertical; }
.aaf-auth .aaf-input::placeholder { color: var(--aaf-placeholder) !important; -webkit-text-fill-color: var(--aaf-placeholder) !important; opacity: 1; }
.aaf-auth select.aaf-input option { color: var(--aaf-input-text); background: var(--aaf-input-bg); }
/* Browser autofill would otherwise paint its own yellow/blue background and text colour. */
.aaf-auth .aaf-input:-webkit-autofill,
.aaf-auth .aaf-input:-webkit-autofill:hover {
	-webkit-text-fill-color: var(--aaf-input-text) !important;
	box-shadow: 0 0 0 1000px var(--aaf-input-bg) inset !important;
	transition: background-color 99999s ease-out 0s;
}
.aaf-auth .aaf-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--aaf-input-text) !important;
	box-shadow: 0 0 0 1000px var(--aaf-input-bg) inset, 0 0 0 4px var(--aaf-ring) !important;
}
.aaf-auth .aaf-input:focus { border-color: var(--aaf-primary); box-shadow: 0 0 0 4px var(--aaf-ring); }
.aaf-auth .aaf-input[aria-invalid="true"] { border-color: var(--aaf-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aaf-accent) 18%, transparent); }
.aaf-auth .aaf-input[readonly] { background: var(--aaf-soft) !important; }

.aaf-auth .aaf-code {
	text-align: center; font-size: 28px; letter-spacing: .5em; padding-left: calc(14px + .5em);
	font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-height: 60px;
}

/* Password */
.aaf-auth .aaf-pw { position: relative; }
.aaf-auth .aaf-pw .aaf-input { padding-right: 48px; }
.aaf-auth .aaf-pw__toggle {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	appearance: none; border: 0; background: none; color: var(--aaf-muted); cursor: pointer;
	width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; padding: 0;
}
.aaf-auth .aaf-pw__toggle:hover, .aaf-auth .aaf-pw__toggle.is-on { color: var(--aaf-primary); }

/* Segmented method switch */
.aaf-auth .aaf-seg {
	display: flex; gap: 4px; padding: 4px; border-radius: calc(var(--aaf-field-r) + 2px);
	border: 1.5px solid var(--aaf-line);
}
.aaf-auth .aaf-seg__opt { flex: 1; position: relative; margin: 0; cursor: pointer; }
.aaf-auth .aaf-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.aaf-auth .aaf-seg__opt span {
	display: block; text-align: center; padding: 8px 6px; border-radius: calc(var(--aaf-field-r) - 2px);
	font-size: 13px; font-weight: 600; color: var(--aaf-muted); transition: background .15s, color .15s; white-space: nowrap;
}
.aaf-auth .aaf-seg__opt input:checked + span { background: var(--aaf-primary); color: #fff; }
.aaf-auth .aaf-seg__opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--aaf-ring); }

/* Member type cards */
.aaf-auth .aaf-types { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-width: 0; }
.aaf-auth .aaf-types legend { grid-column: 1 / -1; margin-bottom: 6px; float: left; width: 100%; }
.aaf-auth .aaf-type { position: relative; margin: 0; cursor: pointer; display: block; }
.aaf-auth .aaf-type input { position: absolute; opacity: 0; pointer-events: none; }
.aaf-auth .aaf-type__card {
	height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
	padding: 14px 6px 12px; border-radius: var(--aaf-field-r); border: 1.5px solid var(--aaf-line);
	transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.aaf-auth .aaf-type:hover .aaf-type__card { border-color: color-mix(in srgb, var(--aaf-primary) 55%, transparent); }
.aaf-auth .aaf-type__icon {
	width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
	color: var(--aaf-primary); background: var(--aaf-soft); margin-bottom: 4px; transition: background .15s, color .15s;
}
.aaf-auth .aaf-type__label { font-weight: 700; font-size: 13px; line-height: 1.25; }
.aaf-auth .aaf-type__desc { font-size: 11.5px; line-height: 1.3; color: var(--aaf-muted); }
.aaf-auth .aaf-type input:checked + .aaf-type__card {
	border-color: var(--aaf-primary); background: var(--aaf-soft); box-shadow: 0 0 0 1px var(--aaf-primary) inset;
}
.aaf-auth .aaf-type input:checked + .aaf-type__card .aaf-type__icon { background: var(--aaf-primary); color: #fff; }
.aaf-auth .aaf-type input:focus-visible + .aaf-type__card { box-shadow: 0 0 0 4px var(--aaf-ring); }
.aaf-auth .aaf-types.is-invalid .aaf-type__card { border-color: color-mix(in srgb, var(--aaf-accent) 60%, transparent); }

/* Checkbox */
.aaf-auth .aaf-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--aaf-muted); cursor: pointer; margin: 0; }
.aaf-auth .aaf-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--aaf-primary); }
.aaf-auth .aaf-check a { color: var(--aaf-primary); font-weight: 600; text-decoration: none; }
.aaf-auth .aaf-check a:hover { text-decoration: underline; }
.aaf-auth .aaf-check.is-invalid { color: var(--aaf-accent); }
.aaf-auth .aaf-check--inline { align-items: center; }
.aaf-auth .aaf-check--inline input { margin: 0; }

/* Rows, hints, links */
.aaf-auth .aaf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.aaf-auth .aaf-row--center { justify-content: center; color: var(--aaf-muted); }
.aaf-auth .aaf-hint { margin: -4px 0 0; font-size: 13px; color: var(--aaf-muted); }
.aaf-auth .aaf-lead { margin: 0 0 4px; color: var(--aaf-muted); text-align: center; overflow-wrap: anywhere; }
.aaf-auth .aaf-lead strong { color: var(--aaf-text); }
.aaf-auth .aaf-link {
	appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
	font: inherit; font-size: 13.5px; font-weight: 600; color: var(--aaf-primary); text-decoration: none;
}
.aaf-auth .aaf-link:hover { text-decoration: underline; }
.aaf-auth .aaf-link:disabled { color: var(--aaf-muted); cursor: default; text-decoration: none; }
.aaf-auth .aaf-switch { text-align: center; margin: 18px 0 0; font-size: 13.5px; color: var(--aaf-muted); }

/* Buttons */
.aaf-auth .aaf-btn {
	appearance: none; width: 100%; border: 0; cursor: pointer; margin: 2px 0 0;
	font: inherit; font-weight: 700; font-size: 15.5px; letter-spacing: .01em; line-height: 1.2;
	color: #fff; background: var(--aaf-primary); border-radius: 999px; padding: 14px 20px; min-height: 50px;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--aaf-primary) 35%, transparent);
	transition: transform .12s, box-shadow .15s, filter .15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.aaf-auth .aaf-btn:hover { filter: brightness(1.05); box-shadow: 0 8px 24px color-mix(in srgb, var(--aaf-primary) 45%, transparent); }
.aaf-auth .aaf-btn:active { transform: translateY(1px); }
.aaf-auth .aaf-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--aaf-ring); }
.aaf-auth .aaf-btn[disabled] { opacity: .7; cursor: progress; }
.aaf-auth .aaf-btn.is-busy::after {
	content: ""; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: aaf-spin .7s linear infinite;
}
.aaf-auth .aaf-btn--ghost { background: transparent; color: var(--aaf-primary); box-shadow: inset 0 0 0 1.5px var(--aaf-primary); margin-top: 16px; }
.aaf-auth .aaf-btn--ghost:hover { background: var(--aaf-soft); box-shadow: inset 0 0 0 1.5px var(--aaf-primary); }
@keyframes aaf-spin { to { transform: rotate(360deg); } }

/* Alert */
.aaf-auth .aaf-alert {
	margin: 0 0 14px; padding: 11px 14px; border-radius: var(--aaf-field-r); font-size: 13.5px; line-height: 1.45;
	background: color-mix(in srgb, var(--aaf-accent) 9%, var(--aaf-bg)); color: color-mix(in srgb, var(--aaf-accent) 85%, #000);
	border: 1px solid color-mix(in srgb, var(--aaf-accent) 25%, transparent);
}
.aaf-auth .aaf-alert.is-ok {
	background: var(--aaf-soft); color: var(--aaf-text);
	border-color: color-mix(in srgb, var(--aaf-primary) 30%, transparent);
}

/* Turnstile (invisible for most people; shows a checkbox only if needed) */
.aaf-auth .aaf-turnstile { display: flex; justify-content: center; }
.aaf-auth .aaf-turnstile:empty { display: none; }
.aaf-auth .aaf-turnstile iframe { max-width: 100%; }

/* Divider + Google */
.aaf-auth .aaf-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--aaf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.aaf-auth .aaf-or::before, .aaf-auth .aaf-or::after { content: ""; flex: 1; height: 1px; background: var(--aaf-line); }
.aaf-auth .aaf-google { display: flex; justify-content: center; min-height: 44px; }
.aaf-auth .aaf-google-note {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px;
	padding: 10px 14px; border-radius: var(--aaf-field-r); background: var(--aaf-soft);
}
.aaf-auth .aaf-google-note svg { color: var(--aaf-primary); flex: none; }
.aaf-auth .aaf-google-note span { font-weight: 600; overflow-wrap: anywhere; }
.aaf-auth .aaf-google-note .aaf-link { margin-left: auto; font-size: 12.5px; }

.aaf-auth .aaf-sent-icon {
	width: 68px; height: 68px; border-radius: 50%; margin: 4px auto 14px; display: grid; place-items: center;
	background: var(--aaf-soft); color: var(--aaf-primary);
}

/* Signed in */
.aaf-auth--signed .aaf-card { text-align: center; }
.aaf-auth--signed p { margin: 6px 0 0; }

/* Utilities */
.aaf-auth .aaf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.aaf-auth .aaf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Popup */
.aaf-modal { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 16px; }
.aaf-modal[hidden] { display: none; }
.aaf-modal__backdrop {
	position: absolute; inset: 0; background: rgba(8, 14, 24, .55);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: aaf-fade .2s ease both;
}
.aaf-modal__dialog {
	position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
	overflow: auto; border-radius: var(--aaf-radius); background: var(--aaf-bg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35); animation: aaf-pop .28s cubic-bezier(.2, .8, .2, 1) both;
	overscroll-behavior: contain;
}
.aaf-modal__close {
	position: absolute; top: 12px; right: 12px; z-index: 2; appearance: none; border: 0; cursor: pointer;
	width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0;
	background: var(--aaf-soft); color: var(--aaf-text); transition: background .15s;
}
.aaf-modal__close:hover { background: color-mix(in srgb, var(--aaf-primary) 18%, var(--aaf-bg)); }
.aaf-modal__close:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--aaf-ring); }
html.aaf-lock { overflow: hidden; }
@keyframes aaf-fade { from { opacity: 0; } }
@keyframes aaf-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }

@media (max-width: 480px) {
	.aaf-auth .aaf-card { padding: 26px 18px 22px; }
	.aaf-auth .aaf-types { gap: 6px; }
	.aaf-auth .aaf-type__desc { display: none; }
	.aaf-auth .aaf-type__card { padding: 12px 4px 10px; }
	.aaf-modal { padding: 0; align-items: end; }
	.aaf-modal__dialog { max-width: none; max-height: 94vh; max-height: 94dvh; border-radius: var(--aaf-radius) var(--aaf-radius) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.aaf-auth *, .aaf-modal * { animation: none !important; transition: none !important; }
}