/*
 * LifePlan Personal Details v2.8.2
 * Core UI Kit adapter.
 *
 * Shared visual primitives now come from LifePlan Core:
 * page headers, cards, controls, segmented choices, buttons,
 * record rows, save status, modal chrome, focus states and motion.
 * This file only owns Personal Details layout and module-specific behavior.
 */

.lppd-view{
	display:grid;
	gap:16px;
	width:100%;
	min-width:0;
	color:var(--lp-text,#242a2f);
	font-family:var(--lp-font-family,inherit);
}

.lppd-page-header{margin-bottom:0}

.lppd-page-header-fallback{margin:0 0 20px}
.lppd-page-header-fallback h2{margin:0;color:var(--lp-primary,#7b1d3d);font-size:38px;font-weight:500}
.lppd-page-header-fallback p{margin:8px 0 0;color:var(--lp-muted,#6f7881)}

.lppd-form{display:grid;gap:16px;min-width:0}

/* Two-person workspace */
.lppd-dual-workspace{
	display:grid;
	grid-template-columns:1fr;
	gap:14px;
	min-width:0;
}
.lppd-view.has-partner .lppd-dual-workspace{
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.lppd-person-pane{
	min-width:0;
	align-self:start;
}
.lppd-person-pane.is-primary-pane{border-top:3px solid var(--lp-primary,#7b1d3d)}
.lppd-person-pane.is-partner-pane{border-top:3px solid color-mix(in srgb,var(--lp-primary,#7b1d3d) 58%,#fff)}

.lppd-pane-head{min-height:66px}
.lppd-pane-head>div{min-width:0}
.lppd-pane-head h3{
	margin:0;
	color:var(--lp-text,#242a2f);
	font-size:20px;
	font-weight:650;
	line-height:1.2;
	letter-spacing:-.012em;
}
.lppd-pane-chip{
	padding:5px 9px;
	border-radius:999px;
	background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 8%,#fff);
	color:var(--lp-primary,#7b1d3d);
	white-space:nowrap;
}

.lppd-pane-section{
	padding:16px var(--lp-card-padding,18px) 18px;
	border-bottom:1px solid #edf0f2;
}
.lppd-pane-section:last-child{border-bottom:0}
.lppd-pane-section-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:13px;
}
.lppd-pane-section-head h4{
	margin:0;
	color:var(--lp-text,#242a2f);
	font-size:13px;
	font-weight:var(--lp-section-weight,700);
}
.lppd-pane-section-head span{
	color:var(--lp-muted,#6f7881);
	font-size:10px;
	font-weight:var(--lp-body-weight,400);
}

/* Shared Core field primitives with Personal Details overrides */
.lppd-view .lp-ui-field__label,
.lppd-view .lppd-person-fields>label>span{
	color:var(--lp-text,#242a2f);
	font-size:var(--lp-label-size,12px);
	font-weight:var(--lp-label-weight,600);
	line-height:1.35;
}
.lppd-person-fields,
.lppd-grid-2{gap:12px}
.lppd-person-fields>label,
.lppd-grid-2>label{display:grid;gap:7px;min-width:0}
.lppd-person-fields>label>span em{
	color:var(--lp-muted,#6f7881);
	font-size:10px;
	font-style:normal;
	font-weight:400;
}
.lppd-person-fields b,
.lppd-grid-2 b{color:var(--lp-primary,#7b1d3d)}

.lppd-inline-question{
	margin:8px 0;
	font-size:var(--lp-label-size,12px);
}
.lppd-inline-question>div:first-child{min-width:0}
.lppd-inline-question strong,
.lppd-inline-question legend{
	color:var(--lp-text,#242a2f);
	font-weight:var(--lp-label-weight,600);
}
.lppd-inline-question small{
	display:block;
	margin-top:2px;
	color:var(--lp-muted,#6f7881);
	font-size:10px;
	font-weight:400;
}
.lppd-inline-question.compact{min-height:48px}
.lppd-radio-pills span{font-weight:var(--lp-button-weight,650)}

.lppd-conditional-field{display:grid;gap:7px;margin:10px 0 13px}
.lppd-veteran-panel{
	display:grid;
	gap:8px;
	margin:10px 0;
	padding:12px;
	border:1px solid #e5eaed;
	border-radius:12px;
	background:var(--lp-surface-subtle,#fbfcfd);
}

/* Household summary + lives-with-you */
.lppd-shared-summary{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:9px;
}
.lppd-shared-summary>div{
	padding:10px 11px;
	border:1px solid #e4e9ec;
	border-radius:10px;
	background:var(--lp-surface-subtle,#fbfcfd);
}
.lppd-shared-summary span{
	display:block;
	color:var(--lp-muted,#6f7881);
	font-size:9.5px;
	font-weight:500;
}
.lppd-shared-summary strong{
	display:block;
	margin-top:3px;
	color:var(--lp-text,#242a2f);
	font-size:12px;
	font-weight:650;
}

.lppd-live-check{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:12px;
	padding:10px 12px;
	border:1px solid #e2e7ea;
	border-radius:11px;
	background:var(--lp-surface-subtle,#fbfcfd);
	cursor:pointer;
}
.lppd-live-check input[type="checkbox"]{
	appearance:none;
	display:grid;
	place-content:center;
	width:18px;
	height:18px;
	flex:0 0 18px;
	margin:0;
	border:1.5px solid #aab4bc;
	border-radius:5px;
	background:#fff;
	cursor:pointer;
}
.lppd-live-check input[type="checkbox"]::before{
	content:"";
	width:8px;
	height:4px;
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	transform:rotate(-45deg) scale(0);
	transition:transform 120ms ease;
}
.lppd-live-check input[type="checkbox"]:checked{
	border-color:var(--lp-primary,#7b1d3d);
	background:var(--lp-primary,#7b1d3d);
}
.lppd-live-check input[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1)}
.lppd-live-check input[type="checkbox"]:focus-visible{box-shadow:0 0 0 4px var(--lp-ui-focus)}
.lppd-live-check span{
	color:var(--lp-text,#242a2f);
	font-size:var(--lp-label-size,12px);
	font-weight:var(--lp-label-weight,600);
}

/* Additional details */
.lppd-additional-section{min-width:0}
.lppd-section-title>div{display:grid;gap:2px}
.lppd-section-body{min-width:0}

/* Address / contact records */
.lppd-record-section{min-width:0}
.lppd-record-section-head>div{display:grid;gap:2px}
.lppd-record-section-body{padding-top:14px}
.lppd-record-groups{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px;
}
.lppd-record-group{
	display:grid;
	align-content:start;
	gap:10px;
	min-width:0;
	padding:13px;
	border:1px solid #e3e8eb;
	border-radius:13px;
	background:var(--lp-surface-subtle,#fbfcfd);
}
.lppd-record-group-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:10px;
}
.lppd-record-group-head h4{
	margin:0;
	color:var(--lp-text,#242a2f);
	font-size:12.5px;
	font-weight:var(--lppd-section-weight,650);
}
.lppd-record-group-head span{
	color:var(--lp-muted,#6f7881);
	font-size:9.5px;
}
.lppd-record-list{display:grid;gap:8px;min-width:0}
.lppd-record-card{min-width:0}
.lppd-record-card .lp-ui-record__content span{max-width:100%}

.lppd-empty{
	display:flex;
	align-items:center;
	gap:9px;
	min-height:54px;
	padding:10px 11px;
	border:1px dashed #d7dde1;
	border-radius:10px;
	color:var(--lp-muted,#6f7881);
	background:#fff;
}
.lppd-empty>span{
	display:grid;
	place-items:center;
	width:28px;
	height:28px;
	flex:0 0 28px;
	border-radius:50%;
	background:#f1f4f5;
	color:#89939b;
}
.lppd-empty>div{display:grid;gap:2px}
.lppd-empty strong{color:var(--lp-text,#242a2f);font-size:11px;font-weight:650}
.lppd-empty small{font-size:9.5px;line-height:1.35}

.lppd-add-box{width:100%}
.lppd-add-inner{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.lppd-add-icon{font-size:16px;line-height:1}

.lppd-record-section.is-single-record .lppd-record-groups,
.lppd-record-section.is-shared-address .lppd-record-groups{grid-template-columns:1fr}
.lppd-record-section.is-single-record [data-partner-record-group],
.lppd-record-section.is-shared-address [data-partner-record-group]{display:none}

/* Save strip */
.lppd-save-strip{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:12px 14px;
}
.lppd-save-status{min-width:0}
.lppd-save-actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:9px;
	flex:0 0 auto;
}
.lppd-save-now{min-width:112px}

/* Core Modal + Personal Details dynamic field layout */
.lppd-modal-dialog{--lp-modal-width:var(--lppd-modal-width,900px)}
.lppd-modal-dialog form{
	display:flex;
	flex:1 1 auto;
	min-height:0;
	flex-direction:column;
	overflow:hidden;
}
.lppd-modal-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px;
}
.lppd-modal-grid .is-wide{grid-column:1/-1}
.lppd-modal-body{scrollbar-width:thin;scrollbar-color:#aeb6bc transparent}
.lppd-field-error{
	display:block;
	margin-top:3px;
	color:var(--lp-danger,#9d2647);
	font-size:10px;
	font-weight:600;
}
.lppd-modal .lp-ui-control.is-invalid,
.lppd-modal .lp-ui-control[aria-invalid="true"]{
	border-color:color-mix(in srgb,var(--lp-danger,#9d2647) 58%,#fff);
	background:var(--lp-danger-bg,#fff1f4);
}

/* U.S. phone control */
.lppd-phone-control{
	display:grid;
	grid-template-columns:auto minmax(0,1fr);
	align-items:stretch;
	min-height:var(--lp-field-height,44px);
	overflow:hidden;
	border:1px solid #d7dde2;
	border-radius:var(--lp-field-radius,10px);
	background:var(--lp-surface-subtle,#fbfcfd);
	transition:border-color 140ms ease,box-shadow 140ms ease,background 140ms ease;
}
.lppd-phone-control:focus-within{
	border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 62%,#fff);
	background:#fff;
	box-shadow:0 0 0 4px var(--lp-ui-focus);
}
.lppd-country-code{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:50px;
	padding:0 11px;
	border-right:1px solid #d7dde2;
	background:#f1f4f6;
	color:var(--lp-text,#242a2f);
	font-size:var(--lp-body-size,14px);
	font-weight:600;
}
.lppd-phone-control .lp-ui-control{
	min-height:42px;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
}
.lppd-phone-control .lp-ui-control:focus{box-shadow:none}
.lppd-modal-grid label:has(input[name="email"]){grid-column:1/-1}

/* Hidden state */
.lppd-view [hidden],
.lppd-modal [hidden]{display:none}

/* Responsive */
@media(max-width:1180px){
	.lppd-view.has-partner .lppd-dual-workspace{grid-template-columns:1fr}
}
@media(max-width:760px){
	.lppd-dual-workspace,
	.lppd-record-groups,
	.lppd-modal-grid,
	.lppd-shared-summary{grid-template-columns:1fr}
	.lppd-pane-section-head,
	.lppd-record-group-head{align-items:flex-start}
	.lppd-save-strip{align-items:stretch;flex-direction:column}
	.lppd-save-actions{justify-content:space-between}
	.lppd-modal-grid .is-wide,
	.lppd-modal-grid label:has(input[name="email"]){grid-column:auto}
}


/* =========================================================
   v2.8.2 — profile hierarchy + form-control consistency
   ========================================================= */

/* Every standard Personal Details input/select uses one physical size.
   This prevents browser differences between text/date/number/select controls. */
.lppd-view input.lp-ui-control:not([type="radio"]):not([type="checkbox"]),
.lppd-view select.lp-ui-control,
.lppd-modal input.lp-ui-control:not([type="radio"]):not([type="checkbox"]),
.lppd-modal select.lp-ui-control{
	height:48px;
	min-height:48px;
	box-sizing:border-box;
	padding-top:0;
	padding-bottom:0;
	padding-left:14px;
	padding-right:14px;
	font-size:14px;
	line-height:1.2;
}

/* Keep multiline controls intentionally taller while matching the same
   typography, border radius and horizontal inset. */
.lppd-view textarea.lp-ui-control,
.lppd-modal textarea.lp-ui-control{
	min-height:104px;
	padding:12px 14px;
	font-size:14px;
	line-height:1.45;
}

/* Normalize native date/number controls without removing browser usability. */
.lppd-view input[type="date"].lp-ui-control,
.lppd-view input[type="number"].lp-ui-control,
.lppd-modal input[type="date"].lp-ui-control,
.lppd-modal input[type="number"].lp-ui-control{
	line-height:normal;
}

/* One consistent label-to-control rhythm throughout both profiles. */
.lppd-person-fields>label,
.lppd-grid-2>label,
.lppd-conditional-field,
.lppd-modal .lp-ui-field{
	gap:8px;
}

.lppd-view .lp-ui-field__label,
.lppd-view .lppd-person-fields>label>span,
.lppd-conditional-field>span,
.lppd-modal .lp-ui-field__label{
	font-size:12.5px;
	line-height:1.35;
}

/* Yes/No choices remain compact, but all binary questions now share the
   same button footprint and alignment. */
.lppd-radio-pills{
	align-items:center;
}
.lppd-radio-pills span{
	min-width:58px;
	min-height:36px;
	box-sizing:border-box;
	padding:7px 13px;
	font-size:12px;
	line-height:1;
}

/* Make question rows feel as deliberate as the standard form fields. */
.lppd-inline-question{
	min-height:52px;
	padding-block:2px;
}

/* The +1 phone compound control should match every other 48px field. */
.lppd-phone-control{
	min-height:48px;
}
.lppd-phone-control .lp-ui-control{
	height:46px;
	min-height:46px;
}

@media(max-width:760px){
	.lppd-pane-head h3{font-size:19px}
}