/* scan_gallery.css
   Styles for the "Quick Review" gallery screen (#modalGallery).
   Self-contained: only relies on the site-wide ".modal" class for the
   fixed, dimmed, centered overlay behaviour already used by every other
   modal on this page (display:"table"/"none" toggling from JS). */

.gallery-container {
	--gallery-thumb-height: 160px;
	display: flex;
	flex-direction: column;
	width: 96vw;
	/* Everything else in a row (thumbnails, arrow, index, the 380px
	   detail-compare grid) is a fixed size - gallery-row-info (the card
	   name/set/price column) is the only flexible part, so it's what
	   actually shrinks or grows as this changes. 1000px was leaving long
	   names (e.g. "Attività Biologiche del Null Group") truncated. Raised
	   again to 1600px alongside THUMB_SIZE_MAX in scan_gallery.js - at the
	   slider's new top end the two thumbnails alone are ~600px wider than
	   before, and without this increase that growth would come straight
	   out of gallery-row-info's space instead. */
	max-width: 1600px;
	height: 88vh;
	max-height: 900px;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	text-align: left;
}

/* Each row now carries its own 380px-wide detail-compare grid alongside the
   thumbnails/info, so two side-by-side columns need real room - this is
   sized for that, not just "twice as wide as one column". Below the
   matching breakpoint further down this file, two columns fall back to a
   single column rather than clipping. Raised by the same 400px as the
   single-column max-width above, to keep pace with the bigger thumbnails
   the slider can now produce. */
.gallery-container.gallery-columns-2 {
	max-width: 2600px;
}

.gallery-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid #e2e2e2;
	background: #fafafa;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.gallery-header-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #222;
	display: flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.gallery-count {
	font-size: 0.8rem;
	font-weight: 500;
	color: #666;
}

.gallery-header-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	flex: 1;
	justify-content: flex-end;
}

#galleryFilterInput {
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.9rem;
	min-width: 160px;
}

.gallery-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: #444;
	cursor: pointer;
	white-space: nowrap;
	margin: 0;
}

.gallery-toggle input {
	margin: 0;
}

.gallery-size-control {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gallery-size-icon {
	opacity: 0.55;
	line-height: 1;
}

.gallery-size-icon-small {
	font-size: 0.7rem;
}

.gallery-size-icon-large {
	font-size: 1.35rem;
}

#galleryThumbSizeSlider {
	width: 120px;
	accent-color: #2f7fbf;
	cursor: pointer;
}

.gallery-columns-control {
	display: flex;
	border: 1px solid #ccc;
	border-radius: 6px;
	overflow: hidden;
}

.gallery-columns-btn {
	border: none;
	background: #fff;
	padding: 5px 11px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #666;
	cursor: pointer;
}

.gallery-columns-btn + .gallery-columns-btn {
	border-left: 1px solid #ccc;
}

.gallery-columns-btn.active {
	background: #2f7fbf;
	color: #fff;
}

/* Shared by the Top and Bottom jump buttons (#289): they are the same
   control pointing opposite ways, so they must not drift apart. */
.gallery-jump-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 11px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #666;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}

.gallery-jump-btn:hover {
	background: #e2f1fb;
	border-color: #2f7fbf;
	color: #2f7fbf;
}

.gallery-header .close {
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	color: #888;
}

.gallery-header .close:hover {
	color: #111;
}

.gallery-scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 14px;
	scrollbar-width: thin;
}

.gallery-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gallery-container.gallery-columns-2 .gallery-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 22px;
	row-gap: 10px;
}

.gallery-container.gallery-columns-2 .gallery-empty {
	grid-column: 1 / -1;
}

.gallery-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #f7fbfd;
	cursor: pointer;
	transition: background 0.12s ease;
	/* Without this, a grid item defaults to "auto" min-width, which for a
	   flex container means it won't shrink below its content's min-content
	   size. In 2-column mode that content includes a nowrap card name -
	   whichever row has the longer name would force its whole grid column
	   wider than its neighbor's, squeezing the *other* column's row (and
	   its fixed-width detail-compare) instead of splitting space evenly.
	   min-width:0 lets the row - and gallery-row-info's own min-width:0
	   below it - actually shrink/ellipsis instead. */
	min-width: 0;
}

.gallery-row:nth-child(even) {
	background: #ffffff;
}

.gallery-row:hover,
.gallery-row:focus-visible {
	background: #e2f1fb;
	outline: none;
}

.gallery-row-unmatched,
.gallery-row-unmatched:nth-child(even) {
	background: rgb(246, 217, 217) !important;
}

.gallery-row-unmatched:hover {
	background: rgb(240, 195, 195) !important;
}

.gallery-row-index {
	width: 18px;
	flex-shrink: 0;
	text-align: right;
	font-size: 0.85rem;
	color: #999;
}

.gallery-thumb {
	position: relative;
	height: var(--gallery-thumb-height);
	min-height: 80px;
	/* Kept slightly above THUMB_SIZE_MAX (500px, scan_gallery.js) as
	   headroom, same margin as before between the old 260/280 pair. */
	max-height: 520px;
	aspect-ratio: 2.5 / 3.5;
	width: auto;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #e9e9e9;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-thumb-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 0.68rem;
	text-align: center;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 0;
}

