/**
 * Tribal Order Vault — Public Card Database
 * =============================================================================
 * ART DIRECTION — "The Vault Ledger"
 *
 * A dark, ceremonial archive of relics rather than a generic marketplace grid.
 * Gold leaf on obsidian; the feel of a bound codex in a dim war room.
 * Extrapolated from the reference mockup's near-black + amber + condensed-heavy
 * language (that mockup is the future Hot Deals home, not this page).
 *
 *   Type      Oswald (condensed heavy display) + Barlow (humanist body).
 *   Palette   One dominant gold hue on near-black; rarity color-coding as the
 *             only functional accents (Legendary/Epic/Rare/Uncommon/Common).
 *   Signature The card tile as a "relic frame": sharp gold hairline, a
 *             rarity-colored top edge, corner pip badges (season + rarity), and
 *             a hover "charge" (hairline brightens, art lifts, soft inner glow).
 *   Texture   Faint film-grain + vignette so the black is never flat/sterile.
 *   Motion    One orchestrated stagger-in on load; transform/opacity only;
 *             full prefers-reduced-motion fallback.
 *
 * Everything is scoped under `.tov-db` so it never fights the host theme.
 * This file is shared verbatim by the standalone prototype and the WP plugin.
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * Design tokens
 * ------------------------------------------------------------------------- */
.tov-db {
	/* Native controls (the sort select's system menu, scrollbars) follow the
	   UA scheme — dark, to match the committed-dark catalog. */
	color-scheme: dark;
	/* Color — obsidian base */
	--tov-bg: #0a0a0b;
	--tov-bg-2: #0d0d0f;
	--tov-surface: #151517;
	--tov-surface-2: #1b1b1f;
	--tov-surface-3: #232329;

	/* Color — gold accent system (one dominant hue) */
	--tov-gold: #d4a24e;
	--tov-gold-bright: #ecc677;
	--tov-gold-deep: #8a6a2f;
	--tov-line: rgba(212, 162, 78, 0.18);
	--tov-line-strong: rgba(212, 162, 78, 0.55);

	/* Color — text */
	--tov-text: #f4f1ea;
	--tov-text-muted: #a19d95;
	/* AA: #6f6b64 on #0a0a0b was 3.74:1; #857f75 is ~4.99:1 for the small labels. */
	--tov-text-dim: #857f75;

	/* Color — rarity coding (functional, used sparingly) */
	--tov-legendary: #d4a24e;
	--tov-epic: #a978d9;
	--tov-rare: #b145c4;
	--tov-uncommon: #5fb37a;
	--tov-common: #ffffff;

	/* Color — feedback */
	--tov-focus: #ecc677;
	--tov-success: #5fb37a;
	--tov-warning: #e0a458;
	--tov-danger: #d9634e;

	/* Typography */
	--tov-font-display: "Oswald", "Bebas Neue", "Arial Narrow", sans-serif;
	--tov-font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

	--tov-text-xs: 0.6875rem;   /* 11px */
	--tov-text-sm: 0.8125rem;   /* 13px */
	--tov-text-base: 0.9375rem; /* 15px */
	--tov-text-lg: 1.125rem;    /* 18px */
	--tov-text-xl: 1.5rem;      /* 24px */
	--tov-text-2xl: 2.25rem;    /* 36px */
	--tov-text-3xl: 3.25rem;    /* 52px */

	/* Spacing (4px base) */
	--tov-space-1: 4px;
	--tov-space-2: 8px;
	--tov-space-3: 12px;
	--tov-space-4: 16px;
	--tov-space-5: 24px;
	--tov-space-6: 32px;
	--tov-space-8: 48px;

	/* Radius — kept sharp; a card is a card, not a pill */
	--tov-r-sm: 2px;
	--tov-r-md: 5px;
	--tov-r-lg: 9px;
	--tov-r-pill: 999px;

	/* Shadow + glow */
	--tov-shadow-md: 0 10px 30px -14px rgba(0, 0, 0, 0.9);
	--tov-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.95);
	--tov-charge: 0 0 0 1px var(--tov-line-strong),
		0 18px 40px -18px rgba(0, 0, 0, 0.9),
		0 0 26px -6px rgba(212, 162, 78, 0.4);

	/* Motion */
	--tov-dur-fast: 120ms;
	--tov-dur-base: 220ms;
	--tov-dur-slow: 420ms;
	--tov-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--tov-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Layout */
	--tov-tile-min: 232px;
	--tov-max-width: 1600px;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: var(--tov-space-6) var(--tov-space-5) var(--tov-space-8);
	max-width: var(--tov-max-width);
	background: var(--tov-bg);
	color: var(--tov-text);
	font-family: var(--tov-font-body);
	font-size: var(--tov-text-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.tov-db *,
.tov-db *::before,
.tov-db *::after {
	box-sizing: border-box;
}

/* Background texture: film grain + vignette, so black is never flat.
 * Grain is an inline SVG turbulence; vignette is a radial gradient. Both are
 * fixed to the module, pointer-events none, and cheap (no repaint on scroll). */
.tov-db::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% -10%, rgba(212, 162, 78, 0.07), transparent 55%),
		radial-gradient(100% 100% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 60%);
}

