/* Back-to-dashboard button styles moved to nav.css */

.tcg-set-list-page {
	padding: 0 var(--space-16) var(--space-64);
}

.page-grid{
	display: grid;
}

.tcg-set-list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.series-grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fill, 286px);
	gap: var(--space-48);
	justify-content: center;
}

.expansion-search {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-8);
	margin: calc(var(--space-16) + var(--space-8)) var(--space-32) var(--space-32) auto;
	width: min(420px, 100%);
	align-self: flex-end;
}

.content {
	display: flex;
	flex-direction: column;
}

.expansion-search-label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-lg);
	color: var(--colour-text);
	text-align: right;
	margin-bottom: var(--space-8);
}

.expansion-search-field {
	position: relative;
	width: 100%;
}

.expansion-search-input {
	width: 100%;
	padding: 12px 40px 12px 12px;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-xs);
	background: var(--colour-paper);
	color: var(--colour-text);
	font-family: var(--font-paragraph);
	font-size: var(--text-sm);
	box-sizing: border-box;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.expansion-search-input:hover {
	border-color: var(--colour-secondary);
}

.expansion-search-input:focus-visible {
	background-color: var(--colour-popup-paper);
	border-color: var(--colour-secondary);
	outline: 3px solid var(--colour-secondary);
	outline-offset: 0;
}

.expansion-search-input::placeholder {
	color: var(--colour-text-muted);
}

.expansion-search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--colour-secondary);
	pointer-events: none;
}

/* Section heading (set-header handoff Phase 5, 2026-09-30; README "Section
   heading"): a flex row with the left-aligned h2 and a muted meta line
   ("14 expansions · 2023 – 2025"). It replaced the centred .series-title pill
   band on the three index pages; that rule stays below for the Pokémon
   collections index, which still renders it. The right-side series progress
   bar (Phase 7) follows. */
.series-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16);
	margin: var(--space-40) 0 calc(var(--space-16) + var(--space-8));
}

.series-head__title {
	margin: 0;
	font-family: var(--font-header);
	font-size: var(--text-md);
	font-weight: var(--font-weight-lg);
	line-height: 1.2;
	text-align: left;
}

.series-head__meta {
	margin: 0;
	font-family: var(--font-paragraph);
	font-size: var(--text-sm);
	/* Hind sets its weight: the body is Montserrat 700. */
	font-weight: 400;
	color: var(--colour-text-muted);
}

/* The heading's right side (Phase 7, README section 9 "Section heading"):
   the group's progress at the page goal, "Series 312 / 2,412" and a 200px bar
   (set-list.php renders it, jump-bar.js follows the goal switch). It sits
   outside the meta line; under 1024px it takes its own row under the heading
   and the bar fills it. */
.series-head__progress {
	display: flex;
	align-items: center;
	gap: 8px 12px;
	margin-left: auto;
}

.series-head__progress-label {
	font-family: var(--font-header);
	font-size: 14px;
	font-weight: 600;
	color: var(--colour-text);
	white-space: nowrap;
}

.series-head__progress-count {
	font-family: var(--font-paragraph);
	font-size: 14px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--colour-text-muted);
	white-space: nowrap;
}

.series-head__bar {
	flex: none;
	width: 200px;
}

