/* =============================================================================
   17 — CLIENT · PROFILE & SECURITY  (view-profile.php re-skin)
   -----------------------------------------------------------------------------
   Scoped to .portal-shell .pf-profile so it never touches other portal views
   (which also use bare .field / .fgrid). Refines the SHARED components already
   defined in style.css / portal-redesign.css (.panel, .panel-head, .fgrid,
   .btn, .rd-badge, .rd-btn, .pay-notice, .sb-avatar-fallback) to match
   "12 Profile and Security.dc.html" — it does NOT redefine them.

   Preserved, not restyled-away: both admin-post forms + nonces + input names,
   the read-only email card, the real name="notify[]" checkboxes (rendered as
   switches via CSS on the native input), and password minlength/required.

   2FA enrollment is NOT here — it lives on the login template (?twofa=setup).
   This view only shows a status pill + links to finlaw_2fa_setup_url().
   The mockup's "Regenerate backup codes" button has NO live handler and is
   intentionally omitted (would ship dead).
   ============================================================================= */

/* Column matches the mockup's ~600px content measure. */
.portal-shell .pf-profile{
	max-width:600px;
}

.portal-shell .pf-profile .section-title .amp{color:var(--amp)}

.portal-shell .pf-profile .pay-notice{max-width:none}

/* --- Card body (shared padding for cards without .panel-head content grid) -- */
.portal-shell .pf-profile .pf-body{padding:22px}

/* --- Identity card --------------------------------------------------------- */
.portal-shell .pf-identity{
	display:flex;
	align-items:center;
	gap:16px;
	padding:22px;
}
.portal-shell .pf-identity .pf-avatar{
	width:56px;
	height:56px;
	font-size:19px;
	border:none;
	background:var(--blue-pale);
	color:var(--blue-ink);
}
.portal-shell .pf-identity__name{
	font-family:'Playfair Display',Georgia,serif;
	font-weight:700;
	font-size:18px;
	color:var(--blue-ink);
	line-height:1.2;
}
.portal-shell .pf-identity__meta{
	font-size:13px;
	color:var(--mid);
	margin-top:2px;
}

/* --- Form fields ----------------------------------------------------------- */
.portal-shell .pf-profile .fgrid{gap:14px}

.portal-shell .pf-profile .field{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin-bottom:14px;
}
.portal-shell .pf-profile .field:last-of-type{margin-bottom:0}
.portal-shell .pf-profile .field > label{
	font-size:13px;
	font-weight:600;
	color:var(--blue-ink);
}
.portal-shell .pf-profile .field input[type="text"],
.portal-shell .pf-profile .field input[type="tel"],
.portal-shell .pf-profile .field input[type="password"]{
	width:100%;
	box-sizing:border-box;
	background:#fff;
	border:1px solid var(--hair);
	border-radius:var(--r-sm);
	padding:10px 12px;
	font-family:inherit;
	font-size:14px;
	color:var(--ink);
	transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.portal-shell .pf-profile .field input:focus{
	outline:none;
	border-color:var(--blue);
	box-shadow:0 0 0 3px rgba(38,64,141,.35);
}
.portal-shell .pf-profile .field .hint{
	font-size:12px;
	color:var(--mid);
	margin-top:2px;
}

/* --- Notification rows: real name="notify[]" checkbox rendered as a switch -- */
.portal-shell .pf-profile .pf-notify{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:14px 0;
	border-top:1px solid var(--grey-50);
	cursor:pointer;
	margin:0;
}
.portal-shell .pf-profile .pf-notify:first-of-type{border-top:none;padding-top:2px}
.portal-shell .pf-profile .pf-notify__label{
	font-size:14px;
	font-weight:600;
	color:var(--ink);
	line-height:1.4;
}

/* Native checkbox, visually a track+knob. Kept focusable + real (posts w/ form). */
.portal-shell .pf-profile .pf-switch{
	appearance:none;
	-webkit-appearance:none;
	position:relative;
	flex-shrink:0;
	width:42px;
	height:24px;
	margin:0;
	border-radius:999px;
	background:var(--hair);
	cursor:pointer;
	transition:background .18s var(--ease);
}
.portal-shell .pf-profile .pf-switch::before{
	content:"";
	position:absolute;
	top:2px;
	left:2px;
	width:20px;
	height:20px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 1px 3px rgba(21,34,77,.2);
	transition:left .18s var(--ease);
}
.portal-shell .pf-profile .pf-switch:checked{background:var(--blue-ink)}
.portal-shell .pf-profile .pf-switch:checked::before{left:20px}
.portal-shell .pf-profile .pf-switch:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(38,64,141,.35);
}

/* --- Email card ------------------------------------------------------------ */
.portal-shell .pf-profile .pf-email{
	font-size:15px;
	font-weight:600;
	color:var(--blue-ink);
}
.portal-shell .pf-profile .pf-email-note{
	font-size:12.5px;
	color:var(--mid);
	margin-top:6px;
}

/* --- Buttons: tighten the shared .btn to the mockup's compact scale --------- */
.portal-shell .pf-profile .btn.pf-save{
	margin-top:18px;
	padding:11px 20px;
	font-size:13.5px;
	border-radius:var(--r-btn);
}
.portal-shell .pf-profile .btn.pf-save:hover{
	transform:none;
	box-shadow:0 6px 16px rgba(237,28,36,.22);
}
/* Anchor styled as the primary button (2FA enable link). */
.portal-shell .pf-profile a.btn.pf-save{
	display:inline-flex;
	text-decoration:none;
	color:#fff;
}

/* --- Two-factor card ------------------------------------------------------- */
.portal-shell .pf-profile .pf-2fa-copy{
	font-size:14px;
	color:var(--mid);
	line-height:1.5;
	margin-bottom:18px;
}
.portal-shell .pf-profile .pf-body .rd-btn{margin-top:0}