/* ============================================================================================
   AndyStrategy — the sign-in page.

   This is the marketing site's sign-in design (website/login.html, website/assets/css/auth.css)
   brought into the application, because there is now one sign-in page rather than two. It is
   self-contained on purpose: the page it styles is rendered without the application's theme layout,
   so none of bootstrap, abound.css or andy-ui.css is loaded with it, and everything the design uses
   — the tokens, the reset, the lockup, the button — is repeated here rather than inherited from
   website/assets/css/site.css, which this application cannot serve.

   The tokens are the ones sampled from the design mockups (#001838 navy, #0068f8 blue), not the
   brand pack's own palette (#0B2B5B / #2563EB). Which of the two the product should wear is still
   an open decision, and it is recorded in website/ASSETS.md §2. When it is settled, this block and
   the one in website/assets/css/site.css move together.

   Scoped to body.auth-page rather than :root, so that loading this sheet can never reach a page
   that is not the sign-in page.
   ============================================================================================ */

body.auth-page{
	--navy:#001838;
	--navy-2:#002040;
	--ink:#001838;
	--body:#4c5c72;
	--muted:#7a869a;
	--line:#e6ebf2;
	--line-soft:#eef2f6;
	--bg:#f7f9fc;
	--tint:#f0f8f8;
	--white:#fff;
	--blue:#0068f8;
	--blue-dark:#0057d1;
	--radius:12px;

	margin:0;background:var(--bg);color:var(--body);
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
/* The reset, scoped with :where() so that it stays at the specificity of a bare `a{}` / `p{}` / `ul{}`
   — which is what the marketing sheet wrote, and what the components below are written against.
   Written as `body.auth-page a` and `body.auth-page p` it outranked every component rule that touches
   the same property (a class is worth less than a class plus an element), and did so invisibly:
   the signup card's button label inherited the dark body colour and rendered dark grey on blue,
   `.auth__lede`'s margins and `.benefits`' bottom margin were forced to zero, and the three headings
   took the reset's line-height and letter-spacing instead of the design's. Nothing errored; the page
   was just quietly not the design. */
:where(body.auth-page) *,
:where(body.auth-page) *::before,
:where(body.auth-page) *::after{box-sizing:border-box}
:where(body.auth-page) img{max-width:100%;display:block}
:where(body.auth-page) a{color:inherit;text-decoration:none}
:where(body.auth-page) h1,
:where(body.auth-page) h2,
body.auth-page h3{margin:0;line-height:1.15;letter-spacing:-.02em}
/* No colour on the headings above, and that is deliberate: every heading on this page names its own
   colour, and a reset that sets one only has to be one class more specific than the design's rule to
   paint the headline dark navy on the dark photograph — which is exactly what happened, and is
   invisible in anything but a screenshot. */
:where(body.auth-page) p{margin:0}
:where(body.auth-page) ul{margin:0;padding:0;list-style:none}

/* --- the lockup and the button, as the marketing page draws them ------------------------- */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand__logo{height:26px;width:auto;display:block}
.brand--center{justify-content:center;margin-bottom:16px}

.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	padding:12px 20px;border:1px solid transparent;border-radius:9px;
	/* 48px: the primary buttons on these pages measured 42px, which is under the 44px floor for a finger and
	   these are the buttons a new customer presses first. */
	min-height:48px;
	font-size:14px;font-weight:600;cursor:pointer;
	transition:background .15s,border-color .15s,transform .15s;
}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(0,104,248,.28)}
.btn--primary:hover{background:var(--blue-dark)}
.btn--block{width:100%}

/* ============================================================================================
   The page itself: the photograph and the promise on the left, the form on the right.
   ============================================================================================ */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}

/* The measurements below are the mockup's (website/design/login-mockup.png, a 1440x1510 design
   exported at 85%), read out of the pixels with .dsh/probe-line.php rather than estimated:
   the card is 473px wide with its top at y=123 in a 1225-wide image, its padding is 41px, and the
   primary button inside it is 392x38. Scaled up, that is a 556px card with 48px padding and its top
   at 145. The first version of this sheet used the marketing page's numbers (404px card, 26px
   padding, top at 57) and was visibly a shrunken copy of the design — the card a third narrower and
   the first field two thirds of the way up the page. */

/* --- the left panel ---------------------------------------------------------------------- */
/* The summit photograph the design uses, with the navy gradient over it: the left third has to
   stay dark enough for the headline to sit on. The dashed route and the flag are drawn over the
   photograph in the markup, positioned to meet the summit in the picture. */
