/**
 * Compare tool — /compare/.
 *
 * Projects are columns, fields are rows. The whole table scrolls horizontally on
 * narrow screens with the label column pinned, which is the only comparison layout
 * that survives a phone. Key rows (price, handover, verdict) get a tinted band.
 */

/* ---- picker ------------------------------------------------------------ */
.di-cmp__picker { margin: var(--sp-8) 0 var(--sp-6); }
.di-cmp__pickerlabel { display: block; font-size: var(--fs-sm, .9rem); color: var(--text-muted); margin-bottom: 6px; }
.di-cmp__pickerrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.di-cmp__select {
	flex: 1 1 260px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--hairline);
	border-radius: 10px;
	background: var(--surface);
	color: var(--ink);
	font-size: 1rem;
}
.di-cmp__select:disabled { opacity: .5; }

/* ---- empty state ------------------------------------------------------- */
.di-cmp__empty {
	margin-top: var(--sp-6);
	padding: var(--sp-8);
	border: 1px dashed var(--hairline);
	border-radius: var(--r-card, 14px);
	background: var(--surface-muted);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-4);
}

/* ---- table ------------------------------------------------------------- */
.di-cmp__scroll { overflow-x: auto; margin: var(--sp-6) 0; -webkit-overflow-scrolling: touch; }
.di-cmp {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	min-width: calc(160px + var(--di-cmp-cols, 2) * 180px);
}
.di-cmp th, .di-cmp td { text-align: left; vertical-align: top; }

/* pinned label column */
.di-cmp__label, .di-cmp__corner {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--paper);
	width: 160px;
	min-width: 160px;
	padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
	font-weight: 600;
	color: var(--text-muted);
	font-size: var(--fs-sm, .9rem);
}
.di-cmp__corner { border: 0; }

/* head cells */
.di-cmp__head {
	position: relative;
	width: 180px;
	min-width: 180px;
	padding: var(--sp-3) var(--sp-4) var(--sp-4);
	border-bottom: 2px solid var(--ink);
	vertical-align: bottom;
}
.di-cmp__remove {
	position: absolute; top: 0; right: 8px;
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 20px; line-height: 1;
}
.di-cmp__remove:hover { background: var(--negative-soft); color: var(--negative); }
.di-cmp__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: var(--ink);
	margin-bottom: var(--sp-2);
}
.di-cmp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.di-cmp__mono {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	font-family: var(--font-mono); font-size: 2rem; color: var(--paper);
}
.di-cmp__name { display: block; font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.2; }
.di-cmp__name:hover { color: var(--accent); }

/* body cells */
.di-cmp__cell {
	width: 180px;
	min-width: 180px;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--hairline);
	font-size: 1rem;
	color: var(--ink);
}
.di-cmp__sub { display: block; font-family: var(--font-mono); font-size: var(--fs-sm, .85rem); color: var(--text-muted); margin-top: 2px; }
.di-cmp__row--key .di-cmp__cell,
.di-cmp__row--key .di-cmp__label { background: var(--surface-muted); }
.di-cmp__row--cta .di-cmp__cell { border-bottom: 0; display: table-cell; }
.di-cmp__row--cta .di-btn { display: inline-flex; margin: 4px 4px 0 0; }
.di-btn--sm { padding: 8px 14px; font-size: var(--fs-sm, .9rem); }

.di-cmp__foot { margin-top: var(--sp-2); }
.di-cmp__foot a { color: var(--text-muted); }

/* ---- mobile ------------------------------------------------------------ */
@media (max-width: 600px) {
	.di-cmp__label, .di-cmp__corner { width: 118px; min-width: 118px; }
	.di-cmp__head, .di-cmp__cell { width: 150px; min-width: 150px; }
	.di-cmp { min-width: calc(118px + var(--di-cmp-cols, 2) * 150px); }
}