/* ----------------------------------------------------------------------------
   Depth, not more colour.

   This page has now been through four readings. Stripped bare it came out grey -
   a misreading, because what had to go was the extra CONTENT, not the colour.
   Then the colour went back in far too hard: two saturated pools of brand behind
   the card, a hard bar across its top, a gradient on the button. It read as a
   template. Pulling all of that out left the page correct and faded.

   The way out of both is not an amount of colour, it is depth. The card has to
   look like it is LYING ON the page: the ground goes a shade cool so white
   lifts, the shadow comes in three layers, and the card's own top edge catches a
   1px highlight. Then the little colour that is left can be full strength
   instead of a wash - a solid brand mark, a button that casts its own coloured
   shadow - because one confident accent reads designed where five pale ones read
   undecided.
   ---------------------------------------------------------------------------- */
:root{
	{# THE FALLBACK HERE MUST MATCH app-head.twig - see the note there. #}

	/* the ground is tinted toward the brand's hue, not flat grey - this is what
	   lets a white card lift off it instead of melting into it */
	--pa-bg:#eef0f7; --pa-card:#fff; --pa-ink:#0b1220; --pa-dim:#5d6b82;
	--pa-line:#e2e7f0; --pa-bad:#b42318; --pa-good:#15803d;
	--pa-shadow:0 0 0 1px rgba(16,24,40,.03), 0 2px 4px rgba(16,24,40,.05),
	            0 24px 48px -24px rgba(16,24,40,.28);
}
@media (prefers-color-scheme:dark){
	:root:not([data-pa="light"]){
		--pa-bg:#080b11; --pa-card:#141a24; --pa-ink:#f2f5fa; --pa-dim:#94a1b6;
		--pa-line:#222a37; --pa-bad:#ff8a7a; --pa-good:#6ee7a8;
		--pa-shadow:0 0 0 1px rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.5),
		            0 24px 48px -24px rgba(0,0,0,.85);
		color-scheme:dark;
	}
}
*{box-sizing:border-box}
/* The decorative wash below is wider than the phone on purpose - a gradient that
   stops at the screen edge has a visible edge. overflow:hidden on .pa-wrap is
   NOT enough on its own: the first build of it widened the document and pushed
   the whole card half off a 390px screen, which is exactly the kind of thing
   that only shows up in a screenshot. Clipped here as well. */
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
body.pa{min-height:100vh;background:var(--pa-bg);color:var(--pa-ink);
	font:15px/1.6 "Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* The band of brand at the top stays - it is what stops the ground being dead -
   but a second, much wider and fainter radial behind the card gives the page a
   centre. Two gradients, both under 10%, no hard edge anywhere. */
.pa-wrap{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
	padding:24px 16px;overflow:hidden}
.pa-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:360px;pointer-events:none;
	background:linear-gradient(180deg,color-mix(in srgb,var(--pa-brand) 11%,transparent),transparent)}
.pa-wrap::after{content:"";position:absolute;top:-80px;left:0;right:0;height:620px;
	pointer-events:none;
	background:radial-gradient(420px 300px at 50% 36%,
		color-mix(in srgb,var(--pa-brand) 10%,transparent),transparent 72%)}

/* The highlight along the card's top edge is the whole trick: 1px of white at
   24% is what the eye reads as "this object is raised and lit from above". */
.pa-card{position:relative;z-index:1;width:100%;max-width:400px;background:var(--pa-card);
	border:1px solid var(--pa-line);border-radius:18px;padding:34px 30px 28px;
	box-shadow:var(--pa-shadow),inset 0 1px 0 rgba(255,255,255,.7)}
.pa-card--wide{max-width:460px}

/* The name was 13px of grey capitals - the faintest possible way to say whose
   site this is. A solid brand square with the first letter, the name beside it
   in ink: a mark instead of a caption, for 40px of colour. */
.pa-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 24px;
	text-decoration:none;color:var(--pa-ink);font-size:16px;font-weight:800;letter-spacing:-.025em}
.pa-brand img{max-height:36px;max-width:184px;width:auto;height:auto;display:inline-block}
.pa-mark{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--pa-brand);color:#fff;
	display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;
	letter-spacing:0;text-transform:uppercase;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
	           0 6px 16px -6px color-mix(in srgb,var(--pa-brand) 70%,transparent)}

/* the heading is the strongest thing on the page, which is how a reader knows
   where they are without anything else having to say it */
.pa-h{margin:0 0 22px;font-size:25px;font-weight:800;letter-spacing:-.032em;text-align:left;
	color:var(--pa-ink);line-height:1.2}

.pa-msg{border-radius:10px;padding:11px 13px;font-size:13px;margin:0 0 14px;line-height:1.5;
	font-weight:550}
