/**
 * Lender profile presentation.
 *
 * The page has a reading order and the styling exists to enforce it. A
 * homeowner arrives wanting three things: what the numbers are, what the
 * catches are, and whether any of it can be trusted. So the key figures are
 * the loudest thing on the card, the conditions attached to those figures sit
 * directly underneath and are never collapsed, and the research trail is
 * present but quiet.
 *
 * Three states still have to be distinguishable at a glance: what the lender
 * publishes, what we worked out ourselves, and what we could not verify. The
 * first is plain, the second carries a marker and an explanation, the third
 * lives in its own disclosure so that absent facts cannot outnumber present
 * ones on screen.
 *
 * @package EquityBankLoan\Core
 */

/* Tokens -------------------------------------------------------------
   Several blocks render outside .ebl-product (the data note, the glossary),
   so the palette cannot live on the product card alone. */

.ebl-product,
.ebl-datanote,
.ebl-disclose,
.ebl-attribution {
	--ebl-ink: #16202c;
	--ebl-ink-soft: #55636f;
	--ebl-line: #d7dee5;
	--ebl-line-faint: #eef2f6;
	--ebl-accent: #10416b;
	--ebl-surface-alt: #f4f7fa;
}

/* Data note ----------------------------------------------------------
   One line, above everything, answering "how old is this?" before the reader
   has to wonder. */

.ebl-datanote {
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--ebl-ink-soft);
}

/* Product card -------------------------------------------------------- */

.ebl-product {
	border: 1px solid var(--ebl-line);
	border-radius: 10px;
	padding: 1.25rem;
	margin: 0 0 1.75rem;
	color: var(--ebl-ink);
}

.ebl-product__name {
	margin: 0 0 0.2em;
	font-size: 1.25rem;
}

.ebl-product__type {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ebl-ink-soft);
}

.ebl-product__summary {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.ebl-h4 {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ebl-ink-soft);
}

.ebl-nodata {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	background: var(--ebl-surface-alt);
	border-radius: 8px;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ebl-ink-soft);
}

/* Key figures ---------------------------------------------------------
   The part of the page a homeowner actually came for. Figures are set large
   and tabular so two lenders can be compared by eye. */

.ebl-summary {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.ebl-kf {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.7rem 0.9rem;
	background: var(--ebl-surface-alt);
	border-radius: 8px;
}

.ebl-kf__label {
	font-size: 0.76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ebl-ink-soft);
}

.ebl-kf__value {
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* Markers point at an explanation immediately below, so they are decorative
   here and the explanation itself is what a screen reader is given. */
.ebl-kf__mark {
	margin-left: 0.12em;
	font-size: 0.75em;
	font-weight: 700;
	vertical-align: super;
	color: var(--ebl-accent);
	font-variant-numeric: normal;
}

.ebl-kf__note {
	margin-top: 0.15rem;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--ebl-ink-soft);
}

/* Conditions ----------------------------------------------------------
   Never collapsed, never quieter than small print elsewhere on the card. A
   rate that assumes autopay and a $60,000 draw is not the same rate without
   them, so the qualification travels with the number. */

.ebl-conditions {
	margin: 0 0 1.25rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--ebl-line);
	border-left: 3px solid var(--ebl-accent);
	border-radius: 0 8px 8px 0;
}

.ebl-conditions__item {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
}

.ebl-conditions__item + .ebl-conditions__item {
	margin-top: 0.5rem;
}

.ebl-conditions__mark {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--ebl-accent);
}

.ebl-conditions__item--interpreted {
	color: var(--ebl-ink-soft);
}

/* The lender's own restrictions text. Quieter than the footnotes, because it
   is context rather than a caveat on one number, but still not collapsed. */
.ebl-conditions__item--stated {
	color: var(--ebl-ink-soft);
	font-size: 0.85rem;
}

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

/* Detailed terms ------------------------------------------------------
   Values only. Unknowns have their own disclosure, so this section is not
   diluted by three dozen blanks. */

.ebl-terms {
	border-top: 1px solid var(--ebl-line);
	padding-top: 1rem;
	margin-top: 1rem;
}

.ebl-terms__conditions {
	margin: 0 0 0.85rem;
	font-size: 0.9rem;
	font-weight: 600;
	background: var(--ebl-surface-alt);
	border-left: 3px solid var(--ebl-accent);
	padding: 0.5rem 0.75rem;
}

.ebl-terms__conditions--base {
	border-left-color: var(--ebl-line);
	color: var(--ebl-ink-soft);
}

.ebl-terms__conditions-label {
	color: var(--ebl-accent);
}

.ebl-terms__list {
	margin: 0;
	display: grid;
	gap: 0;
}

.ebl-fact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--ebl-line-faint);
}

.ebl-fact__label {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ebl-ink-soft);
	font-weight: 600;
}

.ebl-fact__value {
	margin: 0;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.ebl-fact__tag {
	display: inline-block;
	font-size: 0.7rem;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	vertical-align: middle;
	margin-left: 0.35rem;
	font-variant-numeric: normal;
}

.ebl-fact__tag--interpreted {
	background: #eef1f5;
	border: 1px solid #c9d4e0;
	color: #3c4a58;
}

.ebl-fact__tag--stale {
	background: #fdf6e6;
	border: 1px solid #e6d3a3;
	color: #6b551f;
}

/* Fees ---------------------------------------------------------------
   Structured rows rather than a prose blob, so a reader can scan them and so
   the three states stay visibly different. */

.ebl-fee__party {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ebl-ink-soft);
	margin-top: 0.1rem;
}