@media (max-width: 1023px) {
	.series-head__progress {
		flex: 1 0 100%;
		min-width: 0;
		margin-left: 0;
	}

	.series-head__bar {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}

/* A group the toolbar emptied (set-toolbar.js sets `hidden`). */
.series[hidden] {
	display: none;
}

/* The One Piece and Palworld indexes sit in .cards-page, a flex column
   (cards.css). The shared header and toolbar carry `margin: auto`, and a
   flex item with auto cross-axis margins shrinks to its content instead of
   stretching, so at 1440 the Palworld header stood 63px inside the tile
   grid on each side (the One Piece one only happened to be wide enough).
   Fill the column; the shared max-width still caps it. The Pokémon index
   and All Cards are block containers, where this changes nothing. */
.cards-page > .set-header,
.cards-page > .set-toolbar {
	width: 100%;
}

.series-title {
	font-size: var(--text-lg);
	text-align: center;
	width: fit-content;
	margin: var(--space-32) auto;
	background-color: var(--colour-paper);
	padding: var(--space-16);
	border-radius: var(--radius-md);
	box-shadow:
    0 20px 30px rgba(0,0,0,0.15),
    0 8px 10px rgba(0,0,0,0.10);
}

.series a {
	text-decoration: none;
}

/* The tile's link is an overlay (last child of .expansion, see set-list.php)
   whose only text is the set name. z-index 7 puts it above the name (6), the
   header (2) and the banner (1) so every pixel of the tile still opens the set;
   the bars' hover text-swap moved to the tile in script.js for the same reason. */
.set-tile-wrap {
	display: block;
}

.set-tile-link {
	position: absolute;
	inset: 0;
	z-index: 7;
	border-radius: inherit;
}

.set-tile-link:focus-visible {
	/* Drawn INSIDE the tile: .expansion clips overflow, so an outside ring
	   would never be painted. */
	outline: 3px solid var(--colour-secondary);
	outline-offset: -4px;
}

.expansion {
	width: var(--card-width-sm);
	height: var(--card-hight-sm);
	overflow: hidden;
	border-radius: var(--radius-sm);
	position: relative;
	background-color: var(--colour-filter);
	box-shadow:
    0 20px 30px rgba(0,0,0,0.15),
    0 8px 10px rgba(0,0,0,0.10);
	display: grid;
	grid-template-rows: 180px 180px 40px;
	scroll-margin-top: 32px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Force dark-mode palette on expansion tiles (dark overlay makes them always dark) */
.expansion {
	--colour-text: #FAFAFA;
	--colour-bg: #323232;
	--bar-track: #4A4A4A;
	--colour-chart-1: #2BA0DB;
	--colour-chart-2: #20D4A2;
	--colour-chart-3: #E8B84A;
}

.expansion:hover {
	transform: translateY(-4px);
	box-shadow:
		0 24px 38px rgba(0, 0, 0, 0.20),
		0 12px 16px rgba(0, 0, 0, 0.14);
}

.expansion.highlight-anchor {
	animation: expansion-highlight 1.5s ease;
}

@keyframes expansion-highlight {
	0%   { box-shadow: 0 0 0 4px var(--colour-primary), 0 20px 30px rgba(0,0,0,0.15); }
	100% { box-shadow: 0 20px 30px rgba(0,0,0,0.15), 0 8px 10px rgba(0,0,0,0.10); }
}

@media (prefers-reduced-motion: reduce) {
	.expansion.highlight-anchor {
		animation: none;
	}

	.expansion {
		transition: none;
	}
}

/* Picture wrapper for banner - must be absolute positioned to not affect layout */
.expansion > picture:first-child {
	position: absolute;
	z-index: 1;
}

.banner {
	width: auto;
	max-width: 286px;
	height: 400px;
	object-fit: cover;
	opacity: 0.8;
	filter: blur(1.75px);
}

.exp-header {
	z-index: 2;
	color: var(--colour-text);
	text-shadow:
	0.1em 0 var(--colour-bg), 
	0 0.1em var(--colour-bg), 
	-0.1em 0 var(--colour-bg), 
	0 -0.1em var(--colour-bg), 
	-0.1em -0.1em var(--colour-bg), 
	-0.1em 0.1em var(--colour-bg), 
	0.1em -0.1em var(--colour-bg), 
	0.1em 0.1em var(--colour-bg);
	width: 100%;
	display: grid;
	justify-items: center;
	height: auto;
	position: relative;
	padding-top: 37px;
	box-sizing: border-box;

}

.exp-header p{
	font-size: var(--text-md);
	margin: 0;
	text-align: center;
	width: auto;
	z-index: 6;
	padding: 0;
	position: absolute;
	top: var(--space-16);
	left: var(--space-8);
	right: var(--space-8);
	box-sizing: border-box;
	line-height: 1.2;
	white-space: normal;
	overflow: visible;
}

.exp-logo {
	width: 95%;
	height: 143px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}


.exp-body{

	z-index: 2;
	height: auto;
	width: 100%;
	color: var(--colour-text);
	text-shadow:
	0.1em 0 var(--colour-bg), 
	0 0.1em var(--colour-bg), 
	-0.1em 0 var(--colour-bg), 
	0 -0.1em var(--colour-bg), 
	-0.1em -0.1em var(--colour-bg), 
	-0.1em 0.1em var(--colour-bg), 
	0.1em -0.1em var(--colour-bg), 
	0.1em 0.1em var(--colour-bg);
	font-size: var(--text-sm);
	align-items: center;
	justify-content: center;
	justify-items: center;
	align-content: center;
	display: grid;
	grid-template-columns: 100%;
	grid-auto-rows: 30px;
}

.exp-body p{
	margin: 0;
	margin-bottom: var(--space-4);
	position: relative;
	font-size: var(--text-sm);
}

.progress-bar {
    position: relative;
    background-color: var(--bar-track);
    width: 246px;
    height: 18px;
    border-radius: 9px;
    margin-bottom: var(--space-16);
    overflow: hidden;
    cursor: pointer; /* for hover feedback */
    outline: 1px solid var(--colour-bg);
}

/* Dashboard card progress bars — tinted track matching each tier's fill */
.expansion .progress-bar:has(.progress-fill--base) {
    background-color: color-mix(in srgb, var(--colour-chart-1) 50%, transparent);
}
.expansion .progress-bar:has(.progress-fill--master) {
    background-color: color-mix(in srgb, var(--colour-chart-2) 50%, transparent);
}
.expansion .progress-bar:has(.progress-fill--grand) {
    background-color: color-mix(in srgb, var(--colour-chart-3) 50%, transparent);
}

.progress-fill {
    background-color: var(--colour-primary);
    height: 100%;
    border-radius: 9px;
    transition: width 0.4s ease;
}

.progress-fill--base   { background-color: var(--colour-chart-1); }
.progress-fill--master { background-color: var(--colour-chart-2); }
.progress-fill--grand  { background-color: var(--colour-chart-3); }

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--colour-text);
    font-weight: bold;
    font-size: var(--text-xs);
    pointer-events: none;
    user-select: none;
    text-shadow:
        0.1em 0 var(--colour-bg),
        0 0.1em var(--colour-bg),
       -0.1em 0 var(--colour-bg),
        0 -0.1em var(--colour-bg),
       -0.1em -0.1em var(--colour-bg),
       -0.1em 0.1em var(--colour-bg),
        0.1em -0.1em var(--colour-bg),
        0.1em 0.1em var(--colour-bg);
}

