/**
 * Interest capture, contacts and the activity timeline.
 * Depends on cdx.css for tokens.
 */

.cdx-interest-card {
	background: #fff;
	border: 1px solid var(--cdx-line);
	border-left: 3px solid var(--cdx-gold);
	border-radius: var(--r, 6px);
	padding: 1rem 1.1rem;
	margin: 1rem 0;
}
.cdx-interest-card h3 {
	margin: 0 0 .4rem;
	font-family: var(--head, sans-serif);
	font-size: 1.05rem;
}
.cdx-interest-card .cdx-soft {
	color: var(--cdx-soft);
	font-size: .88rem;
}
.cdx-interest-card .cdx-ok {
	color: var(--cdx-ok);
}

.cdx-interest-form p {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin: 0 0 .75rem;
}
.cdx-interest-form label {
	font-size: .8rem;
	color: var(--cdx-soft);
}
.cdx-interest-form input,
.cdx-interest-form textarea {
	padding: .5rem .6rem;
	border: 1px solid var(--cdx-line);
	border-radius: var(--r, 6px);
	font-family: inherit;
	font-size: .95rem;
	max-width: 28rem;
}
.cdx-interest-form textarea {
	resize: vertical;
	min-height: 4.5rem;
}

/* Pipeline --------------------------------------------------------------- */
.cdx-pipeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: .6rem;
	margin-bottom: 1rem;
}
.cdx-pipeline-stage {
	background: #fff;
	border: 1px solid var(--cdx-line);
	border-top: 3px solid var(--cdx-slate);
	border-radius: var(--r, 6px);
	padding: .7rem .8rem;
}
.cdx-pipeline-stage .l {
	display: block;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--cdx-soft);
}
.cdx-pipeline-stage .v {
	font-family: var(--head, sans-serif);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
}
.cdx-pipeline-new       { border-top-color: var(--cdx-gold); }
.cdx-pipeline-qualified { border-top-color: var(--cdx-gold-deep); }
.cdx-pipeline-won       { border-top-color: var(--cdx-ok); }
.cdx-pipeline-lost      { border-top-color: var(--cdx-line); }

/* Contacts --------------------------------------------------------------- */
.cdx-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}
.cdx-contact-card {
	background: #fff;
	border: 1px solid var(--cdx-line);
	border-radius: var(--r, 6px);
	padding: .75rem .9rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: flex-start;
}
.cdx-contact-copy {
	min-width: 0;
}
.cdx-contact-card strong {
	font-family: var(--head, sans-serif);
}
.cdx-contact-role {
	color: var(--cdx-soft);
	font-size: .85rem;
}
.cdx-contact-primary {
	border-left: 3px solid var(--cdx-gold);
}
.cdx-contact-details {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	margin-top: .25rem;
	font-size: .88rem;
}
body.cdx-public .cdx-contact-details a {
	color: var(--cdx-gold-deep);
	font-weight: 600;
	text-decoration: none;
}
body.cdx-public .cdx-contact-details a:hover {
	text-decoration: underline;
}
.cdx-contact-summary {
	margin: .45rem 0 0;
	color: var(--cdx-soft);
	font-size: .88rem;
}
.cdx-contact-actions,
.cdx-contact-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-items: center;
}
.cdx-contact-actions {
	justify-content: flex-end;
	flex: 0 0 auto;
}
.cdx-contact-actions .cdx-inline-form {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
}
.cdx-contact-actions .cdx-inline-form button[type="submit"] {
	margin-top: 0;
}

.cdx-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: .75rem;
}
.cdx-contact-form textarea,
.cdx-note-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	color: var(--cdx-txt);
}
.cdx-contact-form input,
.cdx-contact-form select,
.cdx-contact-form textarea,
.cdx-note-form textarea {
	background: #fff;
	color: var(--cdx-txt);
}
.cdx-contact-form label,
.cdx-note-form label {
	color: var(--cdx-soft);
}
.cdx-note-form label {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
}
.cdx-contact-form .cdx-check {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--cdx-txt);
}
.cdx-contact-form .cdx-check input {
	width: auto;
	margin: 0;
}
.cdx-contact-form-actions {
	margin-top: .75rem;
}
.cdx-contact-form-actions button[type="submit"] {
	margin-top: 0;
}

/* Timeline --------------------------------------------------------------- */
.cdx-timeline-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
	border-left: 2px solid var(--cdx-line);
}
.cdx-timeline-item {
	position: relative;
	padding: 0 0 1rem 1rem;
}
.cdx-timeline-item::before {
	content: "";
	position: absolute;
	left: -1.42rem;
	top: .35rem;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--cdx-line);
	border: 2px solid #fff;
}
.cdx-timeline-note::before {
	background: var(--cdx-gold);
}
.cdx-timeline-meta {
	font-size: .78rem;
	color: var(--cdx-soft);
}
.cdx-timeline-body {
	margin: .15rem 0 0;
}

.cdx-note-form textarea {
	width: 100%;
	max-width: 34rem;
	padding: .5rem .6rem;
	border: 1px solid var(--cdx-line);
	border-radius: var(--r, 6px);
	font-family: inherit;
	resize: vertical;
	min-height: 4rem;
}

@media (max-width: 720px) {
	.cdx-interest-form input,
	.cdx-interest-form textarea {
		max-width: 100%;
	}
	.cdx-contact-card {
		flex-direction: column;
	}
	.cdx-contact-actions {
		justify-content: flex-start;
	}
}