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

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

/* סרגל ההיקף של העמוד: אותו מראה כמו בשער הטבלאות, כי הוא
   עונה על אותה שאלה — כמה עמוק מה שיש כאן.

   **רשת ולא שורה גמישה.** כאן שבעה תאים ולא שישה, והעמודה
   צרה יותר מזו של השער. בשורה גמישה התא השביעי נפל לשורה
   משלו והתייצב באמצע, כמו תא שנשכח. ברשת כל השורות מתמלאות
   עד הקצה, והשורה האחרונה נראית מכוונת. */
.rc-rs-scale { margin: 0 0 16px }

.rc-rs-scale .rc-sc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	gap: 10px
}

.rc-rs-scale .rc-sc-i { padding: 10px 8px }

.rc-rs-scale .rc-sc-i b { font-size: 22px }

.rc-rs-scale .rc-sc-i span { font-size: 12px }

/* המשפט שמסביר מה מחזיר חיפוש לפי שם רוכב. */
.rc-rs-note { margin: 0 0 10px }

/* שורת העונות החסרות. היא מופיעה רק כשנבחרה אליפות שחסרות בה
   עונות, ולכן היא אינה רעש קבוע אלא תשובה לשאלה שנשאלה. */
.rc-rs-gaps {
	margin: 0 0 10px;
	font-size: .82rem;
	opacity: .8;
	line-height: 1.6
}

.rc-rs-gaps b { font-weight: 700; opacity: .95 }

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

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

.rc-rs-fi { display: flex; flex-direction: column; gap: 4px; min-width: 0 }

/* החיפוש החופשי רחב משאר המסננים: הוא היחיד שמקבל טקסט, ושדה
   צר מסתיר את מה שהוקלד בו. */
.rc-rs-fq { grid-column: span 2 }

/* חמישה מסננים וכפתור: בשורה אחת הם היו צרים מדי, ולכן הרשת
   עוטפת אותם לשתי שורות לפי הרוחב שיש. */

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

.rc-rs-fi select,
.rc-rs-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-rs-fi select:focus-visible,
.rc-rs-fi input:focus-visible {
	outline: 2px solid var(--rc-accent, #ffd400);
	outline-offset: 1px
}

/* הכפתור יושב בשורת המסננים ולא מתחתיה, כדי שהקשר בין הבחירה
   לבין הפעולה יהיה גלוי. הוא מיושר לתחתית התא, בקו אחד עם
   השדות, מפני שלמסננים יש תווית מעליהם ולו אין. */
.rc-rs-fb { justify-content: flex-end }

.rc-rs-go {
	font: inherit;
	font-weight: 700;
	padding: 8px 14px;
	border: 0;
	border-radius: 7px;
	background: var(--rc-accent, #ffd400);
	color: #10131a;
	cursor: pointer
}

.rc-rs-go:disabled {
	opacity: .45;
	cursor: default
}

.rc-rs-go:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px
}

.rc-rs-cnt {
	font-size: .82rem;
	opacity: .75;
	margin: 0 0 8px
}

/* ---------------------------------------------------------- הטבלה */

/* הטבלה יכולה להיות ארוכה, והכותרת נשארת גלויה בגלילה. בלעדיה
   אין דרך לדעת איזו עמודה היא העונה ואיזו התאריך. */
.rc-rs-out { overflow-x: auto }

.rc-rs-tbl thead th {
	position: sticky;
	top: 0;
	background: var(--rc-card, #151a20);
	z-index: 1
}

.rc-rs-tbl td { vertical-align: top }

.rc-rs-y,
.rc-rs-d { white-space: nowrap; font-variant-numeric: tabular-nums }

.rc-rs-s { opacity: .85; font-size: .9em }

.rc-rs-r a { font-weight: 600 }

/* מספר המרוצים בסבב ושם המדינה: נתוני עזר, ולכן קטנים ועמומים.
   בגודל הטקסט הם היו מתחרים בשם הסבב עצמו. */
.rc-rs-n,
.rc-rs-co {
	font-size: .8em;
	opacity: .6;
	white-space: nowrap
}

/* סבב שבוטל: הסימן בולט ואינו עמום כמו מונה המרוצים, כי זו
   עובדה על המרוץ ולא נתון עזר. */
.rc-rs-x {
	font-size: .8em;
	font-weight: 700;
	white-space: nowrap;
	color: var(--rc-accent, #ffd400)
}

/* בטלפון שלוש העמודות הצרות נדחסות, ולכן התאריך יורד ושם
   האליפות נשאר: מי שחיפש מסלול רוצה לדעת איזו אליפות מצא. */
@media (max-width: 560px) {
	.rc-rs-fq { grid-column: span 1 }

	.rc-rs-d { display: none }
}