/**
 * Academy login (template-academy-login.php) — branded two-panel sign-in.
 * Navy brand panel + statistics-squares device beside a white form panel.
 * Tokens only, radius 0 (global reset), CLAUDE.md §9 input/button recipes.
 *
 * @package Alrasly
 */

.acl{ display:grid; grid-template-columns:1fr; }

/* ---------- brand panel (navy) ---------- */
.acl__brand{
	background:var(--navy);
	color:var(--white);
	padding:var(--space-7) var(--space-5);
	position:relative;
	overflow:hidden;
}
/* Plain navy ground — the statistics-squares device below is the brand motif here;
   no decorative grid on this focused form surface. */
.acl__brand-inner{ position:relative; max-width:34rem; margin:0 auto; }
.acl__logo{ display:inline-block; margin-bottom:var(--space-6); }
.acl__logo img{ display:block; height:44px; width:auto; }
.acl__kicker{ color:var(--sky); margin:0 0 var(--space-2); }
.acl__headline{ font-size:var(--fs-h1); line-height:var(--lh-h1); color:var(--white); margin:0 0 var(--space-4); max-width:16ch; }
.acl__blurb{ color:rgba(255,255,255,.82); max-width:46ch; margin:0; }

/* statistics-squares device — self-contained box, flat brand fills, gutter 0.
   Positioned inside its OWN fixed-size box (not off another element). */
.acl__squares{ position:relative; width:168px; height:120px; margin-top:var(--space-7); }
.acl__sq{ position:absolute; }
.acl__sq--1{ width:48px; height:48px; background:var(--navy-active); top:0;    left:0; }
.acl__sq--2{ width:48px; height:48px; background:var(--blue);        top:0;    left:48px; }
.acl__sq--3{ width:48px; height:48px; background:var(--purple-blue); top:48px; left:48px; }
.acl__sq--4{ width:48px; height:48px; background:var(--sky);         top:48px; left:96px; }
.acl__sq--5{ width:24px; height:24px; background:var(--blue);        top:0;    left:96px; }
.js .acl__squares[data-reveal]{ opacity:1; transform:none; transition:none; }
.js .acl__squares[data-reveal] .acl__sq{ opacity:0; transform:translateY(12px); transition:opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1); }
.js .acl__squares[data-reveal].is-visible .acl__sq{ opacity:1; transform:none; }
.js .acl__squares[data-reveal].is-visible .acl__sq--2{ transition-delay:.06s; }
.js .acl__squares[data-reveal].is-visible .acl__sq--3{ transition-delay:.12s; }
.js .acl__squares[data-reveal].is-visible .acl__sq--4{ transition-delay:.18s; }
.js .acl__squares[data-reveal].is-visible .acl__sq--5{ transition-delay:.24s; }

/* ---------- form panel (white) ---------- */
.acl__panel{
	background:var(--white);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:var(--space-8) var(--space-6);
}
.acl__form-wrap{ width:100%; max-width:26rem; }
.acl__title{ font-size:var(--fs-h2); line-height:var(--lh-h2); margin:0; color:var(--navy); }
.acl__sub{ color:var(--ink); margin:var(--space-2) 0 var(--space-6); }

.acl__errors{ background:var(--sky); padding:var(--space-3) var(--space-4); margin:0 0 var(--space-5); }
.acl__errors p{ margin:0 0 var(--space-1); color:var(--navy); font-size:var(--fs-small); }  /* navy on sky = 10.4:1 AAA */
.acl__errors p:last-child{ margin:0; }

/* two fields side by side (name row, password + confirm) — stack on narrow panels */
.acl__row2{ display:grid; grid-template-columns:1fr; gap:0 var(--space-4); }
@media (min-width:480px){ .acl__row2{ grid-template-columns:1fr 1fr; } }

.acl__field{ display:block; margin-bottom:var(--space-4); }
.acl__label{ display:block; font-size:var(--fs-small); font-weight:var(--fw-medium); color:var(--navy); margin-bottom:var(--space-1); }
.acl__input{
	width:100%;
	padding:8px 12px;                 /* §9 input recipe */
	border:1px solid var(--ink);
	background:var(--white);
	color:var(--ink);
	font:inherit;
	line-height:1.5;
}
.acl__input:focus{ outline:none; border-color:var(--focus-ring); box-shadow:inset 0 0 0 1px var(--focus-ring); }

.acl__meta{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); font-size:var(--fs-small); }
.acl__remember{ display:flex; align-items:center; gap:var(--space-2); color:var(--ink); cursor:pointer; }
.acl__remember input{ width:16px; height:16px; accent-color:var(--blue); }
.acl__forgot{ color:var(--blue); white-space:nowrap; }
.acl__forgot:hover{ color:var(--blue-hover); }

.acl__submit{ width:100%; }

.acl__alt{ margin:var(--space-6) 0 0; font-size:var(--fs-small); color:var(--ink); }
.acl__alt a{ color:var(--blue); font-weight:var(--fw-semibold); }
.acl__alt a:hover{ color:var(--blue-hover); }

/* ---------- desktop: two columns ---------- */
@media (min-width:900px){
	.acl{ grid-template-columns:1.05fr 1fr; min-height:calc(100vh - 220px); }
	.acl__brand{ padding:var(--space-9) var(--space-8); display:flex; align-items:center; }
	.acl__panel{ padding:var(--space-9) var(--space-8); }
	.acl__logo{ margin-bottom:var(--space-7); }
	.acl__squares{ width:210px; height:150px; margin-top:var(--space-8); }
	.acl__sq--1{ width:60px; height:60px; top:0; left:0; }
	.acl__sq--2{ width:60px; height:60px; top:0; left:60px; }
	.acl__sq--3{ width:60px; height:60px; top:60px; left:60px; }
	.acl__sq--4{ width:60px; height:60px; top:60px; left:120px; }
	.acl__sq--5{ width:30px; height:30px; top:0; left:120px; }
}

@media (prefers-reduced-motion:reduce){
	.js .acl__squares[data-reveal] .acl__sq{ opacity:1; transform:none; transition:none; }
}