/*
 * Shared card picker + photo slot (occ-cards.js). Tokens only; buttons/fields reuse the theme's
 * .occ-button / .occ-field components. Card media keep the 63:88 card ratio and `contain` (V40).
 */
@layer occ.components {
	/* Picker ------------------------------------------------------------- */
	.occ-cards-picker {
		display: grid;
		gap: var(--occ-space-4);
		min-width: 0;
	}

	.occ-cards-picker__group {
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.occ-cards-picker__group[hidden],
	.occ-cards-picker__list[hidden],
	.occ-cards-picker__status[hidden],
	.occ-cards-picker [hidden] {
		display: none;
	}

	.occ-cards-picker__legend {
		margin-block-end: var(--occ-space-2);
		padding: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-bold);
		letter-spacing: var(--occ-tracking-caps);
		line-height: var(--occ-leading-ui);
		text-transform: uppercase;
	}

	/* Mobile: game tiles are one swipeable row (thumb-sized), not a tall stack. */
	.occ-cards-picker__tiles {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(7.5rem, 40%);
		gap: var(--occ-space-2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding-block-end: var(--occ-space-2);
	}

	.occ-cards-tile {
		position: relative;
		display: grid;
		grid-template-rows: var(--occ-space-12) auto;
		gap: var(--occ-space-2);
		align-items: center;
		justify-items: center;
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-3);
		border: var(--occ-border-width) solid var(--occ-border-strong);
		border-radius: var(--occ-radius-md);
		background: var(--occ-surface);
		cursor: pointer;
		scroll-snap-align: start;
		text-align: center;
		transition:
			border-color var(--occ-duration-base) var(--occ-ease-standard),
			background-color var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-cards-tile:hover {
		border-color: var(--occ-accent-strong);
	}

	.occ-cards-tile:has(input:checked) {
		border-color: var(--occ-fg);
		border-width: var(--occ-border-width-strong);
		background: var(--occ-bg-elevated);
	}

	.occ-cards-tile:has(input:focus-visible),
	.occ-cards-chip:has(input:focus-visible),
	.occ-cards-slot__file:has(input:focus-visible) {
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.occ-cards-tile__logo {
		display: grid;
		place-items: center;
		width: 100%;
		height: var(--occ-space-12);
		padding: var(--occ-space-1) var(--occ-space-2);
		border-radius: var(--occ-radius-sm);
		/* Game logos are made for dark packaging (One Piece's is white-on-transparent): theme-fixed dark plate. */
		background: var(--occ-plate-dark);
		overflow: hidden;
	}

	.occ-cards-tile__logo img {
		/* A % max-height doesn't resolve on a grid item here; cap against the box explicitly. */
		width: auto;
		max-width: 100%;
		max-height: calc(var(--occ-space-12) - 2 * var(--occ-space-1));
		object-fit: contain;
	}

	.occ-cards-tile__label {
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-tight);
		overflow-wrap: anywhere;
	}

	.occ-cards-picker__chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2);
	}

	.occ-cards-chip {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		padding-inline: var(--occ-space-4);
		border: var(--occ-border-width) solid var(--occ-border-strong);
		border-radius: var(--occ-radius-md);
		background: var(--occ-surface);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-ui);
		cursor: pointer;
		transition: border-color var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-cards-chip:hover {
		border-color: var(--occ-accent-strong);
	}

	.occ-cards-chip:has(input:checked) {
		border-color: var(--occ-fg);
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
		font-weight: var(--occ-fw-bold);
	}

	.occ-cards-picker__combo {
		position: relative;
	}

	.occ-cards-picker__input {
		padding-inline-end: var(--occ-space-12);
	}

	.occ-cards-picker__spin {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: var(--occ-space-4);
		margin-block-start: -0.5em;
		color: var(--occ-accent-ink);
	}

	.occ-cards-picker__list {
		display: grid;
		gap: var(--occ-space-1);
		max-height: min(60vh, 28rem);
		margin: 0;
		padding: var(--occ-space-2);
		overflow-y: auto;
		list-style: none;
		border: var(--occ-border-width) solid var(--occ-border-strong);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-surface);
		box-shadow: var(--occ-shadow-sm);
	}

	.occ-cards-hit {
		display: grid;
		grid-template-columns: var(--occ-space-12) minmax(0, 1fr);
		gap: var(--occ-space-3);
		align-items: center;
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2);
		border-radius: var(--occ-radius-md);
		cursor: pointer;
	}

	.occ-cards-hit:hover,
	.occ-cards-hit.is-active {
		background: var(--occ-bg-subtle);
	}

	.occ-cards-hit.is-active {
		box-shadow: inset 0 0 0 var(--occ-border-width-strong) var(--occ-accent-ink);
	}

	.occ-cards-hit__media,
	.occ-cards-slot__media {
		display: grid;
		place-items: center;
		aspect-ratio: 63 / 88;
		overflow: hidden;
		color: var(--occ-border-strong);
		background: var(--occ-bg-subtle);
	}

	.occ-cards-hit__media {
		border-radius: var(--occ-radius-xs);
	}

	.occ-cards-hit__media img,
	.occ-cards-slot__media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.occ-cards-hit__text {
		display: grid;
		gap: var(--occ-space-1);
		min-width: 0;
	}

	.occ-cards-hit__name {
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-tight);
		overflow-wrap: anywhere;
	}

	.occ-cards-hit__meta {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-ui);
		overflow-wrap: anywhere;
	}

	.occ-cards-picker__status {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2) var(--occ-space-4);
		align-items: center;
	}

	.occ-cards-picker__msg,
	.occ-cards-slot__msg {
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-ui);
	}

	.occ-cards-picker__msg:empty,
	.occ-cards-slot__msg:empty {
		display: none;
	}

	.occ-cards-picker__manual {
		border-block-start: var(--occ-border-width) solid var(--occ-border);
		padding-block-start: var(--occ-space-2);
	}

	.occ-cards-picker__summary {
		display: flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		font-weight: var(--occ-fw-bold);
		cursor: pointer;
	}

	.occ-cards-picker__manual-body {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--occ-space-4);
		padding-block: var(--occ-space-2) var(--occ-space-4);
	}

	.occ-cards-picker__m-name,
	.occ-cards-picker__m-err,
	.occ-cards-picker__manual-body > .occ-button {
		grid-column: 1 / -1;
	}

	.occ-cards-picker__manual-body > .occ-button {
		justify-self: start;
	}

	/* Photo slot --------------------------------------------------------- */
	.occ-cards-slot {
		display: grid;
		grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
		gap: var(--occ-space-4);
		align-items: start;
	}

	.occ-cards-slot__media {
		border: var(--occ-border-width) dashed var(--occ-border-strong);
		border-radius: var(--occ-radius-lg);
	}

	.occ-cards-slot__media.has-photo {
		border-style: solid;
	}

	.occ-cards-slot[aria-busy="true"] .occ-cards-slot__media {
		opacity: 0.6;
	}

	.occ-cards-slot__body {
		display: grid;
		gap: var(--occ-space-3);
		align-content: start;
		min-width: 0;
	}

	.occ-cards-slot__title {
		margin: 0;
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-bold);
		letter-spacing: var(--occ-tracking-caps);
		line-height: var(--occ-leading-ui);
		text-transform: uppercase;
	}

	.occ-cards-slot__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-2) var(--occ-space-4);
		align-items: center;
	}

	.occ-cards-slot__actions .occ-button {
		min-height: var(--occ-touch-min);
	}

	.occ-cards-slot__file {
		cursor: pointer;
	}

	.occ-cards-slot [hidden],
	.occ-cards-slot__qr[hidden] {
		display: none;
	}

	.occ-cards-slot__qr {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
		gap: var(--occ-space-4);
		align-items: center;
		padding: var(--occ-space-4);
		border: var(--occ-border-width) solid var(--occ-border-premium);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-bg-elevated);
	}

	/* The QR stays black on white for scanners, framed by the surface token. */
	.occ-cards-slot__qr-code {
		display: grid;
		place-items: center;
		aspect-ratio: 1;
		padding: var(--occ-space-2);
		border-radius: var(--occ-radius-sm);
		background: var(--occ-plate-light);
	}

	.occ-cards-slot__qr-code svg {
		width: 100%;
		height: auto;
	}

	.occ-cards-slot__qr-text {
		display: grid;
		gap: var(--occ-space-3);
	}

	.occ-cards-slot__qr-help {
		margin: 0;
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-body);
	}

	.occ-cards-slot__qr-help:focus {
		outline: none;
	}

	@media (min-width: 48rem) {
		.occ-cards-picker__tiles {
			grid-auto-flow: row;
			grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
			overflow: visible;
			padding-block-end: 0;
		}

		.occ-cards-picker__manual-body {
			grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
		}

		.occ-cards-picker__m-name {
			grid-column: auto;
		}

		.occ-cards-slot {
			grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
			gap: var(--occ-space-6);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.occ-cards-tile,
		.occ-cards-chip {
			transition: none;
		}

		.occ-cards-picker .occ-spinner,
		.occ-cards-slot .occ-spinner,
		.occ-cards-slot .occ-button[aria-busy="true"]::after {
			animation: none;
		}
	}
}