/* 기록지·시리즈 — 표 모양은 site.css의 lapboard/records/series 규칙을 그대로 쓴다.
   여기에는 서버 렌더로 바뀐 부분만 둔다: 링크 목록 드롭다운(보드·차량), All laps 토글 링크, 꺼진 페이저 버튼. */

.records-page h1 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

/* 순번이 두 자리가 되면 한 글자씩 접혔다(옛 SPA도 같았다) — 접지 않는다. */
.records-table th.records-index {
	white-space: nowrap;
	overflow-wrap: normal;
}

/* 보드·차량 고르기 — <details> 안의 링크 목록. 콤보박스와 같은 크기·모양으로 보인다. */
.records-picker {
	position: relative;
	flex: 1 1 240px;
	min-width: 0;
}

.records-picker > summary,
.records-picker.is-locked {
	display: block;
	min-height: 30px;
	padding: 5px 26px 5px 8px;
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	cursor: pointer;
	list-style: none;
}

.records-picker > summary::-webkit-details-marker {
	display: none;
}

.records-picker > summary::after {
	position: absolute;
	top: 12px;
	right: 10px;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--muted);
	border-bottom: 1.5px solid var(--muted);
	content: "";
	transform: rotate(45deg);
}

.records-picker > summary:hover {
	border-color: #4a4a47;
}

.records-picker[open] > summary {
	border-color: var(--pb);
}

.records-picker.is-locked {
	color: var(--muted);
	cursor: default;
}

.records-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 5;
	width: 100%;
	max-height: 60vh;
	padding: 4px 0;
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
	scrollbar-color: var(--line) transparent;
}

.records-menu-group {
	margin: 6px 0 2px;
	padding: 0 10px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.records-menu a {
	display: flex;
	gap: 8px;
	padding: 3px 10px;
	color: var(--text);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
}

.records-menu a b {
	flex: none;
	min-width: 28px;
	color: var(--muted);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.records-menu a:hover {
	background: var(--hover);
}

.records-menu a[aria-current] {
	color: var(--pb);
	background: var(--pb-bg);
}

/* All laps — 체크박스 모양의 링크 */
a.records-toggle {
	text-decoration: none;
}

.records-toggle-box {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px solid var(--muted);
	border-radius: 2px;
}

.records-toggle-box.is-on {
	border-color: var(--pb);
	background: var(--pb);
	box-shadow: inset 0 0 0 1.5px var(--panel);
}

.records-pager .control-primary {
	text-decoration: none;
}

.records-pager .is-disabled {
	opacity: 0.4;
	cursor: default;
}

.records-jump-field {
	-moz-appearance: textfield;
}

.records-jump-field::-webkit-inner-spin-button,
.records-jump-field::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* 시리즈 — 숫자 칸은 오른쪽, 레이스 머리글은 레이스 보드로 가는 링크 */
.series-page .num {
	text-align: right;
}

.series-page a.series-race-name {
	text-decoration: none;
}

.series-page a.series-race-name:hover {
	color: var(--pb);
	text-decoration: underline;
}

/* 넘친 글자는 자른다 — 말줄임표를 쓰지 않는다. */
.records-page .lapboard-table th,
.records-page .lapboard-table td,
.series-page .lapboard-table th,
.series-page .lapboard-table td {
	text-overflow: clip;
}

.records-table a.records-vehicle-name {
	color: inherit;
	text-decoration: none;
}

.records-table a.records-vehicle-name:hover {
	color: var(--pb);
	text-decoration: underline;
}

.series-table th.num,
.series-table td.num {
	width: 90px;
}

.series-table td.series-name {
	white-space: nowrap;
	overflow: hidden;
}

/* 시리즈 목록 — 선택은 링크로 옮겨 다닌다 */
.series-table .lapboard-name[aria-current] {
	color: var(--pb);
}

.series-standings {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
}

.series-standings a.series-result {
	color: inherit;
	text-decoration: none;
}

.series-standings a.series-result:hover {
	color: var(--pb);
	text-decoration: underline;
}

@media (max-width: 540px) {
	.records-picker {
		flex-basis: 100%;
	}

	.records-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.records-pager {
		margin-left: 0;
	}
}