.tov-db::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.4;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.tov-db > * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Masthead
 * ------------------------------------------------------------------------- */
.tov-db__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tov-space-4);
	padding-bottom: var(--tov-space-4);
	margin-bottom: var(--tov-space-5);
	border-bottom: 1px solid var(--tov-line);
}

.tov-db__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--tov-space-2);
	margin: 0 0 var(--tov-space-1);
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--tov-gold);
}

.tov-db__eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, var(--tov-gold), transparent);
}

.tov-db__title {
	margin: 0;
	font-family: var(--tov-font-display);
	font-weight: 700;
	font-size: var(--tov-text-3xl);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--tov-text);
}

.tov-db__title em {
	font-style: normal;
	color: var(--tov-gold);
}

.tov-db__count {
	font-family: var(--tov-font-display);
	font-weight: 300;
	font-size: var(--tov-text-lg);
	letter-spacing: 0.04em;
	color: var(--tov-text-muted);
}

.tov-db__count b {
	color: var(--tov-gold);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * KPI strip — nine at-a-glance stats; JS recomputes these against the currently
 * visible (filtered) cards. Server-rendered against the full catalog first so
 * the numbers are correct even without JS.
 *
 * Composition (the intentional grid break): one emphasized "Cards Shown" plate
 * spans both rows on the left; the eight secondary metrics fill a 4×2 block
 * beside it. Collapses to full-width primary + a flowing grid on smaller sizes.
 * ------------------------------------------------------------------------- */
.tov-db__kpis {
	display: grid;
	grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--tov-space-3);
	margin-bottom: var(--tov-space-5);
}

.tov-kpi {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	padding: var(--tov-space-4);
	background: var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
}

/* top-edge accent rule (rarity-coded where relevant, gold otherwise) */
.tov-kpi::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--tov-gold);
	opacity: 0.7;
}
.tov-kpi--legendary::before { background: var(--tov-legendary); opacity: 0.9; }
.tov-kpi--rare::before      { background: var(--tov-rare); opacity: 0.9; }
.tov-kpi--common::before    { background: var(--tov-common); opacity: 0.55; }
.tov-kpi--hero::before      { background: linear-gradient(90deg, var(--tov-gold), var(--tov-gold-bright)); opacity: 1; }

.tov-kpi__value {
	display: block;
	font-family: var(--tov-font-display);
	font-weight: 700;
	font-size: var(--tov-text-xl);
	line-height: 1;
	color: var(--tov-gold);
	font-variant-numeric: tabular-nums;
}
.tov-kpi--rare .tov-kpi__value    { color: var(--tov-rare); }
.tov-kpi--common .tov-kpi__value  { color: var(--tov-text); }