.gallery-thumb-arrow {
	flex-shrink: 0;
	width: 16px;
	text-align: center;
	font-size: 1.1rem;
	color: #aaa;
}

.gallery-thumb-nomatch {
	border-color: #e08b8b;
}

.gallery-no-match {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 0.8rem;
	color: #b23b3b;
	text-align: center;
	padding: 6px;
}

.gallery-row-info {
	flex: 1;
	min-width: 0;
}

.gallery-row-name {
	font-weight: 600;
	font-size: 1.1rem;
	color: #1a1a1a;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gallery-flag {
	height: 18px;
	width: auto;
	flex-shrink: 0;
}

.gallery-row-meta {
	font-size: 0.9rem;
	color: #666;
}

/* --- Detail crop comparison ------------------------------------------------
   Replaces the old plain "Found" / "Not found" label with a small
   label | scan | match grid: one row per AI-detected region (title, footer,
   collector number, set symbol, "The List" symbol), each showing a zoomed-in
   crop of that exact region from the scanned photo next to the same region
   from the Scryfall reference image, so a mismatch (wrong number, wrong set
   symbol...) is visible without opening the single-card review modal.
   See scan_gallery.js: buildDetailCompareHtml() / renderDetailCompare(). */

.detail-compare {
	/* Scales together with the Scan/Match thumbnails above (--gallery-thumb-height,
	   set by the image-size slider), clamped to a sane crop-chip range. Cap
	   raised from 56px to 100px (0.2 * the new 500px THUMB_SIZE_MAX) so the
	   crops keep scaling up instead of topping out well before the
	   thumbnails do. */
	--detail-crop-height: clamp(24px, calc(var(--gallery-thumb-height) * 0.2), 100px);
	flex-shrink: 0;
	width: 380px;
	display: grid;
	grid-template-columns: 46px 1fr 1fr;
	align-items: center;
	gap: 4px 8px;
}

.detail-compare-row {
	display: contents;
}

/* #328 round 2: the space a row's Scan|Match grid will occupy, held open before the
   row is painted.
   The grid above is 35 of the 49 elements a row costs and holds nothing until the
   row comes into view, so on a 2,900-card page it was 100,000 elements of reserved
   nothing. It is built in paintRow() now, and this placeholder keeps the row the
   same height either way - without that, every paint would grow its row and shove
   the list under the reader's scroll position.
   The height is the filled grid's own: five crop chips, the five 4px row gaps
   between them, and 22px for the head row - measured, not derived, because the
   head is text and its line box is not something to compute from a font size. A
   reserve 9px short made every paint grow its own row by 9px, which over 500 rows
   left the list 4,447px shorter than it ends up being. --detail-crop-height is declared on
   .detail-compare, which does not exist yet here, so the same clamp is repeated
   against --gallery-thumb-height - the one variable the size slider actually sets. */
.detail-compare-pending {
	flex-shrink: 0;
	width: 380px;
	min-height: calc(
		5 * clamp(24px, calc(var(--gallery-thumb-height) * 0.2), 100px) + 20px + 22px
	);
}


.detail-compare-head span {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #999;
	text-align: center;
}

.detail-compare-head span:first-child {
	visibility: hidden;
}

.detail-field-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: #777;
	text-align: right;
	padding-right: 4px;
	white-space: nowrap;
}

.detail-crop {
	/* A fixed window, not sized from the detected box - paintDetailCrop()
	   in scan_gallery.js scales the box to fit inside these exact
	   dimensions ("contain"), so the chip can never grow past its column
	   regardless of how wide/narrow the region it's showing is. */
	width: 100%;
	height: var(--detail-crop-height);
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	background: #f1f1f1;
	position: relative;
}

.detail-crop-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}

.detail-crop-empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.detail-crop-empty::after {
	content: "\2014";
	color: #bbb;
	font-size: 0.75rem;
}

.detail-crop-match.detail-crop-empty {
	border-style: dashed;
}

.gallery-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 8px;
	color: #777;
}

/* Two full-width rows (thumbnails + info + a 380px detail-compare grid each)
   need real room side by side. Below this, "2 columns" falls back to a
   single column rather than clipping the second column - the preference
   itself is preserved and reapplies once the window is wide enough again.
   This is intentionally separate from the general small-screen breakpoint
   below, since it's about the fixed-width content fitting, not about phone
   vs. desktop. Shifted up by the same 400px as the two-column max-width
   above, so it keeps tripping just below it rather than leaving a band
   where two clipped columns show before falling back. */
@media (max-width: 2550px) {
	.gallery-container.gallery-columns-2 .gallery-list {
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 900px) {
	.gallery-container,
	.gallery-container.gallery-columns-2 {
		width: 98vw;
		max-width: 98vw;
		height: 92vh;
		border-radius: 0;
	}

	.gallery-row-meta:nth-of-type(2) {
		display: none;
	}

	.gallery-header-controls {
		justify-content: flex-start;
	}

	.detail-compare {
		width: 220px;
		grid-template-columns: 30px 1fr 1fr;
		gap: 3px 5px;
	}

	.detail-field-label {
		font-size: 0.6rem;
	}

	.detail-compare-head span {
		font-size: 0.58rem;
	}

	#galleryThumbSizeSlider {
		width: 80px;
	}
}