/* ==========================================================================
   Login — Phase 1
   Two panes above 992px: an operational panel and the form. Single column below.
   ========================================================================== */

/*
 * Three children — panel, form, maker credit — placed rather than stacked.
 *
 * The credit has to be visually *inside* the dark panel on a desktop and
 * *below the form* on a phone, because on a phone the panel collapses to a
 * masthead and a maker credit sitting above someone's sign-in button upstages
 * the business whose system it is.
 *
 * Grid placement does this from one copy of the markup. The alternative —
 * rendering it twice and hiding one — puts a duplicate link in the document
 * and is the kind of thing that quietly rots.
 */
.auth {
	min-height: 100dvh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	background: var(--ground);
}

.auth-aside  { grid-row: 1; grid-column: 1; }
.auth-main   { grid-row: 2; grid-column: 1; }
.auth-maker  { grid-row: 3; grid-column: 1; }

@media (min-width: 992px) {
	.auth {
		grid-template-columns: 40% 60%;
		grid-template-rows: 1fr auto;
	}

	/* The panel spans both rows; the credit is placed back over its floor. */
	.auth-aside { grid-row: 1 / -1; grid-column: 1; }
	.auth-main  { grid-row: 1 / -1; grid-column: 2; }
	.auth-maker { grid-row: 2; grid-column: 1; z-index: 2; }
}

/* --------------------------------------------------------------------------
   Left: the panel

   Was a flat slate fill with its content pinned to the bottom, which left
   roughly 500px of empty colour above the headline. It is now a drawing with
   the content laid over it — the motif occupies the space rather than the
   content being stretched to fill it.
   -------------------------------------------------------------------------- */
.auth-aside {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--primary);
	color: var(--primary-ink);
	padding: var(--s5);
	/* The inner wrapper distributes with space-between, which needs a column
	   flex context with real height to distribute. Losing this line is what
	   stranded the maker credit in the middle of the panel. */
	display: flex;
	flex-direction: column;
}

/* The drawing. Sits behind everything, bleeding off the bottom-right. */
.auth-motif {
	position: absolute;
	right: -26%;
	bottom: 6%;
	width: 142%;
	height: auto;
	z-index: 0;
	color: var(--primary-ink);
	opacity: .6;
	pointer-events: none;
}

[data-bs-theme="dark"] .auth-motif { color: var(--ink); opacity: .42; }

/*
 * Floor scrim.
 *
 * The maker credit sits at the bottom edge, and the drawing's rim stroke runs
 * straight through it — measured at 3.22:1 against white text, a real failure.
 *
 * Fixing it by re-tuning the SVG's fade would work until the next time the
 * drawing is repositioned, because the mask's coordinates and the panel's
 * layout are independent of one another. A scrim in the panel's own coordinate
 * space cannot drift: whatever the drawing does, the last 22% of the panel
 * returns to the flat ground colour.
 *
 * Sits between the drawing (z 0) and the content (z 1).
 */
.auth-aside::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 22%;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to bottom,
		transparent 0%,
		color-mix(in srgb, var(--primary) 72%, transparent) 45%,
		var(--primary) 88%);
}

[data-bs-theme="dark"] .auth-aside::after {
	background: linear-gradient(to bottom,
		transparent 0%,
		color-mix(in srgb, var(--surface-2) 72%, transparent) 45%,
		var(--surface-2) 88%);
}

/*
 * Content stack. space-between puts the tenant at the top edge and the maker
 * credit at the bottom edge, with the message block between them — so the
 * panel is anchored at both ends instead of top-loaded and bottom-pinned.
 */
.auth-aside-inner {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--s5);
	min-height: 0;
}

/*
 * The message sits just under the masthead rather than being centred, and the
 * maker credit is pushed to the floor. That leaves the empty region in the
 * lower-middle of the panel — which is exactly where the drawing lives, so the
 * space is occupied rather than merely distributed.
 *
 * space-between was tried first and moved the void from the bottom of the panel
 * to the top of it, which is not a fix.
 */
/* .auth-maker's margin-top:auto lives in brand.css, where the component is
   defined — brand.css loads after this file and would otherwise win. */

[data-bs-theme="dark"] .auth-aside {
	background: var(--surface-2);
	color: var(--ink);
	border-right: 1px solid var(--line);
}

.auth-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--t-body);
	font-weight: 640;
	letter-spacing: -.01em;
}
.auth-brand i { font-size: var(--t-title); opacity: .85; }

.auth-aside-main { display: none; }

@media (min-width: 992px) {
	.auth-aside { padding: var(--s6); }
	/* No margin-top:auto — space-between on the wrapper does the work now, and
	   the auto margin was what created the void in the first place. */
	.auth-aside-main { display: block; }
}