.tov-kpi__label {
	display: block;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tov-text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Primary "Cards Shown" plate — spans both rows, larger, gold-washed. */
.tov-kpi--primary {
	grid-column: 1;
	grid-row: 1 / span 2;
	justify-content: flex-end;
	gap: var(--tov-space-1);
	padding: var(--tov-space-5);
	background:
		radial-gradient(120% 90% at 0% 100%, rgba(212, 162, 78, 0.14), transparent 60%),
		linear-gradient(160deg, var(--tov-surface-2), var(--tov-surface));
	border-color: var(--tov-line-strong);
}
.tov-kpi--primary::before {
	height: 4px;
	opacity: 1;
	background: linear-gradient(90deg, var(--tov-gold-bright), var(--tov-gold), transparent);
}
.tov-kpi--primary .tov-kpi__value {
	font-size: var(--tov-text-3xl);
	color: var(--tov-gold-bright);
}
.tov-kpi--primary .tov-kpi__label {
	font-size: var(--tov-text-sm);
	letter-spacing: 0.2em;
	color: var(--tov-text-muted);
}

/* Rarity KPI tiles that are real filter controls (A2): the readout becomes a
   button that toggles the matching rarity facet. Only Legendary/Rare/Common
   are controls (they map to a single facet term); the other tiles stay inert. */
.tov-kpi--legendary { --tov-kpi-edge: var(--tov-legendary); }
.tov-kpi--rare      { --tov-kpi-edge: var(--tov-rare); }
.tov-kpi--common    { --tov-kpi-edge: var(--tov-common); }

.tov-kpi--control {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	margin: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color var(--tov-dur-base) var(--tov-ease-out),
		box-shadow var(--tov-dur-base) var(--tov-ease-out),
		background var(--tov-dur-base) var(--tov-ease-out);
}

.tov-kpi--control:hover {
	border-color: color-mix(in srgb, var(--tov-kpi-edge, var(--tov-gold)) 55%, var(--tov-line));
}
.tov-kpi--control:hover::before {
	opacity: 1;
}

.tov-kpi--control:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 2px;
}

/* Pressed = the facet is active: brighter rarity edge + a subtle inset charge. */
.tov-kpi--control[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--tov-kpi-edge, var(--tov-gold)) 65%, var(--tov-line));
	background: var(--tov-surface-2);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--tov-kpi-edge, var(--tov-gold)) 45%, transparent),
		inset 0 0 24px -12px var(--tov-kpi-edge, var(--tov-gold));
}
.tov-kpi--control[aria-pressed="true"]::before {
	height: 4px;
	opacity: 1;
}

.tov-kpi--control:disabled {
	cursor: default;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Toolbar: search + filters trigger
 * ------------------------------------------------------------------------- */
.tov-db__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tov-space-3);
	margin-bottom: var(--tov-space-4);
}

.tov-search {
	position: relative;
	flex: 1 1 320px;
	min-width: 0;
}

.tov-search__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	color: var(--tov-text-dim);
	pointer-events: none;
	transition: color var(--tov-dur-base) var(--tov-ease-out);
}

.tov-search__input {
	width: 100%;
	height: 52px;
	padding: 0 44px 0 44px;
	font-family: var(--tov-font-body);
	font-size: var(--tov-text-base);
	color: var(--tov-text);
	background: var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
	transition: border-color var(--tov-dur-base) var(--tov-ease-out),
		box-shadow var(--tov-dur-base) var(--tov-ease-out),
		background var(--tov-dur-base) var(--tov-ease-out);
}

.tov-search__input::placeholder {
	color: var(--tov-text-dim);
}

/* Hide the browser's native search "x" — we render our own clear button */
.tov-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.tov-search__input:hover {
	border-color: var(--tov-line-strong);
}

.tov-search__input:focus,
.tov-search__input:focus-visible {
	outline: none;
	background: var(--tov-surface-2);
	border-color: var(--tov-gold);
	box-shadow: 0 0 0 3px rgba(212, 162, 78, 0.18);
}

.tov-search__input:focus ~ .tov-search__icon {
	color: var(--tov-gold);
}

/* Clear button — appears only when there is a query (toggled via JS) */
.tov-search__clear {
	position: absolute;
	top: 50%;
	right: 8px;
	display: none;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	transform: translateY(-50%);
	color: var(--tov-text-muted);
	background: transparent;
	border: 0;
	border-radius: var(--tov-r-sm);
	cursor: pointer;
	transition: color var(--tov-dur-fast) var(--tov-ease-out),
		background var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-search.is-filled .tov-search__clear {
	display: grid;
}

.tov-search__clear:hover {
	color: var(--tov-text);
	background: var(--tov-surface-3);
}

.tov-search__clear:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 1px;
}

/* Sort control */
.tov-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 52px;
}

.tov-sort__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	color: var(--tov-text-dim);
	pointer-events: none;
	transition: color var(--tov-dur-base) var(--tov-ease-out);
}

