/* Lane occupancy timeline — shared by the pool detail page (server-rendered markup in
   Pool/detail.latte) and the map pool popup (built at runtime by lane-schedule.js).

   Mobile-first: the track keeps a readable minimum width per hour and the whole grid
   scrolls sideways with the lane names pinned to the left edge. From lg up the track goes
   fluid again. The popup overrides the custom properties in the narrow-modal block below. */

.lane-sched {
	--lane-label-w: 118px;
	--lane-track-h: 30px;
	--lane-hour-w: 3.75rem;
}

.lane-hint { margin-bottom: .5rem }

.lane-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: .35rem;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

.lane-inner {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	width: max-content;
	min-width: 100%;
}

.lane-row {
	display: flex;
	align-items: stretch;
	min-height: var(--lane-track-h);
}

.lane-row--axis { min-height: 0 }

/* Stretched to the full row height on purpose: a cell only as tall as its text would let
   the coloured blocks show above and below it once the timeline is scrolled sideways. */
.lane-name {
	position: sticky;
	left: 0;
	z-index: 2;
	align-self: stretch;
	flex: 0 0 var(--lane-label-w);
	width: var(--lane-label-w);
	display: flex;
	align-items: center;
	padding-right: .5rem;
	background: #fff;
	border-right: 1px solid #dee2e6;
	box-shadow: 3px 0 4px -2px rgba(33, 37, 41, .18);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.15;
}

.lane-name-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	overflow-wrap: break-word;
}

.lane-track {
	position: relative;
	flex: 1 1 auto;
	align-self: center;
	min-width: calc(var(--lane-hours) * var(--lane-hour-w));
	height: var(--lane-track-h);
	border-radius: .375rem;
	background-color: #eef1f4;
	background-image:
		repeating-linear-gradient(to right, rgba(33, 37, 41, .14) 0 1px, transparent 1px calc(100% / var(--lane-hours))),
		repeating-linear-gradient(to right, rgba(33, 37, 41, .06) 0 1px, transparent 1px calc(100% / (var(--lane-hours) * 2)));
	overflow: hidden;
}

/* Hour rules repeated over the coloured blocks, so a block's edge can be read against them. */
.lane-track::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, .45) 0 1px, transparent 1px calc(100% / var(--lane-hours)));
}

.lane-track--axis {
	height: 1rem;
	background: none;
	overflow: visible;
}

.lane-track--axis::after { content: none }

.lane-tick {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: .6875rem;
	line-height: 1;
	color: #6c757d;
	white-space: nowrap;
}

.lane-tick--first { transform: none }
.lane-tick--last { transform: translateX(-100%) }

.lane-nodata {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	align-items: center;
	padding-left: .5rem;
	font-size: .75rem;
	font-style: italic;
	color: #6c757d;
}

.lane-slot {
	position: absolute;
	top: 0;
	height: 100%;
	min-width: 5px;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 .25rem;
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
	font-size: .6875rem;
	line-height: 1;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}

.lane-slot-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lane-slot:focus-visible,
.lane-slot.is-active {
	outline: none;
	z-index: 1;
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(33, 37, 41, .85);
}

/* "Now" marker — drawn by lane-schedule.js into today's rows only. */
.lane-nowline {
	position: absolute;
	top: 0;
	height: 100%;
	width: 2px;
	background: #e11d48;
	pointer-events: none;
	z-index: 3;
}

.lane-nowline::before {
	content: '';
	position: absolute;
	top: 0;
	left: -3px;
	width: 8px;
	height: 4px;
	border-radius: 0 0 3px 3px;
	background: #e11d48;
}

.lane-detail { margin-top: .75rem }

.lane-detail-card {
	position: relative;
	padding: .75rem 2.25rem .75rem .75rem;
	border: 1px solid #dee2e6;
	border-left: 4px solid #9ca3af;
	border-radius: .375rem;
	background: #f8f9fa;
}

.lane-detail-close {
	position: absolute;
	top: .5rem;
	right: .5rem;
}

.lane-detail-head {
	font-size: .8125rem;
	font-weight: 600;
	color: #495057;
}

.lane-detail-time {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

.lane-detail-meta {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .8125rem;
	color: #6c757d;
}

.lane-detail-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.lane-detail-desc {
	margin-top: .25rem;
	font-size: .875rem;
}

/* "Teď volno / teď zavřeno" summary — the map popup's first line, and the answer to the
   question people actually open the popup with. */
.lane-now {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .55rem .7rem;
	border-radius: .5rem;
	margin-bottom: .55rem;
	font-size: .8125rem;
	line-height: 1.35;
}

.lane-now--open { background: #e7f5ec }
.lane-now--shut { background: #f1f3f5 }

.lane-now-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
	margin-top: .33rem;
	background: #adb5bd;
}

.lane-now--open .lane-now-dot {
	background: #16a34a;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .22);
}

.lane-now-head { font-weight: 700; color: #212529 }
.lane-now--open .lane-now-head { color: #14532d }
.lane-now-sub { color: #6c757d }

@media (min-width: 992px) {
	.lane-sched {
		--lane-label-w: 130px;
		--lane-track-h: 28px;
	}

	.lane-name {
		font-size: .8125rem;
		line-height: 1.2;
		box-shadow: none;
	}

	.lane-track { min-width: 0 }
	.lane-tick--minor { display: none }
}

/* ---- Map pool popup ----------------------------------------------------------------
   The popup is 500px at most (fullscreen below 769px), so the timeline stays in its
   scrolling mobile mode at every width — the lg block above must not fluid it out. */

.pool-lane-section { margin-top: 1rem }

.pool-lane-title {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin-bottom: .55rem;
	font-size: .9375rem;
	font-weight: 700;
}

.pool-lane-title .lane-day-name {
	font-size: .8125rem;
	font-weight: 400;
	color: #6c757d;
}

.lane-sched--popup {
	--lane-label-w: 96px;
	--lane-track-h: 26px;
	--lane-hour-w: 3.25rem;
}

.lane-sched--popup .lane-name {
	font-size: .7rem;
	line-height: 1.14;
	box-shadow: 3px 0 4px -2px rgba(33, 37, 41, .18);
}

.lane-sched--popup .lane-track { min-width: calc(var(--lane-hours) * var(--lane-hour-w)) }
.lane-sched--popup .lane-tick--minor { display: inline }
.lane-sched--popup .lane-tick { font-size: .625rem }
.lane-sched--popup .lane-slot { font-size: .625rem; padding: 0 .2rem }
.lane-sched--popup .lane-detail-time { font-size: 1.25rem }

.lane-week-link {
	display: inline-block;
	margin-top: .55rem;
	font-size: .8125rem;
	font-weight: 600;
}

.lane-loading {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 0;
	font-size: .8125rem;
	color: #6c757d;
}

.lane-skeleton {
	height: 26px;
	border-radius: .375rem;
	background: linear-gradient(90deg, #eef1f4 25%, #e2e7ec 37%, #eef1f4 63%);
	background-size: 400% 100%;
	animation: lane-shimmer 1.3s ease infinite;
}

.lane-skeleton + .lane-skeleton { margin-top: .25rem }

@keyframes lane-shimmer {
	0% { background-position: 100% 50% }
	100% { background-position: 0 50% }
}

@media (prefers-reduced-motion: reduce) {
	.lane-skeleton { animation: none }
}