.ebl-fee__condition {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--ebl-ink-soft);
	font-variant-numeric: normal;
}

/* Absence is styled as absence, never as a value and never as a zero. */
.ebl-fee__unknown {
	color: var(--ebl-ink-soft);
	font-style: italic;
	font-size: 0.9rem;
}

/* Disclosures ---------------------------------------------------------
   details and summary, so the behavior is the browser's: keyboard operable
   without any JavaScript, and still readable if the CSS never loads. */

.ebl-disclose {
	margin: 1rem 0 0;
	border: 1px solid var(--ebl-line);
	border-radius: 8px;
	color: var(--ebl-ink);
}

.ebl-disclose__summary {
	display: block;
	padding: 0.7rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ebl-accent);
	cursor: pointer;
	border-radius: 8px;
}

.ebl-disclose__summary::-webkit-details-marker {
	display: none;
}

.ebl-disclose__summary::before {
	content: "\203A";
	display: inline-block;
	margin-right: 0.5rem;
	font-weight: 700;
	transition: transform 0.15s ease;
}

.ebl-disclose[open] > .ebl-disclose__summary::before {
	transform: rotate( 90deg );
}

.ebl-disclose__summary:focus-visible {
	outline: 2px solid var(--ebl-accent);
	outline-offset: 2px;
}

.ebl-disclose[open] > .ebl-disclose__summary {
	border-bottom: 1px solid var(--ebl-line);
	border-radius: 8px 8px 0 0;
}

.ebl-disclose__hint {
	display: block;
	margin: 0.2rem 0 0 1.1rem;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ebl-ink-soft);
}

.ebl-disclose__count {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--ebl-surface-alt);
	border: 1px solid var(--ebl-line);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ebl-ink-soft);
}

.ebl-disclose__body {
	padding: 0.9rem;
	font-size: 0.88rem;
	line-height: 1.6;
}

.ebl-disclose__body > p:first-child {
	margin-top: 0;
}

.ebl-disclose__list {
	margin: 0.75rem 0;
	padding-left: 1.1rem;
}

.ebl-disclose__list li {
	margin-bottom: 0.2rem;
}

.ebl-disclose__foot {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--ebl-ink-soft);
}

/* Evidence ------------------------------------------------------------ */

.ebl-evidence + .ebl-evidence {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ebl-line-faint);
}

.ebl-evidence__title {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ebl-ink-soft);
}

.ebl-evidence__meta {
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	line-height: 1.55;
}

.ebl-evidence__quote {
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.85rem;
	background: var(--ebl-surface-alt);
	border-left: 3px solid var(--ebl-line);
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--ebl-ink);
}

/* Glossary ------------------------------------------------------------ */

.ebl-glossary {
	margin: 0;
}

.ebl-glossary dt {
	font-weight: 600;
	margin-top: 0.75rem;
}

.ebl-glossary dt:first-child {
	margin-top: 0;
}

.ebl-glossary dd {
	margin: 0.2rem 0 0;
	color: var(--ebl-ink-soft);
}

/* Screen reader text --------------------------------------------------
   Scoped, so a theme that already defines this class keeps its own version
   and the plugin does not claim a global name. */

.ebl-product .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Wider viewports ----------------------------------------------------- */

@media ( min-width: 40em ) {
	.ebl-product {
		padding: 1.75rem;
	}

	.ebl-summary {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0.6rem 0.9rem;
	}

	.ebl-fact {
		grid-template-columns: 15rem 1fr;
		gap: 1rem;
		align-items: baseline;
	}

	.ebl-disclose__list {
		columns: 2;
		column-gap: 2rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ebl-disclose__summary::before {
		transition: none;
	}
}

/* Attribution ---------------------------------------------------------
   Rendered by the review system, never typed into content. A "Reviewed by"
   line only appears when the version on screen actually passed review. */

.ebl-attribution {
	margin: 0 0 1.75rem;
	padding: 0.85rem 1rem;
	background: var(--ebl-surface-alt);
	border: 1px solid var(--ebl-line);
	border-radius: 8px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ebl-ink);
}

.ebl-attribution__line {
	margin: 0;
}

.ebl-attribution__line + .ebl-attribution__line {
	margin-top: 0.3rem;
}

.ebl-attribution__label {
	color: var(--ebl-ink-soft);
}

.ebl-attribution a {
	color: var(--ebl-accent);
}

/* Sourcing splits -----------------------------------------------------
   A record that exists because the lender dates a figure differently, not
   because anything about eligibility differs. It gets the same quiet
   treatment as a condition line and says something different: dates, not
   qualification. Styled apart so the two are never confused at a glance. */

.ebl-terms__conditions--sourcing {
	font-style: normal;
}

.ebl-terms__conditions--sourcing .ebl-terms__conditions-label {
	font-style: normal;
}

.ebl-terms__sourcingnote,
.ebl-terms__dates {
	color: var(--ebl-ink-soft);
	display: block;
	font-size: 0.88em;
	line-height: 1.5;
	margin: 0.3em 0 0;
}