.tov-sort::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 17px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid var(--tov-text-dim);
	border-bottom: 2px solid var(--tov-text-dim);
	transform: rotate(45deg);
	pointer-events: none;
	transition: border-color var(--tov-dur-base) var(--tov-ease-out);
}

.tov-sort__select {
	height: 52px;
	padding: 0 34px 0 40px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: var(--tov-text-sm);
	letter-spacing: 0.04em;
	color: var(--tov-text);
	background: var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
	cursor: pointer;
	transition: border-color var(--tov-dur-base) var(--tov-ease-out),
		color var(--tov-dur-base) var(--tov-ease-out),
		background var(--tov-dur-base) var(--tov-ease-out);
}

.tov-sort__select:hover {
	border-color: var(--tov-line-strong);
	color: var(--tov-gold);
}

.tov-sort__select:focus,
.tov-sort__select:focus-visible {
	outline: none;
	background: var(--tov-surface-2);
	border-color: var(--tov-gold);
	box-shadow: 0 0 0 3px rgba(212, 162, 78, 0.18);
}

.tov-sort:hover .tov-sort__icon,
.tov-sort:focus-within .tov-sort__icon {
	color: var(--tov-gold);
}

.tov-sort:hover::after,
.tov-sort:focus-within::after {
	border-color: var(--tov-gold);
}

/* Filters trigger button */
.tov-filters__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--tov-space-2);
	height: 52px;
	padding: 0 var(--tov-space-4);
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: var(--tov-text-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tov-text);
	background: var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
	cursor: pointer;
	transition: border-color var(--tov-dur-base) var(--tov-ease-out),
		color var(--tov-dur-base) var(--tov-ease-out),
		background var(--tov-dur-base) var(--tov-ease-out);
}

.tov-filters__trigger:hover {
	border-color: var(--tov-line-strong);
	color: var(--tov-gold);
}

.tov-filters__trigger:active {
	background: var(--tov-surface-2);
}

.tov-filters__trigger:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 2px;
}

.tov-filters__trigger[aria-expanded="true"] {
	border-color: var(--tov-gold);
	color: var(--tov-gold);
	background: var(--tov-surface-2);
}

.tov-filters__trigger svg {
	width: 16px;
	height: 16px;
}

/* Count badge on the trigger — number of active filters */
.tov-filters__badge {
	display: none;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-family: var(--tov-font-body);
	font-weight: 600;
	font-size: var(--tov-text-xs);
	color: var(--tov-bg);
	background: var(--tov-gold);
	border-radius: var(--tov-r-pill);
}

.tov-filters__trigger.has-active .tov-filters__badge {
	display: grid;
}

/* ---------------------------------------------------------------------------
 * Filter drawer (the "control panel")
 * ------------------------------------------------------------------------- */
.tov-filters__panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
	border: 1px solid transparent;
	border-radius: var(--tov-r-lg);
	background: linear-gradient(180deg, var(--tov-surface-2), var(--tov-surface));
	transition: max-height var(--tov-dur-slow) var(--tov-ease-out),
		opacity var(--tov-dur-base) var(--tov-ease-out),
		margin-bottom var(--tov-dur-slow) var(--tov-ease-out),
		border-color var(--tov-dur-slow) var(--tov-ease-out);
}

.tov-filters__panel.is-open {
	/* Ceiling only needs to exceed the panel's tallest real height. On a phone
	   the facet grid is a single column, and with the catalog's real term
	   counts (archetype ~65 → its 216px scroll cap, plus the other facets +
	   Gender + the chips/reset foot) the stack clears 1400px and the old cap
	   clipped the bottom facets. 4000px is comfortably above any real height
	   while still animating. */
	max-height: 4000px;
	opacity: 1;
	margin-bottom: var(--tov-space-5);
	border-color: var(--tov-line);
}

.tov-filters__inner {
	padding: var(--tov-space-5);
}

.tov-filters__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--tov-space-5) var(--tov-space-6);
}

.tov-facet {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.tov-facet__legend {
	display: flex;
	align-items: center;
	gap: var(--tov-space-2);
	width: 100%;
	padding: 0 0 var(--tov-space-3);
	margin-bottom: var(--tov-space-3);
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tov-gold);
	border-bottom: 1px solid var(--tov-line);
}

.tov-facet__legend .tov-facet__n {
	margin-left: auto;
	font-weight: 400;
	color: var(--tov-text-dim);
}

