.bridge {
	max-width: 880px;
	margin: 2rem auto;
	padding: 0 1.5rem 3rem;
}

.bridge__heading {
	margin: 0 0 0.4rem;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.bridge__lead {
	margin: 0 0 2rem;
	color: color-mix(in srgb, var(--default) 65%, transparent);
	font-size: var(--fs-lg);
}

.bridge__notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--dark_blue) 8%, var(--contents));
	border: 1px solid color-mix(in srgb, var(--dark_blue) 20%, transparent);
	margin-bottom: 2rem;
	font-size: var(--fs-md);
	color: color-mix(in srgb, var(--default) 80%, transparent);
}

.bridge__notice a {
	color: var(--dark_blue);
	font-weight: 600;
	text-decoration: none;
}

.bridge__notice a:hover {
	text-decoration: underline;
}

.bridge__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.bridge-card {
	background: var(--contents);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	box-shadow: var(--shadow-md);
}

.bridge-card__name {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
}

.bridge-card__desc {
	margin: 0;
	font-size: var(--fs-md);
	color: color-mix(in srgb, var(--default) 60%, transparent);
	flex: 1;
}

.bridge-card__status {
	font-size: var(--fs-base);
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.bridge-card__status::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--default) 30%, transparent);
}

.bridge-card__status--connected::before {
	background: var(--success);
}

.bridge-card__status--disconnected::before {
	background: color-mix(in srgb, var(--default) 25%, transparent);
}

.bridge-card__actions {
	margin-top: 0.25rem;
}

@media (max-width: 560px) {
	.bridge__cards {
		grid-template-columns: 1fr;
	}
}

.bridge__section-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 2rem 0 0.75rem;
}

.bridge__section-heading {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	flex: 1;
}

.bridge__sync-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bridge__sync-label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--fs-sm);
	color: color-mix(in srgb, var(--default) 40%, transparent);
	white-space: nowrap;
}

/* Composes .btn .btn--sm; only the layout delta lives here. */
.bridge__fetch-btn {
	white-space: nowrap;
}

.bridge__sync-spinner--inline {
	width: 10px;
	height: 10px;
	border-width: 1.5px;
}

.bridge__activity-list {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.bridge__activity-placeholder {
	color: color-mix(in srgb, var(--default) 50%, transparent);
	font-size: var(--fs-md);
	padding: 0.5rem 0;
}

.bridge__date-header {
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: color-mix(in srgb, var(--default) 38%, transparent);
	padding: 1rem 0.25rem 0.2rem;
}

.bridge__date-header:first-child {
	padding-top: 0.15rem;
}

.bridge__activity-row {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.6rem 0.9rem;
	background: var(--contents);
	border: 1px solid color-mix(in srgb, var(--default) 10%, transparent);
	border-radius: var(--radius-md);
	font-size: var(--fs-md);
	transition: background 0.12s, border-color 0.12s;
}

.bridge__activity-row:hover {
	background: color-mix(in srgb, var(--default) 4%, var(--contents));
	border-color: color-mix(in srgb, var(--default) 18%, transparent);
}

.bridge__activity-main {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.bridge__activity-icon {
	flex-shrink: 0;
	width: 1.3rem;
	text-align: center;
	font-size: var(--fs-md);
	line-height: 1;
}

.bridge__activity-name {
	flex: 1;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bridge__activity-type {
	font-size: var(--fs-xs);
	padding: 0.15rem 0.45rem;
	background: color-mix(in srgb, var(--default) 7%, transparent);
	border-radius: var(--radius-pill);
	color: color-mix(in srgb, var(--default) 50%, transparent);
	flex-shrink: 0;
	white-space: nowrap;
}

.bridge__activity-duration {
	color: color-mix(in srgb, var(--default) 60%, transparent);
	flex-shrink: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bridge__activity-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	padding-left: calc(1.3rem + 0.75rem);
}

.bridge__stat {
	padding: 0.1rem 0.42rem;
	background: color-mix(in srgb, var(--default) 6%, transparent);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	color: color-mix(in srgb, var(--default) 52%, transparent);
	white-space: nowrap;
}

@media (max-width: 560px) {
	.bridge__activity-type {
		display: none;
	}
	.bridge__activity-stats {
		padding-left: 0;
	}
}

.bridge__sync-row {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 1rem;
	font-size: var(--fs-base);
	color: color-mix(in srgb, var(--default) 45%, transparent);
}

.bridge__sync-spinner {
	width: 13px;
	height: 13px;
	border: 2px solid color-mix(in srgb, var(--default) 12%, transparent);
	border-top-color: color-mix(in srgb, var(--default) 45%, transparent);
	border-radius: 50%;
	flex-shrink: 0;
	animation: bridge-spin 0.75s linear infinite;
}

@keyframes bridge-spin {
	to { transform: rotate(360deg); }
}

.bridge__activity-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

/* Composes .btn .btn--sm; keeps the large glyph sizing for the arrows. */
.bridge__page-btn {
	font-size: var(--fs-xl);
	line-height: 1;
}

.bridge__page-label {
	font-size: var(--fs-md);
	color: color-mix(in srgb, var(--default) 60%, transparent);
	min-width: 7rem;
	text-align: center;
}

.bridge__strava-row {
	padding-left: calc(1.3rem + 0.75rem);
	padding-top: 0.1rem;
}

.bridge__strava-btn {
	background: none;
	border: 1px solid color-mix(in srgb, #fc4c02 40%, transparent);
	border-radius: var(--radius-sm);
	color: #fc4c02;
	cursor: pointer;
	font-size: var(--fs-xs);
	padding: 0.15rem 0.5rem;
	text-decoration: none;
	display: inline-block;
}

.bridge__strava-btn:hover:not(:disabled) {
	background: color-mix(in srgb, #fc4c02 8%, transparent);
}

.bridge__strava-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.bridge__strava-btn--synced {
	border-color: color-mix(in srgb, var(--default) 15%, transparent);
	color: color-mix(in srgb, var(--default) 45%, transparent);
	cursor: default;
}

.bridge__strava-btn--synced:hover {
	background: none;
	color: color-mix(in srgb, var(--default) 60%, transparent);
}

.bridge__autosync {
	margin: 2rem 0 0;
}

/* Toggle switch */
.bridge__autosync-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	cursor: pointer;
	user-select: none;
}

.bridge__autosync-switch input {
	appearance: none;
	-webkit-appearance: none;
	width: 2.2rem;
	height: 1.2rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--default) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--default) 18%, transparent);
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.18s, border-color 0.18s;
}

.bridge__autosync-switch input::after {
	content: "";
	position: absolute;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--default) 55%, transparent);
	top: 50%;
	left: 0.16rem;
	transform: translateY(-50%);
	transition: left 0.18s, background 0.18s;
}

.bridge__autosync-switch input:checked {
	background: var(--success);
	border-color: var(--success);
}

.bridge__autosync-switch input:checked::after {
	left: calc(100% - 0.96rem);
	background: #fff;
}

.bridge__autosync-switch-label {
	font-size: var(--fs-sm);
	color: color-mix(in srgb, var(--default) 45%, transparent);
	min-width: 1.8rem;
}

/* Collapsible details panel */
.bridge__autosync-details {
	margin-top: 0.4rem;
}

.bridge__autosync-summary {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	list-style: none;
	cursor: pointer;
	padding: 0.45rem 0.6rem;
	border-radius: var(--radius-sm);
	font-size: var(--fs-base);
	color: color-mix(in srgb, var(--default) 50%, transparent);
	user-select: none;
	transition: background 0.12s;
}

.bridge__autosync-summary::-webkit-details-marker { display: none; }
.bridge__autosync-summary::marker { display: none; }

.bridge__autosync-summary:hover {
	background: color-mix(in srgb, var(--default) 5%, transparent);
}

.bridge__autosync-summary-text {
	flex: 1;
}

.bridge__autosync-count {
	font-size: var(--fs-sm);
	padding: 0.1rem 0.45rem;
	background: color-mix(in srgb, var(--default) 8%, transparent);
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

.bridge__autosync-chevron {
	font-size: var(--fs-lg);
	line-height: 1;
	color: color-mix(in srgb, var(--default) 35%, transparent);
	transition: transform 0.18s;
	display: inline-block;
}

.bridge__autosync-details[open] .bridge__autosync-chevron {
	transform: rotate(90deg);
}

.bridge__autosync-types {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.25rem;
	padding: 0.4rem 0.6rem 0.6rem;
}

.bridge__autosync-type {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-base);
	cursor: pointer;
	user-select: none;
	padding: 0.3rem 0.45rem;
	border-radius: var(--radius-sm);
	transition: background 0.1s;
}

.bridge__autosync-type:hover {
	background: color-mix(in srgb, var(--default) 5%, transparent);
}

@media (max-width: 560px) {
	.bridge__autosync-types {
		grid-template-columns: repeat(2, 1fr);
	}
}