/* =============================================================================
   FIN & LAW — LOGIN & 2FA re-skin partial
   Wiring prompt: wiring-prompts/01-client/00-login-and-2fa.md
   Source of truth: project/04 Login and 2FA.dc.html

   Loads AFTER portal-redesign.css (section 13 already defines the split-screen
   base chrome) and finlaw-appt-2fa.css (already styles the .finlaw-2fa-* blocks).
   This partial only CLOSES the gaps to the mockup — it does not duplicate those
   files. Everything is scoped under .portal-login-body / .portal-wrap so nothing
   leaks to the marketing site. Tokens only. The ampersand watermark uses --amp
   (the logo red, reserved for the "&").

   Gaps closed here:
     A. 46fr / 54fr split (base section 13 ships 1fr 1fr)
     B. Giant decorative "&" watermark (--amp), replacing the base radial blob
     C. Login CARD chrome — white surface, hairline, 16px radius, soft shadow,
        36/32 padding (the mockup's floating card; base ships an unboxed card)
     D. Premium polish on the single real 2FA code input + secret/backup refine
   ============================================================================= */

/* ---------- A. 46/54 SPLIT (desktop only; <=860px stays single-column) ------ */
@media (min-width:861px){
	.portal-login-body .portal-wrap{
		grid-template-columns:46fr 54fr;
	}
}

/* ---------- B. GIANT "&" WATERMARK ------------------------------------------ */
/* Repurpose the brand-panel ::before (base uses it for a bottom-left red glow)
   into the mockup's oversized faint ampersand, top-right, behind content. The
   glyph is the only place --amp is allowed, per the brand kit. */
.portal-login-body .portal-wrap .brand-panel::before{
	content:"&";
	inset:auto;
	top:-60px;
	right:-60px;
	left:auto;
	bottom:auto;
	width:auto;
	height:auto;
	border-radius:0;
	background:none;
	font-family:'Playfair Display',Georgia,serif;
	font-weight:800;
	font-size:clamp(360px,42vw,520px);
	line-height:1;
	color:rgba(255,255,255,.04);
	opacity:1;
	z-index:0;
	pointer-events:none;
	user-select:none;
}
/* Keep a soft navy depth glow but move it clear of the ampersand (bottom-left). */
.portal-login-body .portal-wrap .brand-panel::after{
	top:auto;
	bottom:-120px;
	right:auto;
	left:-100px;
	background:radial-gradient(circle,rgba(38,64,141,.30),transparent 65%);
}

/* ---------- C. FLOATING LOGIN CARD ------------------------------------------ */
.portal-login-body .portal-wrap .login-card{
	background:#fff;
	border:1px solid var(--hair);
	border-radius:var(--r-lg);          /* 16px, matches mockup */
	box-shadow:var(--sh-2);
	padding:36px 32px;
}
/* Trim the outer inner-padding a touch now the card carries its own padding. */
.portal-login-body .portal-wrap .login-inner{
	padding:48px 24px;
}
/* The security-note divider should read against the card, not the page. */
.portal-login-body .portal-wrap .security-note{
	border-top-color:var(--hair);
}

/* ---------- D. 2FA CODE INPUT + BLOCK POLISH -------------------------------- */
/* Single real input (#fl2fa-code / #fl2fa-setup-code) styled as a premium,
   comfortably-tappable, letter-spaced field. Red focus inherits from the base
   .field-wrap input:focus rule; we only enlarge and centre it here. Mismatch #1
   (mockup's 6 OTP boxes) is intentionally NOT rebuilt — one real input stands. */
.portal-login-body .portal-wrap .finlaw-2fa-code-input{
	min-height:52px;
	font-size:21px;
	font-weight:600;
	letter-spacing:.35em;
	text-indent:.35em;            /* balance the trailing letter-spacing gap */
	text-align:center;
	font-variant-numeric:tabular-nums;
	padding-right:14px;           /* no trailing icon on the code field */
}
/* Secret-key chip: nudge the monospace key + inline copy onto one tidy row. */
.portal-login-body .portal-wrap .finlaw-2fa-secret-block{
	justify-content:space-between;
}
.portal-login-body .portal-wrap .finlaw-2fa-secret{
	flex:1 1 auto;
}
/* Backup-codes grid: give each code a subtle boxed cell like the mockup. */
.portal-login-body .portal-wrap .finlaw-2fa-backup li{
	padding:8px 10px;
	background:#fff;
	border:1px solid var(--hair);
	border-radius:var(--r-sm);
	text-align:center;
}

/* ---------- RESPONSIVE ------------------------------------------------------- */
@media (max-width:860px){
	/* Shrink the watermark on the (now stacked) small-screen layout. The base
	   hides .brand-panel <=860px, so this only guards intermediate reflows. */
	.portal-login-body .portal-wrap .login-card{
		padding:28px 22px;
	}
}

/* ---------- REDUCED MOTION --------------------------------------------------- */
/* The watermark and card are static; nothing to disable beyond the base rules. */