.tov-facet__options {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 216px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--tov-gold-deep) transparent;
}

.tov-facet__options::-webkit-scrollbar {
	width: 8px;
}
.tov-facet__options::-webkit-scrollbar-thumb {
	background: var(--tov-surface-3);
	border-radius: var(--tov-r-pill);
}

/* A single filter option (checkbox styled as a selectable row) */
.tov-opt {
	display: flex;
	align-items: center;
	gap: var(--tov-space-3);
	padding: 7px 9px;
	min-height: 40px;
	font-size: var(--tov-text-sm);
	color: var(--tov-text-muted);
	border-radius: var(--tov-r-sm);
	cursor: pointer;
	user-select: none;
	transition: color var(--tov-dur-fast) var(--tov-ease-out),
		background var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-opt:hover {
	color: var(--tov-text);
	background: var(--tov-surface-3);
}

.tov-opt input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
}

/* Custom check box */
.tov-opt__box {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid var(--tov-line-strong);
	border-radius: var(--tov-r-sm);
	background: var(--tov-bg);
	transition: border-color var(--tov-dur-fast) var(--tov-ease-out),
		background var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-opt__box::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 5px;
	height: 9px;
	border: solid var(--tov-bg);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px) scale(0);
	transform-origin: center;
	transition: transform var(--tov-dur-fast) var(--tov-ease-spring);
}

.tov-opt input:checked ~ .tov-opt__box {
	background: var(--tov-gold);
	border-color: var(--tov-gold);
}

.tov-opt input:checked ~ .tov-opt__box::after {
	transform: rotate(45deg) translate(-1px, -1px) scale(1);
}

.tov-opt input:checked ~ .tov-opt__label {
	color: var(--tov-text);
	font-weight: 600;
}

.tov-opt input:focus-visible ~ .tov-opt__box {
	outline: 2px solid var(--tov-focus);
	outline-offset: 2px;
}

.tov-opt__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* per-option count of matching cards */
.tov-opt__count {
	flex: 0 0 auto;
	font-family: var(--tov-font-body);
	font-size: var(--tov-text-xs);
	color: var(--tov-text-dim);
	font-variant-numeric: tabular-nums;
}

/* Drawer footer: active filter pills + reset */
.tov-filters__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tov-space-2);
	margin-top: var(--tov-space-5);
	padding-top: var(--tov-space-4);
	border-top: 1px solid var(--tov-line);
}

.tov-filters__foot-label {
	font-size: var(--tov-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tov-text-dim);
	margin-right: var(--tov-space-1);
}

.tov-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 6px 5px 11px;
	font-size: var(--tov-text-xs);
	color: var(--tov-text);
	background: var(--tov-surface-3);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-pill);
}

.tov-chip__tax {
	color: var(--tov-gold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 10px;
}

.tov-chip__x {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	color: var(--tov-text-muted);
	background: transparent;
	border: 0;
	border-radius: var(--tov-r-pill);
	cursor: pointer;
	line-height: 1;
	transition: color var(--tov-dur-fast), background var(--tov-dur-fast);
}

.tov-chip__x:hover {
	color: var(--tov-bg);
	background: var(--tov-gold);
}

.tov-chip__x:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 1px;
}

.tov-reset {
	margin-left: auto;
	padding: 6px 12px;
	font-family: var(--tov-font-body);
	font-size: var(--tov-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tov-text-muted);
	background: transparent;
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-pill);
	cursor: pointer;
	transition: color var(--tov-dur-fast), border-color var(--tov-dur-fast);
}

.tov-reset:hover {
	color: var(--tov-danger);
	border-color: var(--tov-danger);
}

.tov-reset:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 2px;
}

.tov-reset:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * The grid
 * ------------------------------------------------------------------------- */
.tov-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--tov-tile-min), 1fr));
	gap: var(--tov-space-4);
}

/* ---------------------------------------------------------------------------
 * Card tile — the signature "relic frame"
 * ------------------------------------------------------------------------- */
.tov-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--tov-surface);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-md);
	overflow: hidden;
	transition: transform var(--tov-dur-base) var(--tov-ease-out),
		border-color var(--tov-dur-base) var(--tov-ease-out),
		box-shadow var(--tov-dur-base) var(--tov-ease-out);
}