.exp-footer{
	width: 100%;
	z-index: 2;
	bottom: 0px;
	color: var(--colour-text);
	text-shadow:
	0.1em 0 var(--colour-bg),
	0 0.1em var(--colour-bg),
	-0.1em 0 var(--colour-bg),
	0 -0.1em var(--colour-bg),
	-0.1em -0.1em var(--colour-bg),
	-0.1em 0.1em var(--colour-bg),
	0.1em -0.1em var(--colour-bg),
	0.1em 0.1em var(--colour-bg);
	display: flex;
	align-items: center;
	width: auto;
	gap: var(--space-8);
	margin: 0px 0px calc(var(--radius-xs)/2) calc(var(--radius-xs)/2);
}

.exp-footer p{
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--text-sm);
	margin: 0;
}

.exp-footer-badge {
	flex: 0 0 auto;
	margin-right: var(--space-8);
	padding: 0.15rem 0.5rem;
	font-size: var(--text-xs);
	gap: 0.25rem;
}

/* Phase 6 — full set value + 7d delta in the expansion tile footer,
   right-aligned opposite the release date. Wrapped in a subtle pill
   so it doesn't get lost against the banner artwork behind it.
   Tabular-nums keeps digits from jiggling between rows. */
.exp-footer-price {
	margin-left: auto;
	margin-right: var(--space-12);
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	font-weight: var(--font-weight-md);
	background: rgba(0, 0, 0, 0.55);
	border-radius: 4px;
	padding: 2px 8px;
}

[data-theme="light"] .exp-footer-price,
:root:not([data-theme="dark"]) .exp-footer-price {
	background: rgba(0, 0, 0, 0.45);
}

.exp-footer-price__value {
	font-size: var(--text-sm);
	/* White on the dark pill regardless of theme — light-mode users
	   would otherwise get dark-on-dark. */
	color: #fff;
	/* Override the .exp-footer banner-outline text-shadow inside the
	   solid pill — the outline only earns its keep over artwork. */
	text-shadow: none;
}

