/**
 * Lender comparison surface.
 *
 * THE ONE THING THIS STYLING HAS TO GET RIGHT
 * -------------------------------------------
 * Three outcomes have to be distinguishable at a glance, and the third one has
 * to look like an answer rather than like a missing cell. "Not published" is
 * information: it is the reason this page exists, and on today's data it is the
 * most common outcome. Styling it as an absence, greyed out or blank, would
 * quietly reintroduce the failure the page was built to avoid.
 *
 * So all three cells carry the same weight of border and padding. Only the hue
 * differs, and the hue is never the only signal: every cell also states its
 * outcome in words, and the words are what a screen reader reads.
 *
 * No red for "does not meet". A lender that will not lend in your state has
 * not done anything wrong, and neither have you.
 *
 * @package EquityBankLoan\Core
 */

.ebl-compare {
	--ebl-ink: #16202c;
	--ebl-ink-soft: #55636f;
	--ebl-line: #d7dee5;
	--ebl-line-faint: #eef2f6;
	--ebl-accent: #10416b;
	--ebl-surface-alt: #f4f7fa;
	--ebl-meets: #1f6f43;
	--ebl-meets-bg: #eef7f1;
	--ebl-no: #7a4a12;
	--ebl-no-bg: #fbf4ea;
	--ebl-unknown: #3f4a8a;
	--ebl-unknown-bg: #f0f1fa;

	color: var(--ebl-ink);
}

/* Form ----------------------------------------------------------------- */

.ebl-compare__form {
	background: var(--ebl-surface-alt);
	border: 1px solid var(--ebl-line);
	border-radius: 6px;
	margin: 0 0 1.75em;
	padding: 1.25em 1.25em 0.75em;
}

.ebl-compare__fields {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ebl-compare__field {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.ebl-compare__field label {
	font-size: 0.9em;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.ebl-compare__field input,
.ebl-compare__field select {
	border: 1px solid var(--ebl-line);
	border-radius: 4px;
	font-size: 1em;
	padding: 0.5em 0.6em;
	width: 100%;
}

.ebl-compare__hint {
	color: var(--ebl-ink-soft);
	font-size: 0.8em;
	margin-top: 0.35em;
}

.ebl-compare__submit {
	margin: 1.1em 0 0.6em;
}

.ebl-compare__submit button {
	background: var(--ebl-accent);
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font-size: 1em;
	padding: 0.6em 1.4em;
}

.ebl-compare__privacy {
	border-top: 1px solid var(--ebl-line-faint);
	color: var(--ebl-ink-soft);
	font-size: 0.82em;
	line-height: 1.5;
	margin: 0;
	padding: 0.75em 0;
}

/* Framing --------------------------------------------------------------- */

.ebl-compare__intro {
	color: var(--ebl-ink-soft);
	margin: 0 0 0.6em;
}

.ebl-compare__scenario {
	font-size: 0.95em;
	margin: 0 0 1.25em;
}

.ebl-compare__ordering {
	border-top: 1px solid var(--ebl-line-faint);
	color: var(--ebl-ink-soft);
	font-size: 0.82em;
	line-height: 1.55;
	margin: 1.5em 0 0;
	padding-top: 0.9em;
}

/* Results --------------------------------------------------------------- */

.ebl-compare__results {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ebl-compare__lender {
	border: 1px solid var(--ebl-line);
	border-radius: 6px;
	margin: 0 0 1.5em;
	padding: 1.1em 1.2em;
}

.ebl-compare__lender-head {
	align-items: baseline;
	border-bottom: 1px solid var(--ebl-line-faint);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.9em;
	margin-bottom: 0.9em;
	padding-bottom: 0.75em;
}

.ebl-compare__lender-name {
	font-size: 1.25em;
	margin: 0;
}

.ebl-compare__product {
	color: var(--ebl-ink-soft);
	font-size: 0.88em;
	margin: 0;
}

/* The verdict badge. Word first, color second: the text alone is sufficient. */

.ebl-verdict {
	border-radius: 3px;
	font-size: 0.82em;
	font-weight: 600;
	margin: 0;
	padding: 0.25em 0.65em;
	width: auto;
}

.ebl-verdict--meets {
	background: var(--ebl-meets-bg);
	color: var(--ebl-meets);
}

.ebl-verdict--no {
	background: var(--ebl-no-bg);
	color: var(--ebl-no);
}

.ebl-verdict--unknown {
	background: var(--ebl-unknown-bg);
	color: var(--ebl-unknown);
}

/* Table ----------------------------------------------------------------- */

.ebl-compare__table {
	border-collapse: collapse;
	font-size: 0.92em;
	margin: 0;
	width: 100%;
}

.ebl-compare__table th,
.ebl-compare__table td {
	border-bottom: 1px solid var(--ebl-line-faint);
	padding: 0.65em 0.7em;
	text-align: left;
	vertical-align: top;
}

.ebl-compare__table thead th {
	color: var(--ebl-ink-soft);
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ebl-compare__table tbody th {
	font-weight: 600;
	width: 30%;
}

.ebl-compare__value {
	display: block;
	font-weight: 600;
}

/* "Not published" is an answer. Same weight as a figure, different hue. */

.ebl-compare__unpublished {
	color: var(--ebl-unknown);
	display: block;
	font-weight: 600;
}

.ebl-compare__interpreted,
.ebl-compare__checked,
.ebl-compare__condition {
	color: var(--ebl-ink-soft);
	display: block;
	font-size: 0.85em;
	margin-top: 0.2em;
}

/* No glyph marker in front of the interpretation note. A dagger reads as a
   plus sign in several common UI fonts, and a symbol that has to be decoded is
   worse than the sentence it decorates. The words carry it. */

.ebl-compare__interpreted {
	font-style: italic;
}

.ebl-compare__cell {
	border-left: 3px solid transparent;
}

.ebl-compare__cell--meets {
	background: var(--ebl-meets-bg);
	border-left-color: var(--ebl-meets);
}

.ebl-compare__cell--no {
	background: var(--ebl-no-bg);
	border-left-color: var(--ebl-no);
}

.ebl-compare__cell--unknown {
	background: var(--ebl-unknown-bg);
	border-left-color: var(--ebl-unknown);
}

.ebl-compare__caveat {
	color: var(--ebl-ink-soft);
	font-size: 0.85em;
	line-height: 1.55;
	margin: 0.9em 0 0;
}

/* Narrow screens: the table becomes stacked rows rather than scrolling. */

@media (max-width: 600px) {

	.ebl-compare__table thead {
		clip: rect(1px, 1px, 1px, 1px);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.ebl-compare__table tbody th,
	.ebl-compare__table tbody td {
		display: block;
		width: auto;
	}

	.ebl-compare__table tbody th {
		border-bottom: 0;
		padding-bottom: 0.15em;
	}

	.ebl-compare__table tbody tr {
		border-bottom: 1px solid var(--ebl-line);
		display: block;
		padding: 0.4em 0;
	}
}