/* rarity-colored top edge — the functional signature accent */
.tov-card__edge {
	height: 3px;
	width: 100%;
	background: var(--tov-rarity, var(--tov-common));
	opacity: 0.85;
	transition: opacity var(--tov-dur-base) var(--tov-ease-out);
}

.tov-card:hover {
	transform: translateY(-4px);
	border-color: var(--tov-line-strong);
	box-shadow: var(--tov-charge);
}

/* Whole-tile link to the card detail page (stretched-link pattern). */
.tov-card__link {
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
}
.tov-card__link:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 3px;
}

.tov-card:hover .tov-card__edge {
	opacity: 1;
}

/* Art */
.tov-card__art {
	position: relative;
	aspect-ratio: 3 / 4;
	background: linear-gradient(160deg, var(--tov-surface-3), var(--tov-bg-2));
	overflow: hidden;
}

.tov-card__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--tov-dur-slow) var(--tov-ease-out);
}

.tov-card:hover .tov-card__art img {
	transform: scale(1.045);
}

/* Failure/empty art fallback */
.tov-card__noart {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--tov-space-2);
	text-align: center;
	color: var(--tov-text-dim);
	background:
		radial-gradient(80% 60% at 50% 40%, rgba(212, 162, 78, 0.08), transparent),
		var(--tov-bg-2);
}

.tov-card__noart svg {
	width: 34px;
	height: 34px;
	margin: 0 auto;
	opacity: 0.5;
}

.tov-card__noart span {
	font-family: var(--tov-font-display);
	font-size: var(--tov-text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* gradient scrim so pips stay legible over bright art */
.tov-card__art::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 22%, transparent 72%, rgba(0, 0, 0, 0.55) 100%);
}

/* Corner pip badges over the art */
.tov-card__pips {
	position: absolute;
	inset: var(--tov-space-2) var(--tov-space-2) auto;
	display: flex;
	align-items: flex-start;
	gap: var(--tov-space-2);
	z-index: 2;
}

.tov-pip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tov-text);
	background: rgba(10, 10, 11, 0.72);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--tov-r-pill);
	white-space: nowrap;
}

.tov-pip--season {
	color: var(--tov-gold-bright);
}

.tov-pip--rarity {
	margin-left: auto; /* pushes rarity to the right edge; season + hero stay left */
	color: var(--tov-rarity, var(--tov-text));
	border-color: color-mix(in srgb, var(--tov-rarity, var(--tov-common)) 45%, transparent);
}

/* Hero indicator — a filled gold pip with a crown, right after the season pip.
   Heroes are the crown of the registry (and all Legendary), so they read at a
   glance on the grid. The crown inherits the pip's dark text color. */
.tov-pip--hero {
	color: var(--tov-bg);
	background: linear-gradient(135deg, var(--tov-gold-bright), var(--tov-gold));
	border-color: transparent;
	box-shadow: 0 0 12px -2px rgba(212, 162, 78, 0.6);
}
.tov-pip--hero .tov-crown {
	width: 1.15em;
	height: 1.15em;
	margin: -1px 0;
	flex: 0 0 auto;
}

.tov-pip__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tov-rarity, var(--tov-common));
	box-shadow: 0 0 6px var(--tov-rarity, transparent);
}

/* Card body */
.tov-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--tov-space-2);
	padding: var(--tov-space-3) var(--tov-space-3) var(--tov-space-4);
	flex: 1 1 auto;
}

.tov-card__name {
	margin: 0;
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-lg);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--tov-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tov-card__meta {
	font-size: var(--tov-text-xs);
	letter-spacing: 0.04em;
	color: var(--tov-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.tov-card__meta .sep {
	color: var(--tov-gold-deep);
}

/* Stat readout row (footer) */
.tov-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tov-space-2);
	margin-top: auto;
	padding-top: var(--tov-space-3);
	border-top: 1px solid var(--tov-line);
}

.tov-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 8px;
	background: var(--tov-bg-2);
	border: 1px solid var(--tov-line);
	border-radius: var(--tov-r-sm);
}

.tov-stat__k {
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tov-text-dim);
}

.tov-stat__v {
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-sm);
	color: var(--tov-gold);
	font-variant-numeric: tabular-nums;
}

.tov-stat--wide {
	flex: 1 1 100%;
}

