/* המשווה בין רוכבים.
 *
 * גיליון נפרד ולא הוספה ל-racing-data.css: הוא נטען בעמוד אחד
 * מתוך מאות, ושם הוא היה נוסע לכל האתר. הצבעים נשאבים מהמשתנים
 * של הגיליון הראשי, כדי שהמשווה יראה כמו האתר ולא כמו דף שהודבק
 * אליו.
 */

.rc-cmp { --rc-cmp-gap: 14px }

/* ---------------------------------------------------------- המסננים */

.rc-cmp-f {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin: 0 0 var(--rc-cmp-gap)
}

.rc-cmp-fi { display: flex; flex-direction: column; gap: 4px }

.rc-cmp-l {
	font-size: .78rem;
	letter-spacing: .04em;
	opacity: .75
}

.rc-cmp-fi select,
.rc-cmp-fi input {
	font: inherit;
	padding: 7px 9px;
	border: 1px solid rgba(128, 128, 128, .42);
	border-radius: 7px;
	background: var(--rc-card, transparent);
	color: inherit;
	min-width: 0
}

.rc-cmp-fi select:focus-visible,
.rc-cmp-fi input:focus-visible {
	outline: 2px solid var(--rc-accent, #4da3ff);
	outline-offset: 1px
}

/* ------------------------------------------------------- רשימת השמות */

.rc-cmp-rl {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* תקרה ולא גלילה אין-סופית: רשימה שממשיכה מעבר למסך מסתירה את
	   ההשוואה עצמה, שהיא מה שהגולש בא בשבילו. */
	max-height: 212px;
	overflow-y: auto
}

.rc-cmp-rb {
	font: inherit;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 5px 10px;
	border: 1px solid rgba(128, 128, 128, .38);
	border-radius: 999px;
	background: transparent;
	color: inherit
}

.rc-cmp-rb:hover { border-color: var(--rc-accent, #4da3ff) }

.rc-cmp-on {
	border-color: var(--rc-accent, #4da3ff);
	box-shadow: inset 0 0 0 1px var(--rc-accent, #4da3ff)
}

.rc-cmp-rn { font-weight: 600 }

.rc-cmp-rm {
	font-size: .76rem;
	opacity: .68;
	font-variant-numeric: tabular-nums
}

.rc-cmp-cut,
.rc-cmp-msg {
	font-size: .8rem;
	opacity: .72;
	margin: 4px 0 0
}

/* -------------------------------------------------------- הנבחרים */

.rc-cmp-pick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px
}

.rc-cmp-chip {
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--rc-accent, #4da3ff);
	color: #04121f;
	font-weight: 600
}

.rc-cmp-chip span { opacity: .75; font-weight: 400 }

.rc-cmp-msg { flex: 1 0 100% }

/* -------------------------------------------------------- הכרטיסים */

.rc-cmp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin: 0 0 var(--rc-cmp-gap)
}

.rc-cmp-c {
	border: 1px solid rgba(128, 128, 128, .3);
	border-top: 3px solid var(--rc-accent, #4da3ff);
	border-radius: 9px;
	padding: 11px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px
}

.rc-cmp-n { margin: 0; font-size: 1.04rem; text-wrap: balance }

.rc-cmp-s {
	margin: 0 0 7px;
	font-size: .79rem;
	opacity: .74
}

.rc-cmp-cc {
	font-weight: 700;
	letter-spacing: .06em;
	margin-inline-end: 5px
}

.rc-cmp-m {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	border-top: 1px solid rgba(128, 128, 128, .16);
	font-size: .88rem
}

.rc-cmp-m span { opacity: .72 }

.rc-cmp-m b { font-variant-numeric: tabular-nums }

/* כותרת משנה בתוך הכרטיס: היא מה שהופך "בשלישייה" ממשפט עמום
   לקביעה מדויקת, ולכן היא צמודה לשורות שהיא מתארת. */
.rc-cmp-h2 {
	margin: 9px 0 0;
	padding: 0 0 1px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .03em;
	opacity: .82
}

.rc-cmp-src {
	margin-top: 7px;
	font-size: .78rem
}

/* ------------------------------------------------------ עונה מול עונה */

.rc-cmp-g { overflow-x: auto }

.rc-cmp-t { width: 100%; font-variant-numeric: tabular-nums }

.rc-cmp-t caption {
	text-align: start;
	font-weight: 700;
	padding: 0 0 6px
}

.rc-cmp-t td,
.rc-cmp-t th { text-align: center }

.rc-cmp-t th[scope="row"] { text-align: start; opacity: .78 }

/* מקום ראשון מסומן. מספר לבדו בתוך עמודה של מספרים אינו נראה. */
.rc-cmp-w {
	font-weight: 700;
	color: var(--rc-accent, #4da3ff)
}

.rc-cmp-foot {
	font-size: .78rem;
	opacity: .7;
	margin: 9px 0 0
}

/* ----------------------------------------------------------- טלפון */

@media (max-width: 560px) {
	.rc-cmp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }

	.rc-cmp-rl { max-height: 164px }
}