.auth__aside{
	position:relative;overflow:hidden;color:#cfe0f1;
	background:#071d33 url("../img/auth-summit.jpg") center/cover no-repeat;
}
/* The photograph is 245 KB at 1024x1536, and on a phone the panel it fills is the width of the handset — so
   most of those bytes are pixels nobody sees. On the registration page, which is the one a campaign visitor
   actually converts on, it was 83% of everything they downloaded. Below 700px the same picture is served from
   a 640px copy (83 KB): still wider than a phone at more than one pixel per point, and `cover` crops it to the
   panel exactly as before, so the composition is unchanged. Above 700px nothing changes at all. */
@media (max-width:700px){
	.auth__aside{background-image:url("../img/auth-summit-sm.jpg")}
}
.auth__aside::before{
	content:"";position:absolute;inset:0;z-index:0;
	background:linear-gradient(180deg,rgba(0,24,56,.55) 0%,rgba(0,20,44,.72) 55%,rgba(0,16,40,.88) 100%);
}
.auth__art{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.auth__aside-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:0;padding:46px 56px 40px;max-width:700px}
.auth__eyebrow{margin:40px 0 14px;color:#6fc9f5;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.auth__title{margin:0;color:#fff;font-size:52px;font-weight:800;line-height:1.08;letter-spacing:-.03em}
.auth__title span{color:#8fc6ff}
.auth__lede{margin:19px 0 35px;max-width:38ch;color:#c2d3e5;font-size:15px;line-height:1.65}

.benefits{display:flex;flex-direction:column;gap:22px;margin-bottom:33px}
.benefits li{display:flex;align-items:center;gap:13px}
.benefits strong{display:block;color:#fff;font-size:15px;font-weight:700}
.benefits li>span:last-child{color:#b7c9dc;font-size:13px;line-height:1.5;max-width:34ch}
.benefit__icon{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px;border-radius:50%}
.benefit__icon svg{width:21px;height:21px;color:#fff}
.benefit__icon--navy{background:#1b3a63}
.benefit__icon--blue{background:#2a7fe0}
.benefit__icon--violet{background:#7b4bd8}
.benefit__icon--amber{background:#f0a92b}

.auth__motto{margin:30px 0 0;color:#7fa8cd;font-size:13px}

/* --- the form panel --------------------------------------------------------------------- */
.auth__main{position:relative;display:flex;justify-content:center;align-items:flex-start;padding:40px 70px 40px}
/* "Back to home", which the design puts in the form panel's top corner and the first version of this
   page dropped because the application had no home to point at. It has one now that the site and the
   application share a domain: the marketing home is the root. */
.auth__back{position:absolute;top:52px;right:28px;color:var(--blue);font-size:14px;font-weight:700;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-12px -6px}
.auth__back:hover{color:var(--blue-dark)}
.auth__stack{width:100%;max-width:556px;display:flex;flex-direction:column;gap:21px;margin-top:89px}

.auth-card{background:#fff;border:1px solid #e9eef6;border-radius:16px;box-shadow:0 6px 22px rgba(0,24,56,.05);padding:38px 42px 34px}
.auth-card__title{margin:0 0 7px;text-align:center;font-size:25px;font-weight:800;color:var(--navy)}
.auth-card__sub{margin:0 0 24px;text-align:center;color:#7b899d;font-size:14.5px}

.field{margin-bottom:17px}
.field label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px;color:#33445c;font-size:13.5px;font-weight:600}
/* Tap targets, measured rather than guessed. On a 390px phone the link that starts a free account was 17px
   tall and "Forgot password?" 18px — the two smallest things on the page, and one of them is what the whole
   campaign depends on. 44px is the floor anybody recommends for a finger. The padding gives it and the
   negative margin takes back the height it would otherwise add, so the page looks the same and the target is
   nearly three times the size. */
.field__aside{color:var(--blue);font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-12px -6px}
.field__aside:hover{color:var(--blue-dark)}
.field__control{position:relative}
.field__icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#9aa7b8;display:grid;place-items:center}
.field__icon svg{width:18px;height:18px}
.field input{
	width:100%;height:48px;padding:0 14px 0 40px;border:1px solid #dde5ef;border-radius:10px;
	background:#fff;color:var(--navy);font:inherit;font-size:14.5px;
}
.field input::placeholder{color:#a7b3c2}
.field input:focus{outline:none;border-color:#9dc0ea;box-shadow:0 0 0 3px rgba(0,104,248,.12)}
.field input.error{border-color:#e5a3a3}

/* Yii writes validation errors into a div beside the field. Bare, they are invisible; here they
   get the same treatment as the field they belong to. */
.field .errorMessage{color:#c53030;font-size:11.5px;margin-top:5px}

.field--row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 16px}
.field--row label{display:flex;align-items:center;gap:7px;margin:0;color:#4c5c72;font-size:12px;font-weight:500}
.field--row input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:var(--blue)}
.field--row .errorMessage{margin:0}

.divider{position:relative;margin:22px 0 17px;text-align:center}
.divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#e9eef6}
.divider span{position:relative;background:#fff;padding:0 10px;color:#9aa7b8;font-size:11px}

.providers{display:flex;flex-direction:column;gap:9px}
.provider{
	display:flex;align-items:center;justify-content:center;gap:9px;height:47px;
	border:1px solid #dfe6f0;border-radius:9px;background:#fff;color:#33445c;
	font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
}
.provider:hover{border-color:#c7d7ea;background:#fbfdff}
.provider__mark{width:16px;height:16px;flex:0 0 16px}
.auth-card__foot{margin:22px 0 0;text-align:center;color:#7b899d;font-size:14px}
.auth-card__foot a{color:var(--blue);font-weight:600;display:inline-block;padding:12px 6px;margin:-12px -6px}
.auth-card__foot a:hover{color:var(--blue-dark)}

/* Something the application has to say — a refusal, a confirmed address, a used link. The
   confirmation and reset routes both end here, so this is where their message has to be legible. */
.auth-alert{
	margin:0 0 16px;padding:10px 13px;border-radius:9px;border-left:3px solid;
	font-size:12.5px;line-height:1.55;
}
.auth-alert--error{background:#fdf2f2;border-color:#c53030;color:#8a2020}
.auth-alert--success{background:#f0fbf5;border-color:#2f855a;color:#205c3d}

/* "Send the link again", under the message for an address waiting to be confirmed. */
.auth-resend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:-6px 0 16px;font-size:12.5px;line-height:1.55;color:#4a5568}
.auth-resend__button{
	min-height:44px;padding:0;border:0;background:none;cursor:pointer;
	font:inherit;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:2px;
}
.auth-resend__button:hover{color:var(--blue-dark)}

.signup-card{background:#eff6ff;border:1px solid #dce8fb;border-radius:16px;padding:30px 48px}
.signup-card h3{margin:0 0 7px;text-align:center;font-size:19px;font-weight:800;color:var(--navy)}
.signup-card__sub{margin:0 0 22px;text-align:center;color:#6b7c92;font-size:14.5px}
.signup-list{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.signup-list li{display:flex;align-items:center;gap:11px}
.signup-list strong{display:block;color:#1f3a63;font-size:12.5px;font-weight:700}
.signup-list li>span:last-child{color:#6b7c92;font-size:11.5px}
.signup-list__icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:#dbeafe;color:var(--blue)}
.signup-list__icon svg{width:15px;height:15px}

.auth-legal{margin-top:6px}
.auth-legal__links{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap;font-size:13px;color:#6b7c92}
/* The four footer links were 21px tall. They are not the campaign's conversion point, but they are the ones
   somebody taps when they are looking for help or terms, and a 21px target is a miss. */
.auth-legal__links a{display:inline-block;padding:11px 8px;min-height:44px;box-sizing:border-box}
.auth-legal__links a:hover{color:var(--navy)}
.auth-legal__base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:17px 0 0;padding-top:14px;border-top:1px solid #e9eef6;color:#9aa7b8;font-size:12px}

/* --- responsive ------------------------------------------------------------------------- */
@media (max-width:1024px){
	.auth{grid-template-columns:minmax(0,1fr)}
	.auth__aside-inner{max-width:none}
	.auth__title{font-size:36px}
	.auth__main{padding:46px 24px 34px}
	.auth__stack{max-width:460px;margin-top:0}
}
@media (max-width:600px){
	.auth__aside-inner{padding:28px 22px 26px}
	.auth__title{font-size:29px}
	.auth__lede{font-size:12.5px}
	.benefits li>span:last-child{font-size:11px}
	.auth-card,.signup-card{padding:20px}
}