.tov-stat--wide .tov-stat__v {
	color: var(--tov-text);
	font-family: var(--tov-font-body);
	font-weight: 500;
	font-size: var(--tov-text-xs);
	line-height: 1.4;
}

/* Hidden by the filter (JS toggles this). Kept in DOM for cache-ability. */
.tov-card.is-hidden {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Entrance animation (one orchestrated stagger)
 * ------------------------------------------------------------------------- */
@keyframes tov-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tov-db.is-ready .tov-card {
	animation: tov-rise var(--tov-dur-slow) var(--tov-ease-out) both;
	animation-delay: calc(var(--tov-i, 0) * 26ms);
}

/* After the one-time entrance wave, JS adds .is-settled. Sorting re-inserts
 * tiles (appendChild), which restarts CSS animations — this turns the entrance
 * animation off so a re-sort doesn't replay the whole stagger. The tile ends in
 * its natural (opacity:1, no-transform) state, identical to the animation's end,
 * so there is no flash. */
.tov-db.is-settled .tov-card {
	animation: none;
}

/* ---------------------------------------------------------------------------
 * Empty state (no matches)
 * ------------------------------------------------------------------------- */
.tov-empty {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--tov-space-4);
	text-align: center;
	padding: var(--tov-space-8) var(--tov-space-5);
	border: 1px dashed var(--tov-line);
	border-radius: var(--tov-r-lg);
	background: var(--tov-bg-2);
}

.tov-db.is-empty .tov-empty {
	display: flex;
}

.tov-db.is-empty .tov-grid {
	display: none;
}

.tov-empty__mark {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	color: var(--tov-gold);
	border: 1px solid var(--tov-line-strong);
	border-radius: 50%;
	background: var(--tov-surface);
}

.tov-empty__mark svg {
	width: 28px;
	height: 28px;
}

.tov-empty__title {
	margin: 0;
	font-family: var(--tov-font-display);
	font-weight: 600;
	font-size: var(--tov-text-xl);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tov-text);
}

.tov-empty__text {
	margin: 0;
	max-width: 42ch;
	color: var(--tov-text-muted);
	font-size: var(--tov-text-sm);
}

.tov-empty__text b {
	color: var(--tov-gold);
	font-weight: 600;
}

.tov-empty__reset {
	padding: 11px 20px;
	font-family: var(--tov-font-display);
	font-weight: 500;
	font-size: var(--tov-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tov-bg);
	background: var(--tov-gold);
	border: 0;
	border-radius: var(--tov-r-md);
	cursor: pointer;
	transition: background var(--tov-dur-fast) var(--tov-ease-out);
}

.tov-empty__reset:hover {
	background: var(--tov-gold-bright);
}