.exp-symbol{
	left: 16px;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.profile-card{
	margin: 60px auto 0 auto;
}

.profile-background{
	position: relative;
	width: 95%;
	min-width: 600px;
	/* height: 160px; */
	background-color: var(--colour-paper);
	margin: 0 auto 90px auto; /* to make space for info-cards 180px */ 
	border-radius: var(--radius-md);
	box-shadow:
    0 20px 30px rgba(0,0,0,0.15),
    0 8px 10px rgba(0,0,0,0.10);
}

/* .profile-img{
	position: absolute;
	width: 135px;
	height: 135px;
	border-radius: 50%;
	background-color: #00A3FF;
	z-index: 1;
	margin: 1% auto auto 1%;
} */

.profile-name{
	position: relative;
	display: flex;
	font-size: var(--text-lg);
	z-index: 2;
	color: var(--colour-text);
	justify-content: center;
	align-items: center;
}

/* .info-cards{
	display: grid;
	height: 160px;
	width: 100%;
	grid-template-columns: repeat(2, minmax(200px, 286px));
	gap: var(--space-16);
	justify-content: center;
	z-index: 1;	
} */

/* .profile-info-card{
	background-color: var(--colour-primary);
	border-radius: var(--radius-md);
	box-shadow:
    0 20px 30px rgba(0,0,0,0.15),
    0 8px 10px rgba(0,0,0,0.10);
} */

/* ── Cards / Compact (Phase 7, README 9a) ──
   set-toolbar.php's Tile size switch sets <html data-ttcg-tiles>, and a list
   rendered with 'tileViews' (tcg-set-list--tileviews) restyles its tiles. The
   DOM is the same in both modes, so the toolbar's sort and filter keep
   working; the header, the toolbar and the section headings do not change.
   Cards is the default tile above. */
.exp-code-chip {
	display: none;
}

/* The switch is the page's view control at every width; a 44px target on a
   phone, where it sits beside Sort. */
@media (max-width: 1023px) {
	/* The toolbar stacks in a wrapping column there, whose line takes the
	   widest row's natural width: without a cap, Sort would not give way and
	   the row would run 2px past the toolbar at 390. */
	.set-toolbar__right:has(> .tile-view-switch) {
		max-width: 100%;
		/* Sort keeps its whole label ("Sort Newest", never "Sort New..."):
		   the two controls sit 8px apart, so they share one row down to about
		   385px (390 included), and on a narrower phone the switch takes its
		   own row. */
		flex-wrap: wrap;
		column-gap: 8px;
	}

	.set-toolbar__right:has(> .tile-view-switch) > .tb-menu[data-tb-menu="sort"] {
		flex: 1 0 auto;
	}

	.tile-view-switch {
		flex: none;
	}

	.tile-view-switch__option {
		justify-content: center;
		min-height: 44px;
		padding: 0 12px;
	}
}

/* Compact is the dense view (mock 18): 32px between tiles both ways, and
   from 1024px the grid starts under the section heading's left edge, so a
   row holds four 286px tiles at 1440 (4 × 286 + 3 × 32 = 1,240px of a
   1,264px column, 1,249px beside a 15px scrollbar), three at 1280 and two
   at 1024. Under 1024 it stays centred, one tile a row on a phone. Cards
   keeps its 48px gap, centred. */
html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .series-grid {
	gap: var(--space-32);
}

@media (min-width: 1024px) {
	html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .series-grid {
		justify-content: start;
	}
}

/* The compact tile sits on the page's paper, so it takes the page's palette
   back from the forced-dark card tile (inherit: the parent's value). */
html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .expansion {
	--colour-text: inherit;
	--colour-bg: inherit;
	--bar-track: inherit;
	--colour-chart-1: inherit;
	--colour-chart-2: inherit;
	--colour-chart-3: inherit;
	height: auto;
	grid-template-rows: 96px auto auto;
	background-color: var(--colour-paper);
	box-shadow: var(--shadow-floating);
}

/* A 96px banner: the tile's own picture, cropped to fill. */
html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .expansion > picture:first-child {
	top: 0;
	right: 0;
	left: 0;
	display: block;
	height: 96px;
	overflow: hidden;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .banner {
	display: block;
	width: 100%;
	max-width: none;
	height: 96px;
}

/* The name and the code chip at the banner's foot, light on the art with the
   tiles' halo. expansions.js fits the card tile's title inline; the compact
   size wins over it. */
html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-header {
	grid-row: 1;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 96px;
	padding: 12px 16px;
	color: #FAFAFA;
	text-shadow:
		0.1em 0 #323232,
		0 0.1em #323232,
		-0.1em 0 #323232,
		0 -0.1em #323232,
		-0.1em -0.1em #323232,
		-0.1em 0.1em #323232,
		0.1em -0.1em #323232,
		0.1em 0.1em #323232;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-header > p {
	position: static;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	color: #FAFAFA;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-header > :not(p):not(.exp-code-chip) {
	display: none;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-code-chip {
	display: inline-block;
	flex: none;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(18, 18, 18, 0.75);
	color: #FAFAFA;
	font-family: var(--font-header);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	white-space: nowrap;
	text-shadow: none;
}

/* The bars without their visible labels (each keeps its % text). The labels
   stay for screen readers (README, Accessibility: every bar is named), so
   they are visually hidden, not removed. */
html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-body {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 16px 0;
	text-shadow: none;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-body > p {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .progress-bar {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-body--state {
	align-items: flex-start;
}

/* The release date (muted) and the price (600, text colour); no symbol. */
html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-footer {
	grid-row: 3;
	margin: 0;
	padding: 8px 16px 16px;
	text-shadow: none;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-footer > picture,
html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-footer > .exp-symbol {
	display: none;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-footer > p {
	font-size: 14px;
	font-weight: 600;
	color: var(--colour-text-muted);
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-footer-price {
	margin-right: 0;
	padding: 0;
	background: none;
}

html[data-ttcg-tiles="compact"] .tcg-set-list--tileviews .exp-footer-price__value {
	color: var(--colour-text);
	font-weight: 600;
}