/* Attendee account screens (resources/views/login/_account.blade.php):
   sign in, forgotten password, new password, registration closed.

   Every edition at once. The colours and type are custom properties that
   public/errors/<slug>.css sets on .pse--<slug>, which the section carries,
   so the summit reads maroon on forest and AI Week plum on purple from this
   one file. Selectors are scoped to .acct and set what they need outright,
   because the inherited theme styles bare inputs, links and buttons. */

.acct {
	padding: clamp(40px, 6vw, 88px) 0;
	background: var(--pse-page);
	color: var(--pse-heading);
	font-family: var(--pse-text);
	font-size: 16px;
	line-height: 1.6;
}
.acct[dir="rtl"] {
	--pse-text: Almarai, Tahoma, sans-serif;
	--pse-display: Almarai, Tahoma, sans-serif;
	--pse-mono: Almarai, Tahoma, sans-serif;
}
.acct *, .acct *::before, .acct *::after { box-sizing: border-box; }

.acct-shell {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
}

/* ---------- the event, on the edition's ink ---------- */
.acct-aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: clamp(28px, 4vw, 48px);
	padding-top: 72px;
	background: var(--pse-ink);
	color: #fff;
	border-start-start-radius: 18px;
	border-end-start-radius: 18px;
	overflow: hidden;
}
/* The summit's tatreez band across the top; AI Week defines no band. */
.acct-band {
	position: absolute; inset-inline: 0; top: 0; height: 26px;
	background: var(--pse-on-ink); opacity: .55;
	-webkit-mask: var(--pse-band-src) repeat-x center / auto 100%;
	        mask: var(--pse-band-src) repeat-x center / auto 100%;
}
.pse--aiweek .acct-band { display: none; }

.acct .acct-kicker {
	margin: 0 0 10px;
	font-family: var(--pse-mono); font-size: 13px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: var(--pse-on-ink);
}
.acct .acct-event {
	margin: 0;
	font-family: var(--pse-display); font-weight: 700; line-height: 1.12;
	font-size: clamp(26px, 3vw, 36px); letter-spacing: -.01em; color: #fff;
	text-wrap: balance;
}
.acct .acct-when { margin: 0; font-family: var(--pse-mono); font-size: 14px; color: var(--pse-on-ink); }
.acct .acct-event + .acct-when { margin-top: 12px; }
.acct[dir="rtl"] .acct-kicker, .acct[dir="rtl"] .acct-when { letter-spacing: 0; }

/* ---------- the form, on white ---------- */
.acct-main {
	padding: clamp(28px, 4.5vw, 56px);
	background: #fff;
	border: 1px solid var(--pse-line);
	border-inline-start: 0;
	border-start-end-radius: 18px;
	border-end-end-radius: 18px;
}
.acct .acct-title {
	margin: 0;
	font-family: var(--pse-display); font-weight: 700; line-height: 1.15;
	font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.01em; color: var(--pse-heading);
	text-transform: none;
}
.acct .acct-lede { margin: 12px 0 0; max-width: 46ch; font-size: 16px; color: var(--pse-heading); opacity: .78; }

.acct-form { display: grid; gap: 18px; margin-top: 28px; }
.acct-field { display: grid; gap: 7px; }
.acct .acct-field label {
	margin: 0; font-family: var(--pse-text); font-size: 14px; font-weight: 600;
	letter-spacing: 0; text-transform: none; color: var(--pse-heading);
}
.acct .acct-input {
	width: 100%; min-height: 50px; margin: 0; padding: 12px 15px;
	font: inherit; font-size: 16px; color: var(--pse-heading);
	background: #fff; border: 1px solid var(--pse-line); border-radius: 10px;
	box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.acct .acct-input:focus { outline: none; border-color: var(--pse-accent); box-shadow: 0 0 0 3px var(--pse-wash); }
/* jquery-form-validator's inline messages */
.acct .form-error { display: block; margin-top: 4px; font-size: 14px; color: var(--pse-accent); }

.acct .acct-submit,
.acct .acct-ghost {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding: 13px 26px; margin: 0;
	font-family: var(--pse-text); font-size: 16px; font-weight: 700; letter-spacing: 0;
	text-transform: none; text-decoration: none; line-height: 1.2;
	border-radius: var(--pse-radius); cursor: pointer;
	transition: background-color .2s cubic-bezier(.23, 1, .32, 1), transform .16s cubic-bezier(.23, 1, .32, 1);
}
.acct .acct-submit { width: 100%; margin-top: 6px; background: var(--pse-accent); color: #fff; border: 0; }
.acct .acct-submit:hover { background: color-mix(in srgb, var(--pse-accent) 82%, #000); color: #fff; }
.acct .acct-submit:active, .acct .acct-ghost:active { transform: scale(.98); }
.acct .acct-ghost { background: transparent; color: var(--pse-accent); border: 2px solid var(--pse-accent); }
.acct .acct-ghost:hover { background: var(--pse-wash); color: var(--pse-accent); }
.acct :focus-visible { outline: 3px solid var(--pse-accent); outline-offset: 3px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.acct-actions .acct-submit { width: auto; margin: 0; }

.acct-links {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
	margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--pse-line);
	font-size: 15px;
}
.acct .acct-links p { margin: 0; color: var(--pse-heading); }
.acct .acct-links a {
	display: inline-flex; align-items: center; min-height: 44px;
	color: var(--pse-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.acct .acct-links a:hover { color: var(--pse-heading); }

.acct-alert {
	margin: 22px 0 0; padding: 13px 16px; border-radius: 10px;
	background: var(--pse-wash); border-inline-start: 4px solid var(--pse-accent);
	color: var(--pse-heading); font-size: 15px;
}
.acct-alert--ok { border-inline-start-color: var(--pse-heading); }
.acct-alert p { margin: 0 0 4px; font-weight: 700; }
.acct-alert ul { margin: 0; padding-inline-start: 20px; }
.acct-alert a { color: var(--pse-accent); }

@media (max-width: 767px) {
	.acct-shell { grid-template-columns: minmax(0, 1fr); }
	.acct-aside {
		padding: 44px 22px 22px;
		border-radius: 16px 16px 0 0;
	}
	.acct .acct-event { font-size: 24px; }
	.acct-main {
		border-inline-start: 1px solid var(--pse-line);
		border-top: 0;
		border-radius: 0 0 16px 16px;
	}
	.acct-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.acct .acct-submit, .acct .acct-ghost { transition: none; }
	.acct .acct-submit:active, .acct .acct-ghost:active { transform: none; }
}