.tov-empty__reset:focus-visible {
	outline: 2px solid var(--tov-focus);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * No-JS notice (progressive enhancement — all cards still show unfiltered)
 * ------------------------------------------------------------------------- */
.tov-nojs {
	margin-bottom: var(--tov-space-4);
	padding: var(--tov-space-3) var(--tov-space-4);
	font-size: var(--tov-text-sm);
	color: var(--tov-warning);
	background: rgba(224, 164, 88, 0.08);
	border: 1px solid rgba(224, 164, 88, 0.3);
	border-radius: var(--tov-r-md);
}

/* Utility */
.tov-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Responsive (>=3 breakpoints); narrative + touch targets preserved
 * ------------------------------------------------------------------------- */
/* KPI composition: below ~1080px the primary plate becomes a full-width banner
   and the eight secondary metrics flow in a 4-col block beneath it. */
@media (max-width: 1080px) {
	.tov-db__kpis {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.tov-kpi--primary {
		grid-column: 1 / -1;
		grid-row: auto;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: var(--tov-space-3);
		padding: var(--tov-space-4) var(--tov-space-5);
	}
	.tov-kpi--primary .tov-kpi__value {
		font-size: var(--tov-text-2xl);
	}
}

@media (max-width: 900px) {
	.tov-db {
		--tov-tile-min: 200px;
		padding: var(--tov-space-5) var(--tov-space-4) var(--tov-space-6);
	}
	.tov-db__title {
		font-size: var(--tov-text-2xl);
	}
}

@media (max-width: 620px) {
	.tov-db {
		--tov-tile-min: 152px; /* two columns on phones */
	}
	.tov-db__toolbar {
		flex-direction: column;
	}
	/* In a column, flex-basis maps to height — reset so the search doesn't
	   stretch tall and float its icon into the middle. */
	.tov-search {
		flex: 0 0 auto;
		width: 100%;
	}
	.tov-sort {
		width: 100%;
	}
	.tov-sort__select {
		width: 100%;
	}
	.tov-filters__trigger {
		width: 100%;
		justify-content: center;
	}
	.tov-db__kpis {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--tov-space-2);
	}
	.tov-kpi {
		padding: var(--tov-space-3);
	}
	.tov-kpi__value {
		font-size: var(--tov-text-lg);
	}
	.tov-kpi--primary {
		padding: var(--tov-space-4);
	}
	.tov-kpi--primary .tov-kpi__value {
		font-size: var(--tov-text-2xl);
	}
	.tov-grid {
		gap: var(--tov-space-3);
	}
	.tov-card__name {
		font-size: var(--tov-text-base);
	}
	/* Compact pips so the season + hero + rarity trio fits a 2-up tile */
	.tov-card__pips {
		inset: 6px 6px auto;
		gap: 5px;
	}
	.tov-pip {
		padding: 3px 7px;
		font-size: 9px;
		letter-spacing: 0.06em;
	}
	/* Touch targets stay >= 44px */
	.tov-opt {
		min-height: 44px;
	}
}

@media (max-width: 330px) {
	.tov-db {
		--tov-tile-min: 100%; /* single column only on the smallest phones */
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion — clean fallback, no transforms/animations
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tov-db *,
	.tov-db *::before,
	.tov-db *::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
	}
	.tov-card:hover {
		transform: none;
	}
	.tov-card:hover .tov-card__art img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Theme-defense
 * A host theme / page builder was coloring generic <button>/<input> (e.g. an
 * outline-button style via `.page-content button`), turning our controls pink.
 * Re-assert the interactive colors scoped under .tov-db (higher specificity)
 * and !important so the module renders consistently inside ANY theme.
 * ------------------------------------------------------------------------- */
.tov-db button,
.tov-db input,
.tov-db select {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.tov-db .tov-filters__trigger {
	color: var(--tov-text) !important;
	background: var(--tov-surface) !important;
	border: 1px solid var(--tov-line) !important;
}

.tov-db .tov-filters__trigger:hover,
.tov-db .tov-filters__trigger[aria-expanded="true"] {
	color: var(--tov-gold) !important;
	border-color: var(--tov-gold) !important;
}

.tov-db .tov-search__input {
	color: var(--tov-text) !important;
	background: var(--tov-surface) !important;
	border: 1px solid var(--tov-line) !important;
}

.tov-db .tov-search__input:focus {
	border-color: var(--tov-gold) !important;
}

.tov-db .tov-sort__select {
	color: var(--tov-text) !important;
	background: var(--tov-surface) !important;
	border: 1px solid var(--tov-line) !important;
}

.tov-db .tov-sort__select:focus {
	border-color: var(--tov-gold) !important;
}

.tov-db .tov-search__clear,
.tov-db .tov-reset,
.tov-db .tov-chip__x {
	color: var(--tov-text-muted) !important;
	background: transparent !important;
	border-color: var(--tov-line) !important;
}

.tov-db .tov-reset:hover {
	color: var(--tov-danger) !important;
	border-color: var(--tov-danger) !important;
}

.tov-db .tov-empty__reset {
	color: var(--tov-bg) !important;
	background: var(--tov-gold) !important;
	border: 0 !important;
}

/* KPI rarity tiles are buttons now (A2) — keep their surface + edge under any
   host theme that colors generic <button>s (the pressed rule is more specific
   so the active-facet charge still shows through). */
.tov-db .tov-kpi--control {
	background: var(--tov-surface) !important;
	border: 1px solid var(--tov-line) !important;
}
.tov-db .tov-kpi--control[aria-pressed="true"] {
	background: var(--tov-surface-2) !important;
	border-color: color-mix(in srgb, var(--tov-kpi-edge, var(--tov-gold)) 65%, var(--tov-line)) !important;
}


/* iOS zoom guard: Safari auto-zooms any focused control under 16px and never
   zooms back out. Same-selector restatement, so it simply wins by order. */
@media (max-width: 860px) {
	.tov-search__input,
	.tov-sort__select {
		font-size: 16px;
	}
}