.auth-headline {
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 660;
	letter-spacing: -.025em;
	line-height: 1.2;
	margin: 0 0 10px;
	text-wrap: balance;
	max-width: 20ch;
}
.auth-standfirst {
	font-size: var(--t-body);
	line-height: 1.55;
	opacity: .8;
	max-width: 42ch;
	margin: 0;
}

/* --- right: the form ----------------------------------------------------- */
.auth-main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s5) var(--s4) var(--s6);
}

.auth-form {
	width: 100%;
	max-width: 400px;
}

.auth-title {
	font-size: var(--t-display);
	font-weight: 660;
	letter-spacing: -.02em;
	margin: 0 0 5px;
}
.auth-lede {
	color: var(--ink-muted);
	font-size: var(--t-table);
	margin: 0 0 var(--s5);
}

/* AC-1.4: the message region reserves its space so nothing shifts. */
.auth-message-slot { min-height: 0; }
.auth-message-slot:not(:empty) { margin-bottom: var(--s4); }

.password-wrap { position: relative; }
.password-wrap .form-control { padding-right: 44px; }
.password-toggle {
	position: absolute;
	top: 0; right: 0;
	height: 100%;
	width: 44px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--ink-subtle);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	cursor: pointer;
}
.password-toggle:hover { color: var(--ink); }

.auth-submit { width: 100%; min-height: 46px; font-size: var(--t-body); margin-top: var(--s2); }

.auth-help {
	margin-top: var(--s5);
	border-top: 1px solid var(--line);
	padding-top: var(--s4);
}
.auth-help summary {
	cursor: pointer;
	font-size: var(--t-label);
	color: var(--ink-muted);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.auth-help summary::-webkit-details-marker { display: none; }
.auth-help summary:hover { color: var(--ink); }
.auth-help-body {
	font-size: var(--t-label);
	color: var(--ink-muted);
	margin-top: var(--s3);
	background: var(--surface-sunk);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s3);
}
.auth-help-body p { margin: 0 0 6px; }
.auth-help-body p:last-child { margin: 0; }

.auth-footer {
	margin-top: var(--s5);
	font-size: var(--t-caption);
	color: var(--ink-subtle);
	display: flex;
	gap: var(--s3);
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Kicker — the letterhead's eyebrow, on the panel

   The document opens every section with orange letterspaced caps above the
   heading. The panel gets the same device so the two read as one hand. Orange
   would vibrate against the slate here, so it takes the panel's own ink at
   reduced opacity and keeps only the tracking.
   -------------------------------------------------------------------------- */
.auth-kicker {
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .62;
	margin: 0 0 var(--s3);
}

/*
 * A hairline above the maker credit, matching the letterhead's rule under the
 * masthead. Kept at low opacity so it separates without drawing attention.
 */
.auth-maker { border-top-color: rgb(255 255 255 / .18); }

/* --------------------------------------------------------------------------
   Below 992px the panel is a masthead, not a hero

   The message block and the facts are desktop furniture; on a phone the only
   things worth the vertical space are the tenant's name and enough of the
   drawing to say what kind of software this is. Everything else would push the
   sign-in button below the fold.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.auth-aside {
		padding: var(--s4) var(--s5);
		min-height: 116px;
	}

	.auth-motif {
		right: -34%;
		bottom: auto;
		top: -46%;
		width: 96%;
		opacity: .45;
	}

	/* The floor scrim is a desktop device — on a masthead there is no floor to
	   protect, and it would only mute the drawing. */
	.auth-aside::after { display: none; }

	.auth-maker { justify-content: flex-start; }
	.auth-maker .cote-logo { --cote-h: 26px; }
}

/* --------------------------------------------------------------------------
   Right: anchoring the form

   The form was a 400px block floating in a 60% column with nothing to sit
   against, which read as unfinished rather than spare. It is not given a card:
   a card would fence the one thing on the page that should feel open, and
   every other screen in this system reserves cards for grouped content.

   Instead the column gets a measure and the form gets a baseline — the same
   thin rule the letterhead puts under its masthead, echoed at the foot.
   -------------------------------------------------------------------------- */
.auth-form { max-width: 384px; }

@media (min-width: 992px) {
	/* Optically centred rather than mathematically: the panel's visual mass is
	   on the left, so the form sits a little left of true centre to balance it
	   instead of drifting right. */
	.auth-main { padding-inline: var(--s6); justify-content: center; }
}

.auth-footer {
	align-items: baseline;
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
}

/*
 * The help disclosure and the footer were two separate rules stacked on top of
 * one another, giving the foot of the form two hairlines a few pixels apart.
 * One of them is enough.
 */
.auth-help + .auth-footer { border-top: 0; padding-top: 0; }