/* Flipboard progress bar — timeline, nav, page counter */

@media (max-width: 1024px) {
	.flipboard-progress {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.9rem;
		padding: 0.5rem 0.65rem 0.4rem;
		background: transparent !important;
		border-top: none;
		flex-shrink: 0;
		overflow: visible;
	}

	.flipboard-progress-center {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 0.4rem;
		flex: 1;
		min-width: 0;
		padding-top: 0rem;
		overflow: visible;
	}

	.flipboard-nav-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 3rem;
		min-height: 3.25rem;
		padding: 0.6rem 0.75rem;
		margin: 0;
		border: none;
		background: transparent;
		color: var(--primary-blue);
		cursor: pointer;
		border-radius: 4px;
		flex-shrink: 0;
		align-self: center;
		transition: color 0.2s, opacity 0.2s;
	}

	.flipboard-nav-btn i {
		font-size: 1.5em;
		line-height: 1;
	}

	.flipboard-nav-btn:disabled {
		opacity: 0.35;
		cursor: default;
	}

	.flipboard-nav-btn:not(:disabled):active {
		color: var(--primary-red);
	}

	.flipboard-counter-wrap {
		display: none;
	}

	.flipboard-counter {
		font-size: 0.72rem;
		font-weight: 600;
		color: var(--text-muted);
		text-align: center;
		pointer-events: none;
		user-select: none;
		letter-spacing: 0.02em;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.flipboard-dots {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		width: 100%;
		flex: 1 1 auto;
		min-width: 0;
		height: 10px;
		overflow: visible;
		position: relative;
		touch-action: none;
		cursor: grab;
		padding: 28px 16px;
		margin: -28px -16px;
		box-sizing: content-box;
	}

	.flipboard-dots--dragging {
		cursor: grabbing;
	}

	.flipboard-dots--dragging .flipboard-dot {
		transition: none;
	}

	.flipboard-dots-track {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		min-width: 0;
		height: 10px;
		overflow: visible;
		position: relative;
	}

	.flipboard-dots-track::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 1px;
		background: var(--border-color);
		transform: translateY(-50%);
		z-index: 0;
	}

	.flipboard-dot {
		position: relative;
		z-index: 1;
		width: 1px;
		min-width: 1px;
		max-width: 1px;
		height: 4px;
		align-self: center;
		border-radius: 0;
		background: var(--border-color);
		flex-shrink: 0;
		transition: width 0.2s, height 0.2s, min-width 0.2s, max-width 0.2s, background 0.2s;
	}

	.flipboard-dot-divider {
		flex-shrink: 0;
		width: 1px;
		min-width: 1px;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 1;
	}

	.flipboard-dot-divider--week {
		align-self: center;
		height: 30px;
		background: var(--primary-blue);
		opacity: 1;
	}

	.flipboard-dot-divider--day {
		position: relative;
		align-self: center;
		height: 20px;
		background: transparent;
		cursor: pointer;
	}

	.flipboard-dot-divider--active .flipboard-dot-divider-label {
		color: var(--primary-red);
	}

	.flipboard-dot-divider--active .flipboard-dot-divider-line {
		background: var(--primary-red);
	}

	.flipboard-dot-divider-label {
		position: absolute;
		bottom: 21px;
		left: 50%;
		transform: translateX(-50%);
		font-family: 'DM Sans', sans-serif;
		font-size: 0.68rem;
		font-weight: 800;
		line-height: 1;
		color: var(--primary-blue);
		white-space: nowrap;
		padding: 0;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
	}

	.flipboard-dot-divider-line {
		display: block;
		width: 1px;
		height: 100%;
		background: var(--primary-blue);
		margin: 0 auto;
	}

	.flipboard-dot.active {
		width: 2px;
		min-width: 2px;
		max-width: 2px;
		height: 16px;
		background: var(--primary-red);
	}

	.flipboard-dot--target::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 14px;
		height: 14px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		border: 1.5px solid var(--primary-red);
		box-sizing: border-box;
		pointer-events: none;
	}
}