.pa-msg--bad{color:var(--pa-bad);background:rgba(180,35,24,.07);border:1px solid rgba(180,35,24,.24);
	border-left:3px solid var(--pa-bad)}
.pa-msg--good{color:var(--pa-good);background:rgba(21,128,61,.07);border:1px solid rgba(21,128,61,.24);
	border-left:3px solid var(--pa-good)}

.pa-field{margin:0 0 17px}
.pa-label{display:block;font-size:12.5px;font-weight:700;color:var(--pa-dim);margin:0 0 7px}
/* White fields with a real border, not grey troughs. A filled grey box reads as
   disabled; a white one with a clear edge reads as somewhere to type. The inset
   hairline at the top is what turns a 1px border into a recess. */
.pa-input{width:100%;height:46px;padding:0 14px;border:1px solid var(--pa-line);border-radius:10px;
	background:var(--pa-card);color:var(--pa-ink);font:inherit;font-size:14.5px;font-weight:550;
	outline:none;box-shadow:inset 0 1px 2px rgba(16,24,40,.05);
	transition:border-color .14s,box-shadow .14s}
.pa-input::placeholder{color:var(--pa-dim);opacity:.65;font-weight:500}
/* the field in use is marked by its edge, with a thin ring - not a thick glow */
.pa-input:focus{border-color:var(--pa-brand);
	box-shadow:0 0 0 3.5px color-mix(in srgb,var(--pa-brand) 15%,transparent)}
.pa-pw{position:relative}
.pa-pw .pa-input{padding-right:62px}
.pa-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;
	color:var(--pa-dim);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:7px}
.pa-eye:hover{color:var(--pa-brand)}

.pa-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 15px;font-size:13px}
.pa-check{display:inline-flex;align-items:center;gap:7px;color:var(--pa-dim);cursor:pointer}
.pa-check input{margin:0;width:15px;height:15px;accent-color:var(--pa-brand)}
.pa-row a,.pa-foot a{color:var(--pa-brand);text-decoration:none;font-weight:600}
.pa-row a:hover,.pa-foot a:hover{text-decoration:underline}

/* The one action on the page. Still ONE solid colour, not the gradient that made
   the earlier version look like a landing-page template - but a flat rectangle
   of colour is also the flattest thing a button can be. A 1px white highlight
   along its top edge and a shadow in its own colour underneath is what the eye
   reads as a physical button, and neither adds a second colour. */
.pa-btn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;
	border:1px solid transparent;border-radius:11px;color:#fff;font:inherit;font-size:15px;
	font-weight:700;letter-spacing:-.005em;cursor:pointer;background:var(--pa-brand);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
	           0 1px 2px rgba(16,24,40,.08),
	           0 8px 20px -8px color-mix(in srgb,var(--pa-brand) 70%,transparent);
	transition:transform .14s,box-shadow .14s,filter .14s}
.pa-btn:hover{filter:brightness(1.04);transform:translateY(-1px);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
	           0 2px 4px rgba(16,24,40,.08),
	           0 14px 30px -10px color-mix(in srgb,var(--pa-brand) 80%,transparent)}
.pa-btn:active{transform:translateY(0);filter:brightness(.97);
	box-shadow:inset 0 1px 2px rgba(16,24,40,.18)}
.pa-btn:focus-visible{outline:2px solid var(--pa-brand);outline-offset:2px}
.pa-btn[disabled]{opacity:.5;cursor:default;transform:none;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.pa-btn--ghost{background:var(--pa-card);color:var(--pa-ink);border-color:var(--pa-line);
	font-weight:650;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.pa-btn--ghost:hover{border-color:color-mix(in srgb,var(--pa-brand) 45%,transparent);
	background:color-mix(in srgb,var(--pa-brand) 5%,var(--pa-card));color:var(--pa-brand);
	filter:none;transform:none;box-shadow:0 1px 2px rgba(16,24,40,.05)}

/* the divider the shared one-click partial expects to be handed */
.pa-or{display:flex;align-items:center;gap:10px;margin:15px 0;color:var(--pa-dim);font-size:12.5px}
.pa-or:before,.pa-or:after{content:"";flex:1;height:1px;background:var(--pa-line)}

.pa-foot{margin:16px 0 0;text-align:center;font-size:13px;color:var(--pa-dim)}
.pa-err{display:block;margin-top:5px;font-size:12px;color:var(--pa-bad)}
.pa-terms{font-size:12.5px;color:var(--pa-dim);margin:0 0 14px}
.pa-terms a{color:var(--pa-brand)}
.pa-two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media (max-width:420px){ .pa-two{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }