/* Shared presentation only: callers retain their distinct year/count contracts. */
.year-navigation {
	position: sticky;
	align-self: start;
	top: 0;
	z-index: 2;
	min-width: 0;
	padding: .75rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--lx2we-color-border);
	border-radius: 8px;
	background: var(--lx2we-color-surface);
}
.year-navigation__heading {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .5rem;
	color: var(--lx2we-color-muted);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.year-navigation__controls { display: grid; min-width: 0; }
.year-navigation ul { list-style: none; padding: 0; margin: 0; }
.year-navigation .year-navigation__recent {
	grid-area: 1 / 1;
	align-self: start;
	position: relative;
	z-index: 1;
	display: flex;
	gap: .5rem;
	min-width: 0;
	overflow-x: auto;
	padding: 4px;
	scrollbar-width: thin;
}
.year-navigation .year-navigation__controls--more .year-navigation__recent { margin-right: 9rem; }
.year-navigation li { flex: 0 0 auto; }
.year-navigation a, .year-navigation summary {
	box-sizing: border-box;
	min-height: 44px;
	padding: .5rem .75rem;
	border: 1px solid var(--lx2we-color-border);
	border-radius: 6px;
	background: var(--lx2we-color-background);
	color: var(--lx2we-color-primary);
	text-decoration: none;
	cursor: pointer;
}
.year-navigation a { display: flex; flex-direction: column; width: max-content; font-weight: 800; }
.year-navigation small { font-size: .68rem; font-weight: 400; white-space: nowrap; }
.year-navigation a[aria-current="page"] { background: var(--lx2we-color-primary); color: var(--lx2we-color-surface); }
.year-navigation a:hover, .year-navigation summary:hover { border-color: var(--lx2we-color-primary); }
.year-navigation a:focus-visible, .year-navigation summary:focus-visible { outline: 3px solid var(--lx2we-color-accent); outline-offset: 1px; }
/* Share a grid row with recent links; the expanded list stays in normal flow. */
.year-navigation__more { grid-area: 1 / 1; min-width: 0; }
.year-navigation summary { width: max-content; max-width: 8.5rem; min-height: 64px; margin: 4px 0 4px auto; font-weight: 700; }
.year-navigation .year-navigation__older { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; padding: 4px; max-height: 25vh; overflow-y: auto; }
/* Core's admin toolbar is fixed except on narrow mobile screens. */
.admin-bar .year-navigation { top: 32px; }
@media (max-width: 782px) { .admin-bar .year-navigation { top: 46px; } }
@media (max-width: 600px) { .admin-bar .year-navigation { top: 0; } }
/* Keep native focus/anchor scrolling below the sticky navigation on these routes only. */
.travel-year, .gallery-year { scroll-margin-top: 9rem; }
.travel-year a, .gallery-year a { scroll-margin-block: 9rem; }

.year-navigation:has(details[open]) ~ .travel-year a,
.year-navigation:has(details[open]) ~ .gallery-year a {
	scroll-margin-top: calc(11rem + 25vh);
}

/* Mobile: recent years and the native summary share one horizontal track.
 * The open list spans the next row and remains viewport-wide while that track scrolls.
 */
@media (max-width: 620px) {
	.year-navigation { container-type: inline-size; }
	.year-navigation__controls {
		grid-template-columns: max-content max-content;
		column-gap: .5rem;
		overflow-x: auto;
		scrollbar-width: thin;
	}
	.year-navigation .year-navigation__recent {
		grid-area: 1 / 1;
		overflow: visible;
	}
	.year-navigation .year-navigation__controls--more .year-navigation__recent { margin-right: 0; }
	.year-navigation__more { display: contents; }
	/* Browsers exposing a details content box must also participate in the grid. */
	.year-navigation__more::details-content { display: contents; }
	.year-navigation summary {
		grid-area: 1 / 2;
		align-self: start;
		margin: 4px;
		max-width: none;
	}
	.year-navigation .year-navigation__older {
		grid-area: 2 / 1 / 3 / 3;
		position: sticky;
		left: 0;
		box-sizing: border-box;
		width: 100cqi;
		max-width: 100cqi;
		max-height: none;
		overflow: visible;
	}
	.year-navigation__more:not([open]) .year-navigation__older { display: none; }
	/* Preserve the summary's accessible active-year text without visual repetition. */
	.year-navigation__active-detail {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}