/* =============================================================
   THG Portfolio Tracker — frontend
   Loaded on /tracker/, /tracker/card/{id}/, /tracker/analytics/
   ============================================================= */

/* Hide WP page title — the shortcode owns the page chrome */
body.thg-tracker-page .entry-title,
body.thg-tracker-page .wp-block-post-title { display: none; }

/* Break the tracker shortcode out of WordPress's `is-layout-constrained` 800px
   cage. Our own .thg-section__inner handles container width (1200px). The
   `:where()` selector that imposes the constraint has 0 specificity, so this
   rule wins without !important. */
body.thg-tracker-page .is-layout-constrained > *,
body.thg-tracker-page .entry-content > *,
body.thg-tracker-page .wp-block-post-content > * {
	max-width: none;
}
body.thg-tracker-page .entry-content,
body.thg-tracker-page .wp-block-post-content {
	max-width: none;
}

/* ---------- Dashboard hero ---------- */
.thg-tracker-hero {
	padding-block: clamp(28px, 4vw, 56px) clamp(16px, 2vw, 24px);
	text-align: center;
}
.thg-tracker-hero__title {
	font-family: var(--thg-font-display);
	font-size: clamp(48px, 6vw, 84px);
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--thg-ink);
	margin: 6px 0 8px;
}
.thg-tracker-hero__sub { color: var(--thg-ink-soft); font-size: 17px; margin: 0; }

/* ---------- Totals ---------- */
.thg-tracker-totals { padding-block: clamp(20px, 3vw, 32px); }
.thg-tracker-totals__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.thg-totals-card {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 18px 22px;
}
.thg-totals-card--accent {
	background: var(--thg-ink);
	color: var(--thg-paper);
	border-color: var(--thg-ink);
}
.thg-totals-card--accent .thg-totals-card__label,
.thg-totals-card--accent .thg-totals-card__value { color: var(--thg-paper); }
.thg-totals-card__label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin: 0 0 8px;
}
.thg-totals-card__value {
	font-family: var(--thg-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1;
	margin: 0;
	color: var(--thg-ink);
	letter-spacing: 0.02em;
}
.thg-totals-card__pct {
	display: inline-block;
	font-size: 14px;
	margin-left: 6px;
	opacity: 0.85;
}

.thg-positive { color: var(--thg-teal-deep) !important; }
.thg-negative { color: #c8732c !important; }
.thg-muted    { color: #999; }

/* ---------- Quick-filter pills ---------- */
.thg-quick-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.thg-quick-pill {
	background: var(--thg-paper);
	border: 1.5px solid var(--thg-fog);
	border-radius: 999px;
	padding: 6px 14px;
	font-family: var(--thg-font-display);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--thg-ink-soft);
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.thg-quick-pill:hover {
	border-color: var(--thg-teal);
	color: var(--thg-ink);
}
.thg-quick-pill span {
	background: var(--thg-fog);
	color: var(--thg-ink-soft);
	font-family: var(--thg-font-body);
	font-size: 11px;
	padding: 1px 8px;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0;
}
.thg-quick-pill.is-active {
	background: var(--thg-ink);
	color: var(--thg-paper);
	border-color: var(--thg-ink);
}
.thg-quick-pill.is-active span {
	background: rgba(255,255,255,0.2);
	color: var(--thg-paper);
}
.thg-quick-pill--buy.is-active {
	background: var(--thg-teal-deep);
	border-color: var(--thg-teal-deep);
}
.thg-quick-pill--sell.is-active {
	background: #c8732c;
	border-color: #c8732c;
}

/* ---------- Table filters bar ---------- */
.thg-table-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	padding: 14px 16px;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	margin-bottom: 14px;
}
.thg-table-filters .thg-filter-search {
	flex: 1;
	min-width: 220px;
	padding: 9px 14px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 8px;
	background: var(--thg-paper);
	font: inherit;
	color: var(--thg-ink);
	transition: border-color .15s;
}
.thg-table-filters .thg-filter-search:focus {
	border-color: var(--thg-teal);
	outline: none;
}
.thg-table-filters select {
	padding: 8px 12px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 8px;
	background: var(--thg-paper);
	font: inherit;
	color: var(--thg-ink);
	cursor: pointer;
}
.thg-filter-counter {
	margin-left: auto;
	font-size: 13px;
	color: var(--thg-ink-soft);
	font-variant-numeric: tabular-nums;
}
.thg-filter-counter strong { color: var(--thg-ink); }

/* ---------- Sortable column indicators ---------- */
.thg-sortable-table th[data-sort-key] {
	position: relative;
	user-select: none;
	transition: color .15s;
}
.thg-sortable-table th[data-sort-key]:hover { color: var(--thg-ink); }
.thg-sortable-table th[data-sort-key]::after {
	content: '';
	display: inline-block;
	margin-left: 6px;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.25;
	transition: opacity .15s, transform .15s;
}
.thg-sortable-table th.is-sort-asc::after  { transform: rotate(180deg); opacity: 1; color: var(--thg-teal-deep); }
.thg-sortable-table th.is-sort-desc::after { opacity: 1; color: var(--thg-teal-deep); }

/* ---------- Tabs ---------- */
.thg-tracker-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--thg-fog);
	margin: 0 0 22px;
}
.thg-tracker-tabs a {
	padding: 10px 18px;
	font-family: var(--thg-font-display);
	font-size: 16px;
	letter-spacing: 0.06em;
	color: var(--thg-ink-soft);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s, border-color .15s;
}
.thg-tracker-tabs a:hover { color: var(--thg-ink); }
.thg-tracker-tabs a.is-active {
	color: var(--thg-ink);
	border-bottom-color: var(--thg-teal);
}

/* ---------- Holdings table ---------- */
.thg-tracker-table-section { padding-block: clamp(28px, 4vw, 48px); }
.thg-tracker-table-wrap { overflow-x: auto; }

/* On mobile, transform the table into a stack of cards (no more horizontal scroll). */
@media (max-width: 720px) {
	.thg-tracker-table-wrap { overflow: visible; }
	.thg-tracker-table {
		display: block;
		border-collapse: separate;
		border-spacing: 0;
	}
	.thg-tracker-table thead { display: none; }
	.thg-tracker-table tbody { display: block; }
	.thg-tracker-table tr {
		display: grid;
		grid-template-columns: 56px 1fr;
		gap: 6px 14px;
		padding: 14px 16px;
		background: var(--thg-paper);
		border: 1px solid var(--thg-fog);
		border-radius: var(--thg-radius-lg);
		margin-bottom: 10px;
	}
	.thg-tracker-table tr:hover { background: var(--thg-paper); }
	.thg-tracker-table td {
		border-bottom: 0;
		padding: 0;
	}
	/* Thumbnail cell spans full height of card */
	.thg-tracker-table td:first-child {
		grid-row: span 4;
		align-self: start;
	}
	.thg-tracker-table .thg-table-thumb {
		width: 56px;
		height: 78px;
	}
	/* Card name + meta */
	.thg-tracker-table td:nth-child(2) {
		grid-column: 2;
		font-size: 15px;
	}
	/* Status pill on its own line */
	.thg-tracker-table td:nth-child(3) {
		grid-column: 2;
	}
	/* Numbers row: qty, avg cost, current as inline metrics */
	.thg-tracker-table td:nth-child(4),
	.thg-tracker-table td:nth-child(5),
	.thg-tracker-table td:nth-child(6) {
		display: inline-block;
		grid-column: 2;
		font-size: 13px;
		color: var(--thg-ink-soft);
		padding-right: 14px;
	}
	.thg-tracker-table td:nth-child(4)::before { content: 'Qty '; opacity: 0.6; }
	.thg-tracker-table td:nth-child(5)::before { content: 'Cost '; opacity: 0.6; }
	.thg-tracker-table td:nth-child(6)::before { content: 'Now '; opacity: 0.6; }
	/* P/L $ and P/L % combined */
	.thg-tracker-table td:nth-child(7),
	.thg-tracker-table td:nth-child(8) {
		display: inline-block;
		grid-column: 2;
		font-size: 14px;
		font-weight: 600;
		padding-right: 14px;
	}
	/* Tags row */
	.thg-tracker-table td:nth-child(9) {
		grid-column: 2;
		font-size: 12px;
		color: var(--thg-ink-soft);
	}
	.thg-tracker-table td.num { text-align: left; }
	/* Hide sortable arrows on mobile (no thead anyway) */
}

/* Mobile filter bar — make it cleaner */
@media (max-width: 720px) {
	.thg-table-filters {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.thg-table-filters > * { width: 100%; }
	.thg-filter-counter {
		margin-left: 0;
		text-align: center;
		font-size: 12px;
	}
}
.thg-tracker-table {
	width: 100%;
	border-collapse: collapse;
}
.thg-tracker-table th, .thg-tracker-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--thg-fog);
	vertical-align: middle;
	text-align: left;
}
.thg-tracker-table th {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	background: rgba(247, 228, 201, 0.18);
}
.thg-tracker-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.thg-tracker-table tr:hover { background: rgba(247, 228, 201, 0.1); }

.thg-table-thumb {
	width: 44px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--thg-cream);
	display: block;
}
.thg-table-card-name {
	font-weight: 600;
	color: var(--thg-ink);
	text-decoration: none;
}
.thg-table-card-name:hover { color: var(--thg-teal-deep); }
.thg-table-meta { font-size: 12px; color: var(--thg-ink-soft); }
.thg-table-tags { font-size: 12px; color: var(--thg-ink-soft); }

/* ---------- Status pills ---------- */
.thg-status-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	color: #fff;
	font-family: var(--thg-font-display);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.thg-status-prospect { background: #7d6f4a; }
.thg-status-pick     { background: var(--thg-teal-deep); }
.thg-status-goal     { background: var(--thg-teal-deep); } /* legacy alias */
.thg-status-held     { background: var(--thg-teal); }
.thg-status-selling  { background: #c8732c; }
.thg-status-sold     { background: #8a8a8a; }
.thg-status-watching { background: #5d6b88; }

.thg-tag-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--thg-cream);
	color: var(--thg-ink);
	font-size: 11px;
	letter-spacing: 0.04em;
}

/* ---------- Today's signals ---------- */
.thg-tracker-signals { padding-block: clamp(28px, 4vw, 48px); }
.thg-signal-new-badge {
	display: inline-block;
	margin-left: 12px;
	background: var(--thg-teal);
	color: var(--thg-paper);
	font-family: var(--thg-font-display);
	font-size: 14px;
	letter-spacing: 0.08em;
	padding: 3px 10px;
	border-radius: 999px;
	vertical-align: middle;
}
.thg-signals-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 24px;
	margin-top: 18px;
}
.thg-signals-col__head {
	font-family: var(--thg-font-display);
	font-size: 22px;
	letter-spacing: 0.02em;
	margin: 0 0 4px;
	color: var(--thg-ink);
}
.thg-signals-col__sub {
	font-size: 13px;
	color: var(--thg-ink-soft);
	margin: 0 0 14px;
}
.thg-signal-card {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: center;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 12px 14px;
	margin-bottom: 10px;
	text-decoration: none;
	color: var(--thg-ink);
	transition: transform .15s, border-color .15s, box-shadow .15s;
}
.thg-signal-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -6px rgba(2,2,2,0.12);
}
.thg-signal-card--buy:hover   { border-color: var(--thg-teal); }
.thg-signal-card--sell:hover  { border-color: #c8732c; }
.thg-signal-card--surge:hover { border-color: var(--thg-teal-deep); }
.thg-signal-card--dump:hover  { border-color: #c8732c; }
.thg-signal-card--surge.is-new {
	background: linear-gradient(90deg, rgba(31,124,107,0.10) 0%, var(--thg-paper) 60%);
	border-color: var(--thg-teal-deep);
}
.thg-signal-card--dump.is-new {
	background: linear-gradient(90deg, rgba(200,115,44,0.10) 0%, var(--thg-paper) 60%);
	border-color: #c8732c;
}
.thg-signal-card.is-new {
	background: linear-gradient(90deg, rgba(42,168,144,0.08) 0%, var(--thg-paper) 60%);
	border-color: var(--thg-teal);
}
.thg-signal-card img,
.thg-signal-card__thumb {
	width: 56px;
	height: 78px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--thg-cream);
}
.thg-signal-card__copy h4 {
	font-family: var(--thg-font-display);
	font-size: 16px;
	letter-spacing: 0.02em;
	margin: 0 0 2px;
}
.thg-signal-card__meta { font-size: 11px; color: var(--thg-ink-soft); margin: 0 0 4px; }
.thg-signal-card__prices { font-size: 13px; margin: 0; }
.thg-signal-new-pill {
	background: var(--thg-teal);
	color: var(--thg-paper);
	font-family: var(--thg-font-display);
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 3px 9px;
	border-radius: 999px;
}

/* ---------- "What I missed" ---------- */
.thg-tracker-missed { padding-block: clamp(40px, 6vw, 72px); }
.thg-missed-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	margin-top: 22px;
}
.thg-missed-card {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 12px;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 14px;
	text-decoration: none;
	color: var(--thg-ink);
	transition: transform .15s, border-color .15s;
}
.thg-missed-card:hover {
	transform: translateY(-2px);
	border-color: var(--thg-teal);
}
.thg-missed-card img {
	width: 80px;
	height: 112px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--thg-cream);
}
.thg-missed-card__copy h3 { font-size: 15px; font-family: var(--thg-font-display); margin: 0 0 4px; letter-spacing: 0.02em; }
.thg-missed-card__meta { font-size: 11px; color: var(--thg-ink-soft); margin: 0 0 8px; }
.thg-missed-card__gain {
	font-family: var(--thg-font-display);
	font-size: 22px;
	margin: 0;
	letter-spacing: 0.02em;
}
.thg-missed-card__gain span {
	display: block;
	font-family: var(--thg-font-body);
	font-size: 11px;
	color: var(--thg-ink-soft);
	font-weight: 400;
}

/* ---------- Card detail hero ---------- */
.thg-tracker-card-hero { padding-block: clamp(28px, 4vw, 48px); }
.thg-card-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}
.thg-card-hero__media { position: sticky; top: 100px; }
.thg-card-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--thg-radius-lg);
	box-shadow: 0 22px 40px -18px rgba(2,2,2,0.35);
	background: var(--thg-cream);
}
.thg-card-hero__placeholder {
	aspect-ratio: 5/7;
	background: var(--thg-cream);
	border-radius: var(--thg-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--thg-ink-soft);
}
.thg-card-hero__title {
	font-family: var(--thg-font-display);
	font-size: clamp(40px, 5vw, 64px);
	letter-spacing: 0.01em;
	line-height: 1;
	margin: 8px 0 8px;
	color: var(--thg-ink);
}
.thg-card-hero__meta { color: var(--thg-ink-soft); font-size: 15px; margin: 0 0 14px; }
.thg-card-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }

.thg-card-hero__price-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}
.thg-price-block {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	padding: 12px 14px;
}
.thg-price-block__label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin: 0 0 6px;
}
.thg-price-block__value {
	font-family: var(--thg-font-display);
	font-size: 24px;
	margin: 0;
	letter-spacing: 0.02em;
	line-height: 1;
}
.thg-price-block__sub {
	font-size: 11px;
	color: var(--thg-ink-soft);
	margin: 4px 0 0;
}

.thg-card-hero__pop {
	font-size: 13px;
	color: var(--thg-ink-soft);
	margin: 8px 0 0;
}

/* TCGPlayer ID — copyable, prominent on card detail */
.thg-card-hero__tcgid {
	margin: 14px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.thg-tcgplayer-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--thg-ink);
	color: var(--thg-paper);
	border: 2px solid var(--thg-ink);
	border-radius: var(--thg-radius);
	padding: 10px 16px;
	font-family: var(--thg-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .15s, color .15s, transform .15s;
}
.thg-tcgplayer-link:hover {
	background: var(--thg-teal-deep);
	border-color: var(--thg-teal-deep);
	color: var(--thg-paper);
	transform: translateY(-1px);
}
.thg-copy-id {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--thg-paper);
	border: 1.5px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	padding: 4px 10px;
	font: inherit;
	font-family: var(--thg-font-body);
	color: var(--thg-ink-soft);
	font-size: 12px;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
	letter-spacing: 0.02em;
}
.thg-copy-id:hover {
	border-color: var(--thg-teal);
	background: var(--thg-teal-soft);
	color: var(--thg-teal-deep);
}
.thg-copy-id.is-copied {
	background: var(--thg-teal);
	color: var(--thg-paper);
	border-color: var(--thg-teal);
}
.thg-copy-id--big {
	padding: 10px 18px;
	font-size: 14px;
	border-width: 2px;
}
.thg-tcgid-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
}
.thg-tcgid-value {
	font-family: var(--thg-font-display);
	font-size: 22px;
	letter-spacing: 0.04em;
	color: var(--thg-ink);
}
.thg-copy-id--big:hover .thg-tcgid-value,
.thg-copy-id--big.is-copied .thg-tcgid-value { color: inherit; }
.thg-tcgid-icon { font-size: 16px; line-height: 1; }
.thg-card-hero__pop-formula {
	display: block;
	font-family: monospace;
	font-size: 11px;
	margin-top: 4px;
	opacity: 0.7;
}

@media (max-width: 720px) {
	.thg-card-hero__inner { grid-template-columns: 1fr; }
	.thg-card-hero__media { position: static; max-width: 200px; margin: 0 auto; }
	.thg-card-hero__price-row { grid-template-columns: 1fr 1fr; gap: 10px; }
	.thg-price-block { padding: 10px 12px; }
	.thg-price-block__value { font-size: 20px; }
	.thg-card-hero__pop-formula { font-size: 10px; }
}

/* Mobile signal cards — bigger tap targets, simpler layout */
@media (max-width: 720px) {
	.thg-signals-grid { grid-template-columns: 1fr; gap: 16px; }
	.thg-signal-card {
		grid-template-columns: 56px 1fr;
		padding: 14px;
	}
	.thg-signal-card img, .thg-signal-card__thumb { width: 56px; height: 78px; }
	.thg-signal-new-pill { grid-column: 2; justify-self: end; margin-top: -4px; }
}

/* Mobile totals — 2-col grid, smaller cards */
@media (max-width: 720px) {
	.thg-tracker-totals__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.thg-totals-card { padding: 12px 14px; }
	.thg-totals-card__value { font-size: 20px; }
	.thg-totals-card__pct { font-size: 12px; }
}

/* Floating button bottom-right has plenty of margin on mobile so it doesn't cover content */
@media (max-width: 720px) {
	.thg-stream-toggle { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 13px; }
}

/* ---------- Composition donuts ---------- */
.thg-tracker-composition { padding-block: clamp(28px, 4vw, 48px); }
.thg-composition-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin-top: clamp(18px, 2vw, 28px);
}
.thg-composition-card {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 18px 20px 22px;
	text-align: center;
}
.thg-composition-card h3 {
	font-family: var(--thg-font-display);
	font-size: 18px;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
	color: var(--thg-ink);
}
.thg-composition-card canvas {
	max-width: 100%;
	max-height: 240px;
}

/* ---------- Holdings treemap ----------
 * Chart.js requires a parent with explicit (non-content-driven) size when
 * `responsive: true` + `maintainAspectRatio: false`. Otherwise the canvas
 * grows the parent, which grows the canvas, infinite loop. The wrapper holds
 * the height; the canvas is forced to 100% of it. */
.thg-tracker-treemap { padding-block: clamp(40px, 5vw, 72px); }
.thg-treemap-wrap {
	position: relative;
	width: 100%;
	height: clamp(360px, 50vw, 560px);
	background: var(--thg-paper);
	border-radius: var(--thg-radius-lg);
	border: 1px solid var(--thg-fog);
	padding: 6px;
	margin-top: clamp(18px, 2vw, 28px);
	overflow: hidden;
}
.thg-treemap-wrap > canvas#thg-treemap {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

/* ---------- Vendor sell calculator ---------- */
.thg-sell-calculator { padding-block: clamp(28px, 4vw, 48px); }
.thg-calc {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: clamp(20px, 3vw, 32px);
	margin-top: 18px;
}
.thg-calc__mode {
	display: flex;
	gap: 22px;
	margin-bottom: 18px;
	flex-wrap: wrap;
	padding-bottom: 16px;
	border-bottom: 1px dashed var(--thg-fog);
	font-size: 14px;
	color: var(--thg-ink-soft);
}
.thg-calc__mode label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.thg-calc__mode strong { color: var(--thg-ink); font-family: var(--thg-font-display); font-size: 16px; letter-spacing: 0.02em; }
.thg-calc__mode input[type=number] {
	padding: 4px 8px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 6px;
	background: var(--thg-paper);
	font: inherit;
	font-family: var(--thg-font-display);
	font-size: 16px;
}
.thg-calc__basis {
	font-size: 13px;
	color: var(--thg-ink-soft);
	font-style: italic;
	margin: 12px 0 0;
}

.thg-calc__controls {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	gap: 20px;
	margin-bottom: 16px;
}
@media (max-width: 720px) {
	.thg-calc__controls { grid-template-columns: 1fr; }
}
.thg-calc__field { display: flex; flex-direction: column; }
.thg-calc__field small {
	font-weight: 400;
	color: var(--thg-ink-soft);
	font-size: 10px;
	margin-left: 4px;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
}
.thg-calc__field input:disabled {
	background: rgba(0,0,0,0.03);
	color: var(--thg-ink-soft);
	cursor: not-allowed;
}
.thg-calc__field > span {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin-bottom: 6px;
	font-weight: 600;
}
.thg-calc__field input[type=number] {
	padding: 10px 14px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 8px;
	background: var(--thg-paper);
	font: inherit;
	font-family: var(--thg-font-display);
	font-size: 22px;
	letter-spacing: 0.02em;
	color: var(--thg-ink);
	max-width: 160px;
}
.thg-calc__slider-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
}
.thg-calc__slider-wrap input[type=range] { flex: 1; accent-color: var(--thg-teal); }
.thg-calc__slider-wrap input[type=number] { width: 80px; max-width: 80px; }

.thg-calc__pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.thg-calc__pills button {
	background: transparent;
	border: 1.5px solid var(--thg-fog);
	border-radius: 999px;
	padding: 6px 14px;
	font-family: var(--thg-font-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--thg-ink-soft);
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.thg-calc__pills button:hover {
	border-color: var(--thg-teal);
	color: var(--thg-teal-deep);
	background: var(--thg-teal-soft);
}

.thg-calc__results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
	padding-top: 18px;
	border-top: 1px dashed var(--thg-fog);
}
.thg-calc__metric { background: rgba(247, 228, 201, 0.18); padding: 14px 16px; border-radius: 12px; }
.thg-calc__label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin: 0 0 6px;
	font-weight: 600;
}
.thg-calc__value {
	font-family: var(--thg-font-display);
	font-size: 22px;
	margin: 0;
	letter-spacing: 0.02em;
	color: var(--thg-ink);
}
.thg-calc__value--big { font-size: 28px; }
.thg-calc__sub {
	font-size: 12px;
	margin: 4px 0 0;
	color: var(--thg-ink-soft);
}

/* ---------- Chart section ---------- */
.thg-tracker-chart-section { padding-block: clamp(28px, 4vw, 48px); }
#thg-price-chart {
	width: 100% !important;
	max-height: 380px;
}
.thg-empty-chart {
	background: var(--thg-paper);
	border: 1px dashed var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 40px;
	text-align: center;
	color: var(--thg-ink-soft);
}

/* ---------- Lots + thesis ---------- */
.thg-tracker-lots-section { padding-block: clamp(28px, 4vw, 48px); }
.thg-tracker-lots-list { display: grid; gap: 14px; }
.thg-lot-card {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 16px 18px;
}
.thg-lot-card__head {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.thg-lot-card__date {
	font-family: var(--thg-font-display);
	font-size: 18px;
	letter-spacing: 0.02em;
	color: var(--thg-ink);
	margin: 0 0 4px;
}
.thg-lot-card__qty {
	font-size: 13px;
	color: var(--thg-ink-soft);
	margin: 0;
}
.thg-lot-card__metrics { text-align: right; }
.thg-lot-card__metrics p {
	margin: 0;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.thg-lot-card__metrics p span {
	font-size: 11px;
	color: var(--thg-ink-soft);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 2px;
}

/* Quick-sale form */
.thg-lot-card__sale {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--thg-fog);
}
.thg-lot-card__sale > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--thg-teal-deep);
	user-select: none;
	padding: 6px 0;
	font-size: 14px;
}
.thg-lot-card__sale[open] > summary { margin-bottom: 12px; }
.thg-quick-sale-form .thg-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}
.thg-quick-sale-form label {
	display: flex;
	flex-direction: column;
	font-size: 11px;
	color: var(--thg-ink-soft);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}
.thg-quick-sale-form input,
.thg-quick-sale-form select,
.thg-quick-sale-form textarea {
	margin-top: 4px;
	padding: 8px 12px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 8px;
	background: var(--thg-paper);
	color: var(--thg-ink);
	font: inherit;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}
.thg-quick-sale-form input:focus,
.thg-quick-sale-form select:focus,
.thg-quick-sale-form textarea:focus {
	border-color: var(--thg-teal);
	outline: none;
}
.thg-quick-sale-form .thg-form-extras { margin: 8px 0 12px; }
.thg-quick-sale-form .thg-form-extras > summary {
	cursor: pointer;
	font-size: 12px;
	color: var(--thg-ink-soft);
}
.thg-quick-sale-form .thg-form-row__textarea {
	display: flex;
	flex-direction: column;
	font-size: 11px;
	color: var(--thg-ink-soft);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 12px;
}
.thg-quick-sale-submit {
	width: 100%;
	padding: 12px 20px;
	font-size: 16px;
	margin-top: 6px;
}
@media (min-width: 720px) {
	.thg-quick-sale-submit { width: auto; }
}

.thg-tracker-thesis { padding-block: clamp(28px, 4vw, 48px); }
.thg-tracker-thesis p {
	font-size: 17px;
	color: var(--thg-ink-soft);
	line-height: 1.7;
}

/* ---------- Similar prospects strip ---------- */
/* ---------- Card overview (/tracker/cards/{catalog_id}/) ---------- */
.thg-card-overview__layout {
	display: grid;
	gap: clamp(20px, 3vw, 36px);
	grid-template-columns: minmax(0, 320px) 1fr;
	align-items: start;
}
@media (max-width: 720px) {
	.thg-card-overview__layout { grid-template-columns: 1fr; }
}
.thg-card-overview__art {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 12px;
	box-shadow: 0 8px 24px -10px rgba(2, 2, 2, 0.20);
}
.thg-card-overview__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--thg-radius);
}
.thg-card-overview__sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.thg-card-overview__fact {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 18px 22px;
}
.thg-card-overview__fact-label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin-bottom: 6px;
}
.thg-card-overview__fact-value {
	display: block;
	font-family: var(--thg-font-display);
	font-size: clamp(22px, 2.4vw, 28px);
	letter-spacing: 0.02em;
	color: var(--thg-ink);
	line-height: 1.1;
}
.thg-card-overview__fact small {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: 0.03em;
	line-height: 1.4;
}
.thg-card-overview__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.thg-card-overview__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--thg-teal-soft);
	color: var(--thg-teal-deep);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.15s var(--thg-ease, ease),
	            border-color 0.15s var(--thg-ease, ease);
}
.thg-card-overview__chip:hover {
	background: var(--thg-paper);
	border-color: var(--thg-teal-deep);
}
.thg-card-overview__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.thg-card-overview__add-form {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	padding: 6px 12px;
}
.thg-card-overview__add-form label {
	font-size: 12px;
	color: var(--thg-ink-soft);
	letter-spacing: 0.04em;
	font-weight: 600;
}
.thg-card-overview__add-form select {
	appearance: none;
	-webkit-appearance: none;
	padding: 6px 28px 6px 10px;
	background: #fff;
	border: 1px solid var(--thg-fog);
	border-radius: 6px;
	font: inherit;
	font-size: 13px;
	color: var(--thg-ink);
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--thg-ink-soft) 50%),
		linear-gradient(135deg, var(--thg-ink-soft) 50%, transparent 50%);
	background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
	background-size: 4px 4px;
	background-repeat: no-repeat;
}
.thg-card-overview__add-form select:hover  { border-color: var(--thg-teal-deep); }
.thg-card-overview__add-form select:focus  { outline: none; border-color: var(--thg-teal-deep); box-shadow: 0 0 0 3px rgba(31, 124, 107, 0.15); }

.thg-tracker-similar { padding-block: clamp(28px, 4vw, 48px); }
.thg-tracker-similar .thg-section__sub {
	margin-top: 4px;
	color: var(--thg-ink-soft);
	font-size: 13px;
}
.thg-similar-reshuffle {
	margin-left: 10px;
	color: var(--thg-teal-deep, #2aa890);
	text-decoration: none;
	font-weight: 600;
}
.thg-similar-reshuffle:hover { text-decoration: underline; }
.thg-similar-grid {
	margin-top: 18px;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.thg-similar-card {
	display: flex;
	flex-direction: column;
	background: #fffdf7;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.thg-similar-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.18);
}
.thg-similar-card__img {
	aspect-ratio: 5 / 7;
	background: #efece4 center/cover no-repeat;
}
.thg-similar-card__body {
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.thg-similar-card__name {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.25;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.thg-similar-card__set {
	margin: 0;
	font-size: 11px;
	color: var(--thg-ink-soft);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.thg-similar-card__price {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.thg-similar-card__delta {
	font-size: 11px;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 999px;
}
.thg-similar-card__delta.is-up   { background: rgba(42, 168, 144, 0.12); color: #1f7a68; }
.thg-similar-card__delta.is-down { background: rgba(200, 115, 44, 0.12); color: #8c4f1c; }

/* ---------- Locked state (non-admin) ---------- */
.thg-tracker-locked { padding-block: clamp(48px, 8vw, 96px); }

/* ---------- Empty state ---------- */
.thg-tracker-empty {
	padding: 40px;
	text-align: center;
	color: var(--thg-ink-soft);
}

/* ---------- Stream / Presenter mode (privacy masking) ---------- */
.thg-stream-toggle {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 1000;
	background: var(--thg-ink);
	color: var(--thg-paper);
	border: 0;
	border-radius: 999px;
	padding: 14px 22px;
	font-family: var(--thg-font-display);
	font-size: 14px;
	letter-spacing: 0.06em;
	cursor: pointer;
	box-shadow: 0 12px 24px -10px rgba(2,2,2,0.4);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background .2s;
}
.thg-stream-toggle:hover { background: var(--thg-teal-deep); }
.thg-stream-mode .thg-stream-toggle { background: var(--thg-teal); }
.thg-stream-toggle__icon { font-size: 18px; line-height: 1; }

/* The masking itself: replace [data-thg-private] text with dashes. */
body.thg-stream-mode [data-thg-private] {
	color: transparent !important;
	position: relative;
}
body.thg-stream-mode [data-thg-private]::after {
	content: '•••';
	color: var(--thg-ink-soft);
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	letter-spacing: 0.2em;
	font-family: var(--thg-font-display);
}
body.thg-stream-mode [data-thg-private="qty"]::after {
	content: '••';
}
body.thg-stream-mode .thg-tracker-table th[data-thg-private]::after,
body.thg-stream-mode .thg-tracker-table td.num[data-thg-private]::after {
	justify-content: flex-end;
}

/* Also fade out totals when masking */
body.thg-stream-mode .thg-totals-card__pct { display: none; }

/* When the sell calculator is in Hypothetical mode, un-mask its values — the
 * whole point of hypothetical is to talk through numbers live on stream while
 * real holdings stay private. The override targets only descendants of
 * .thg-calc.thg-calc--hypo so dashboard/holdings remain masked. */
body.thg-stream-mode .thg-calc.thg-calc--hypo [data-thg-private] {
	color: inherit !important;
}
body.thg-stream-mode .thg-calc.thg-calc--hypo [data-thg-private]::after {
	content: none !important;
}

/* =============================================================
   Market Analytics page (/tracker/analytics/)
   ============================================================= */
.thg-cta-link {
	display: inline-block;
	background: var(--thg-ink);
	color: var(--thg-paper);
	padding: 10px 18px;
	border-radius: var(--thg-radius);
	text-decoration: none;
	font-family: var(--thg-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background .15s, transform .15s;
}
.thg-cta-link:hover {
	background: var(--thg-teal-deep);
	color: var(--thg-paper);
	transform: translateY(-1px);
}

.thg-analytics-hero { padding-block: clamp(36px, 5vw, 64px); }
.thg-analytics-warning {
	background: #fff7e6;
	border: 1.5px solid #c8732c;
	border-radius: var(--thg-radius-lg);
	padding: 18px 22px;
	margin: 18px 0 24px;
}
.thg-analytics-warning p { margin: 0 0 8px; }
.thg-analytics-warning p:last-child { margin-bottom: 0; }
.thg-analytics-warning code {
	background: rgba(0,0,0,0.06);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 13px;
}
.thg-back-link {
	color: var(--thg-ink-soft);
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.04em;
}
.thg-back-link:hover { color: var(--thg-teal-deep); }

.thg-analytics-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-top: clamp(20px, 2vw, 28px);
}
.thg-analytics-stat {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 20px 22px;
}
.thg-analytics-stat__label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin: 0 0 8px;
	font-weight: 600;
}
.thg-analytics-stat__value {
	font-family: var(--thg-font-display);
	font-size: clamp(28px, 4vw, 40px);
	color: var(--thg-ink);
	margin: 0;
	letter-spacing: 0.02em;
}
.thg-analytics-stat__sub {
	font-size: 11px;
	color: var(--thg-ink-soft);
	margin: 4px 0 0;
	font-style: italic;
}

.thg-analytics-section { padding-block: clamp(36px, 4vw, 56px); }
.thg-analytics-grid {
	display: grid;
	gap: clamp(18px, 2vw, 28px);
	grid-template-columns: repeat(2, 1fr);
	margin-top: clamp(20px, 2vw, 28px);
}
@media (max-width: 760px) {
	.thg-analytics-grid { grid-template-columns: 1fr; }
}
.thg-analytics-card {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: clamp(18px, 2vw, 24px);
	display: flex;
	flex-direction: column;
}
.thg-analytics-card--wide { grid-column: 1 / -1; }
.thg-analytics-card h3 {
	margin: 0 0 14px;
	font-family: var(--thg-font-display);
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--thg-ink);
}
.thg-analytics-card canvas {
	width: 100% !important;
	height: clamp(280px, 35vw, 380px) !important;
	display: block;
}
.thg-analytics-card--wide canvas {
	height: clamp(360px, 45vw, 460px) !important;
}
.thg-analytics-line-wrap {
	position: relative;
	width: 100%;
	height: clamp(360px, 45vw, 460px);
}
.thg-analytics-line-wrap > canvas {
	width: 100% !important;
	height: 100% !important;
}

.thg-analytics-window {
	margin-top: 18px;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	padding: 12px 16px;
	display: inline-block;
}
.thg-analytics-window select {
	padding: 4px 10px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 6px;
	background: var(--thg-paper);
	font: inherit;
	margin-left: 6px;
}

.thg-treemap-legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
	padding: 10px 14px;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	font-size: 12px;
	color: var(--thg-ink-soft);
}
.thg-treemap-legend__label {
	font-weight: 600;
	margin-right: 4px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 11px;
}
.thg-treemap-legend__swatch {
	display: inline-block;
	width: 20px;
	height: 14px;
	border-radius: 3px;
	margin: 0 2px 0 8px;
	border: 1px solid rgba(0,0,0,0.1);
}

/* =============================================================
   Character analytics page (/tracker/character/{slug}/)
   ============================================================= */
.thg-character-hero { padding-block: clamp(32px, 4vw, 56px); }
.thg-character-hero__layout {
	display: grid;
	grid-template-columns: minmax(180px, 240px) 1fr;
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
	margin-top: 12px;
}
@media (max-width: 720px) {
	.thg-character-hero__layout { grid-template-columns: 1fr; }
}
.thg-character-hero__img img {
	width: 100%;
	border-radius: var(--thg-radius-lg);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.thg-character-hero__title {
	font-family: var(--thg-font-display);
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.05;
	margin: 4px 0 12px;
	letter-spacing: 0.01em;
}
.thg-character-hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-top: 18px;
}
.thg-character-stat__label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	font-weight: 600;
	margin: 0 0 4px;
}
.thg-character-stat__value {
	font-family: var(--thg-font-display);
	font-size: clamp(22px, 3vw, 30px);
	color: var(--thg-ink);
	margin: 0;
}
.thg-character-stat__sub {
	font-size: 11px;
	color: var(--thg-ink-soft);
	margin: 4px 0 0;
	font-style: italic;
}

.thg-character-section { padding-block: clamp(32px, 4vw, 52px); }

.thg-character-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.thg-character-card {
	display: flex;
	flex-direction: column;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.thg-character-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
	border-color: var(--thg-teal);
}
.thg-character-card img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; display: block; }
.thg-character-card__noimg {
	aspect-ratio: 5 / 7;
	background: var(--thg-fog);
	color: var(--thg-ink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-style: italic;
}
.thg-character-card__body { padding: 10px 12px; }
.thg-character-card__name {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 4px;
	color: var(--thg-ink);
	line-height: 1.3;
}
.thg-character-card__meta {
	font-size: 11px;
	color: var(--thg-ink-soft);
	margin: 0 0 6px;
	letter-spacing: 0.02em;
}
.thg-character-card__price {
	font-family: var(--thg-font-display);
	font-size: 18px;
	color: var(--thg-teal-deep);
	margin: 0;
}

.thg-character-extremes {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 4px 0;
}
.thg-character-extremes dt {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	font-weight: 600;
	margin-bottom: 4px;
}
.thg-character-extremes dd {
	margin: 0 0 14px;
	display: grid;
	gap: 2px;
}
.thg-character-extremes dd strong { font-size: 15px; color: var(--thg-ink); }
.thg-character-extremes dd span { font-size: 12px; color: var(--thg-ink-soft); }
.thg-character-extremes__price {
	font-family: var(--thg-font-display) !important;
	font-size: 22px !important;
	color: var(--thg-teal-deep) !important;
	margin-top: 4px;
}

/* =============================================================
   Character index — grid on /tracker/analytics/
   ============================================================= */
.thg-character-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
	margin-top: 20px;
}
.thg-character-tile {
	display: flex;
	flex-direction: column;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, transform .15s;
}
.thg-character-tile:hover {
	border-color: var(--thg-teal);
	transform: translateY(-2px);
}
.thg-character-tile__img {
	position: relative;
	aspect-ratio: 5 / 7;
	overflow: hidden;
	background: var(--thg-ink);
	background-image: linear-gradient(135deg, var(--thg-ink) 0%, var(--thg-teal-deep) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.thg-character-tile__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	position: relative; z-index: 2;
}
.thg-character-tile__initials {
	font-family: var(--thg-font-display);
	font-size: clamp(36px, 6vw, 56px);
	color: rgba(255, 253, 247, 0.85);
	letter-spacing: 0.05em;
	z-index: 1;
}
/* When an img is present, hide initials (img sits z-2 above them but if it errors, JS strips img + adds is-fallback so initials remain visible) */
.thg-character-tile__img img + .thg-character-tile__initials { display: none; }
.thg-character-tile__img.is-fallback .thg-character-tile__initials { display: block; }
.thg-character-tile__body { padding: 10px 12px; }
.thg-character-tile__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--thg-ink);
	margin: 0 0 6px;
	line-height: 1.2;
}
.thg-character-tile__stats {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: var(--thg-ink-soft);
}
.thg-character-tile__avg {
	font-family: var(--thg-font-display);
	color: var(--thg-teal-deep);
	font-size: 14px;
}

/* =============================================================
   Catalog browser (/tracker/catalog/) + shared card tile component
   ============================================================= */
.thg-cta-link--secondary {
	background: var(--thg-paper);
	color: var(--thg-ink);
	border: 2px solid var(--thg-ink);
}
.thg-cta-link--secondary:hover {
	background: var(--thg-ink);
	color: var(--thg-paper);
}

.thg-catalog-hero { padding-block: clamp(32px, 4vw, 56px); }
.thg-catalog-flash {
	margin-top: 18px;
	padding: 12px 18px;
	border-radius: var(--thg-radius);
	font-weight: 500;
	border: 1.5px solid;
}
.thg-catalog-flash--prospect_added       { background: #e8f7f0; border-color: #2aa890; color: #1f7c6b; }
.thg-catalog-flash--prospect_exists      { background: #fff9e6; border-color: #d5b97e; color: #7d6f4a; }
.thg-catalog-flash--prospect_resurrected { background: #e8f0ff; border-color: #5d6b88; color: #34495e; }
.thg-catalog-flash--prospect_no_card,
.thg-catalog-flash--prospect_failed      { background: #fff0e8; border-color: #c8732c; color: #a63b1f; }

.thg-catalog-filters { padding-block: clamp(20px, 3vw, 32px); }
.thg-catalog-form {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: clamp(18px, 2.5vw, 26px);
}
.thg-catalog-form__row {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	margin-bottom: 14px;
}
.thg-catalog-form__row:last-child { margin-bottom: 0; }
.thg-catalog-form__field { display: flex; flex-direction: column; }
.thg-catalog-form__field--wide { grid-column: span 2; }
@media (max-width: 720px) {
	.thg-catalog-form__field--wide { grid-column: span 1; }
}
.thg-catalog-form__field > span {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin-bottom: 6px;
	font-weight: 600;
}
.thg-catalog-form__field input,
.thg-catalog-form__field select {
	padding: 8px 12px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 6px;
	background: var(--thg-paper);
	font: inherit;
	font-size: 14px;
}
.thg-catalog-form__field input:focus,
.thg-catalog-form__field select:focus {
	outline: none;
	border-color: var(--thg-teal);
}
.thg-catalog-form__actions {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}
.thg-catalog-btn {
	padding: 9px 18px;
	border-radius: var(--thg-radius);
	border: 2px solid;
	font-family: var(--thg-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, transform .15s;
}
.thg-catalog-btn--primary {
	background: var(--thg-teal-deep);
	border-color: var(--thg-teal-deep);
	color: var(--thg-paper);
}
.thg-catalog-btn--primary:hover { background: var(--thg-ink); border-color: var(--thg-ink); transform: translateY(-1px); }
.thg-catalog-btn--ghost {
	background: transparent;
	border-color: var(--thg-fog);
	color: var(--thg-ink-soft);
}
.thg-catalog-btn--ghost:hover { border-color: var(--thg-ink); color: var(--thg-ink); }

.thg-catalog-results { padding-block: clamp(24px, 3vw, 40px); }

.thg-cat-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.thg-cat-tile {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.thg-cat-tile:hover {
	border-color: var(--thg-teal);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.thg-cat-tile--owned { border-color: #1f7c6b; }
.thg-cat-tile {
	cursor: pointer;
}
.thg-cat-tile:focus-visible {
	outline: 2px solid var(--thg-teal-deep, #1f7c6b);
	outline-offset: 2px;
}
.thg-cat-tile__img {
	position: relative;
	aspect-ratio: 5 / 7;
	background: var(--thg-fog);
	text-decoration: none;
	display: block;
	overflow: hidden;
}

/* Click-to-reveal action overlay */
.thg-cat-tile__overlay {
	position: absolute;
	inset: 0;
	background: rgba(2, 2, 2, 0.78);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	padding: 16px 14px;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 5;
}
.thg-cat-tile.is-open .thg-cat-tile__overlay {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.thg-cat-tile__overlay-close {
	position: absolute;
	top: 4px;
	right: 6px;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thg-cat-tile__overlay-close:hover { background: rgba(255, 255, 255, 0.22); }
.thg-cat-tile__overlay-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.thg-cat-tile__overlay-actions .thg-cat-tile__btn,
.thg-cat-tile__overlay-actions .thg-cat-tile__cart-btn,
.thg-cat-tile__overlay-actions .thg-cat-tile__tcg {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin-left: 0;
	display: block;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.thg-cat-tile__overlay-actions .thg-cat-tile__cart-btn {
	background: #fff;
	color: #1f7c6b;
	border-color: #fff;
}
.thg-cat-tile__overlay-actions .thg-cat-tile__cart-btn:hover {
	background: #1f7c6b;
	color: #fff;
}
.thg-cat-tile__overlay-actions .thg-cat-tile__tcg {
	color: #fff !important;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
}
.thg-cat-tile__overlay-actions .thg-cat-tile__tcg:hover {
	background: rgba(255, 255, 255, 0.12);
}
.thg-cat-tile__overlay-actions form { margin: 0; }
.thg-cat-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thg-cat-tile__noimg {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--thg-ink-soft);
	font-style: italic;
	font-size: 12px;
}
.thg-cat-tile__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #1f7c6b;
	color: #fff;
	font-size: 10px;
	padding: 3px 8px;
	border-radius: 3px;
	letter-spacing: 0.05em;
	font-weight: 600;
}
.thg-cat-tile__body { padding: 10px 12px; }
.thg-cat-tile__name {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 4px;
	color: var(--thg-ink);
	line-height: 1.3;
}
.thg-cat-tile__meta {
	font-size: 11px;
	color: var(--thg-ink-soft);
	margin: 0 0 4px;
}
.thg-cat-tile__meta code {
	background: rgba(0,0,0,0.05);
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 10px;
}
.thg-cat-tile__pop {
	margin: 0 0 6px;
	font-size: 10px;
	color: var(--thg-ink-soft);
	letter-spacing: 0.02em;
	cursor: help;
}
.thg-cat-tile__price {
	font-family: var(--thg-font-display);
	font-size: 18px;
	color: var(--thg-teal-deep);
	margin: 4px 0 0;
}
.thg-cat-tile__actions {
	padding: 8px 10px 10px;
	border-top: 1px solid var(--thg-fog);
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: rgba(0,0,0,0.02);
}
.thg-cat-tile__btn {
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid;
	font-family: var(--thg-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	width: 100%;
	line-height: 1.4;
	transition: background .15s, color .15s;
}
.thg-cat-tile__btn--primary {
	background: var(--thg-teal-deep);
	border-color: var(--thg-teal-deep);
	color: var(--thg-paper);
}
.thg-cat-tile__btn--primary:hover { background: var(--thg-ink); border-color: var(--thg-ink); }
.thg-cat-tile__btn--secondary {
	background: var(--thg-paper);
	border-color: var(--thg-ink-soft);
	color: var(--thg-ink);
}
.thg-cat-tile__btn--secondary:hover { background: var(--thg-ink); color: var(--thg-paper); }
.thg-cat-tile__btn--danger {
	background: transparent;
	border-color: rgba(182, 86, 40, 0.35);
	color: #b65628;
	margin-top: 4px;
}
.thg-cat-tile__btn--danger:hover { background: #b65628; border-color: #b65628; color: var(--thg-paper); }
.thg-cat-tile__tcg {
	font-size: 10px;
	color: var(--thg-ink-soft);
	text-decoration: none;
	text-align: center;
	letter-spacing: 0.02em;
}
.thg-cat-tile__tcg:hover { color: var(--thg-teal-deep); }

/* Quick-status move dropdown on each prospect tile */
.thg-cat-tile__move {
	margin: 6px 14px 12px;
}
.thg-cat-tile__move select {
	width: 100%;
	padding: 6px 10px;
	background: #fffefa;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	font: inherit;
	font-size: 12px;
	color: #1a1a1a;
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #6b6b6b 50%),
		linear-gradient(135deg, #6b6b6b 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
	background-size: 4px 4px;
	background-repeat: no-repeat;
}
.thg-cat-tile__move select:hover {
	border-color: var(--thg-teal-deep, #2aa890);
}
.thg-cat-tile__move select:focus {
	outline: none;
	border-color: var(--thg-teal-deep, #2aa890);
	box-shadow: 0 0 0 2px rgba(42, 168, 144, 0.18);
}

.thg-pagination {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 32px 0 0;
}
.thg-pagination__link {
	padding: 7px 14px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 6px;
	background: var(--thg-paper);
	color: var(--thg-ink);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: background .15s, border-color .15s;
}
.thg-pagination__link:hover {
	border-color: var(--thg-teal);
	background: var(--thg-teal-soft);
}
.thg-pagination__link--active {
	background: var(--thg-ink);
	border-color: var(--thg-ink);
	color: var(--thg-paper);
}

/* =============================================================
   Treemap detail panel — appears below any treemap when a tile is clicked
   ============================================================= */
.thg-treemap-detail {
	margin-top: 14px;
}
.thg-tmd {
	position: relative;
	background: var(--thg-paper);
	border: 1.5px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: clamp(16px, 2vw, 22px);
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.thg-tmd__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: var(--thg-ink-soft);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
}
.thg-tmd__close:hover {
	background: var(--thg-fog);
	color: var(--thg-ink);
}
.thg-tmd__layout {
	display: grid;
	grid-template-columns: minmax(120px, 200px) 1fr;
	gap: clamp(16px, 2.5vw, 28px);
	align-items: start;
}
@media (max-width: 600px) {
	.thg-tmd__layout { grid-template-columns: 1fr; }
}
.thg-tmd__img {
	aspect-ratio: 5 / 7;
	border-radius: var(--thg-radius);
	overflow: hidden;
	background: var(--thg-fog);
}
.thg-tmd__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thg-tmd__noimg {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: var(--thg-ink-soft); font-style: italic; font-size: 13px;
}
.thg-tmd__eyebrow {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--thg-teal-deep);
	font-weight: 700;
	margin: 0 0 6px;
}
.thg-tmd__name {
	font-family: var(--thg-font-display);
	font-size: clamp(22px, 3vw, 30px);
	color: var(--thg-ink);
	margin: 0 0 6px;
	line-height: 1.1;
	letter-spacing: 0.02em;
}
.thg-tmd__meta {
	font-size: 13px;
	color: var(--thg-ink-soft);
	margin: 0 0 16px;
}
.thg-tmd__stats {
	display: flex;
	gap: clamp(18px, 3vw, 32px);
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--thg-fog);
	border-bottom: 1px solid var(--thg-fog);
}
.thg-tmd__stat { display: flex; flex-direction: column; gap: 4px; }
.thg-tmd__stat-label {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	font-weight: 600;
}
.thg-tmd__stat-value {
	font-family: var(--thg-font-display);
	font-size: 22px;
	color: var(--thg-ink);
	letter-spacing: 0.02em;
}
.thg-tmd__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.thg-tmd__btn {
	padding: 9px 18px;
	border-radius: var(--thg-radius);
	font-family: var(--thg-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid;
	cursor: pointer;
	transition: background .15s, color .15s, transform .15s;
}
.thg-tmd__btn--primary {
	background: var(--thg-teal-deep);
	border-color: var(--thg-teal-deep);
	color: var(--thg-paper);
}
.thg-tmd__btn--primary:hover {
	background: var(--thg-ink);
	border-color: var(--thg-ink);
	color: var(--thg-paper);
	transform: translateY(-1px);
}
.thg-tmd__btn--secondary {
	background: var(--thg-paper);
	border-color: var(--thg-ink);
	color: var(--thg-ink);
}
.thg-tmd__btn--secondary:hover {
	background: var(--thg-ink);
	color: var(--thg-paper);
	transform: translateY(-1px);
}

/* =============================================================
   Prospects page (/tracker/prospects/)
   ============================================================= */
.thg-prospects-hero { padding-block: clamp(36px, 5vw, 64px); text-align: center; }
.thg-prospects-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-top: clamp(20px, 2vw, 28px);
	text-align: left;
}
.thg-prospects-stat {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 18px 22px;
}
.thg-prospects-stat__label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin: 0 0 8px;
	font-weight: 600;
}
.thg-prospects-stat__value {
	font-family: var(--thg-font-display);
	font-size: clamp(28px, 3.5vw, 40px);
	color: var(--thg-ink);
	margin: 0;
	letter-spacing: 0.02em;
	line-height: 1;
}
.thg-prospects-stat__sub {
	font-size: 11px;
	color: var(--thg-ink-soft);
	margin: 6px 0 0;
	font-style: italic;
}
.thg-prospects-section { padding-block: clamp(28px, 4vw, 48px); }

/* =============================================================
   Allocation Lab — on /tracker/prospects/
   ============================================================= */
.thg-alloc {
	background: var(--thg-paper);
	border: 1.5px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: clamp(20px, 3vw, 32px);
}
.thg-alloc__controls {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) 2fr 2fr;
	gap: 24px;
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px dashed var(--thg-fog);
}
@media (max-width: 760px) {
	.thg-alloc__controls { grid-template-columns: 1fr; }
}
.thg-alloc__field { display: flex; flex-direction: column; }
.thg-alloc__field > span {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin-bottom: 8px;
	font-weight: 600;
}
.thg-alloc__field > span small {
	display: block;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 2px;
	font-size: 10px;
}
.thg-alloc__field input[type=number] {
	padding: 8px 12px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 6px;
	background: var(--thg-paper);
	font: inherit;
	font-family: var(--thg-font-display);
	font-size: 20px;
}
.thg-alloc__picker {
	background: rgba(0,0,0,0.02);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	padding: 14px 16px;
	margin-bottom: 20px;
}
.thg-alloc__picker-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-size: 13px;
}
.thg-alloc__picker-head > span { display: flex; gap: 6px; flex-wrap: wrap; }
.thg-alloc__picker-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 8px;
	max-height: 360px;
	overflow-y: auto;
	padding: 4px;
}
.thg-alloc__pick {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
}
.thg-alloc__pick:hover { border-color: var(--thg-teal); }
.thg-alloc__pick input { margin: 0; }
.thg-alloc__pick-name {
	flex: 1;
	font-weight: 600;
	color: var(--thg-ink);
}
.thg-alloc__pick-prices {
	font-size: 11px;
	color: var(--thg-ink-soft);
	font-variant-numeric: tabular-nums;
}
.thg-alloc__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 18px;
	padding: 14px 18px;
	background: var(--thg-ink);
	color: var(--thg-paper);
	border-radius: var(--thg-radius);
}
.thg-alloc__summary > div { display: flex; flex-direction: column; gap: 4px; }
.thg-alloc__summary span {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,253,247,0.7);
}
.thg-alloc__summary strong {
	font-family: var(--thg-font-display);
	font-size: clamp(20px, 2.5vw, 28px);
	letter-spacing: 0.02em;
}
.thg-alloc__table { margin-top: 12px; }
.thg-alloc__table th { background: rgba(0,0,0,0.03); }
.thg-alloc__table td.num, .thg-alloc__table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Allocation Lab bubble-click popup */
.thg-alloc-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.thg-alloc-popup[hidden] { display: none; }
.thg-alloc-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 2, 2, 0.55);
	backdrop-filter: blur(2px);
}
.thg-alloc-popup__panel {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 18px;
	width: 100%;
	max-width: 560px;
	max-height: 88vh;
	overflow-y: auto;
	background: #fffdf7;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	padding: 22px;
}
.thg-alloc-popup__x {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: rgba(0, 0, 0, 0.05);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.thg-alloc-popup__x:hover { background: rgba(0, 0, 0, 0.12); }
.thg-alloc-popup__art {
	width: 160px;
	height: 224px;
	flex: 0 0 160px;
	background: #efece4 center/cover no-repeat;
	border-radius: 6px;
}
.thg-alloc-popup__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	flex: 1;
}
.thg-alloc-popup__name {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
}
.thg-alloc-popup__set {
	margin: 0;
	font-size: 11px;
	color: var(--thg-ink-soft, #6b6b6b);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.thg-alloc-popup__stats {
	margin: 6px 0 0;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 14px;
	row-gap: 4px;
	font-size: 13px;
}
.thg-alloc-popup__stats > div { display: contents; }
.thg-alloc-popup__stats dt {
	color: var(--thg-ink-soft, #6b6b6b);
	font-weight: 500;
}
.thg-alloc-popup__stats dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.thg-alloc-popup__cta {
	margin-top: 10px;
	color: var(--thg-teal-deep, #2aa890);
	font-weight: 600;
	text-decoration: none;
	font-size: 13px;
}
.thg-alloc-popup__cta:hover { text-decoration: underline; }
@media (max-width: 520px) {
	.thg-alloc-popup__panel { flex-direction: column; }
	.thg-alloc-popup__art   { width: 100%; height: 220px; flex: none; }
}

/* Allocation Lab — editable buy/sell cells */
.thg-alloc__cell {
	width: 80px;
	padding: 4px 8px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 5px;
	background: var(--thg-paper);
	font: inherit;
	font-family: var(--thg-font-body);
	font-size: 13px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	transition: border-color .12s, background .12s;
}
.thg-alloc__cell:hover { border-color: var(--thg-teal); }
.thg-alloc__cell:focus {
	outline: none;
	border-color: var(--thg-teal-deep);
	background: var(--thg-teal-soft);
}
.thg-alloc__override {
	color: var(--thg-teal-deep);
	font-size: 11px;
	margin-left: 4px;
	cursor: help;
}

/* =============================================================
   Allocation Lab — card image picker. Image-only tiles, click to toggle.
   Unselected cards are dimmed/desaturated so picked ones pop.
   ============================================================= */
.thg-alloc__picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	max-height: 540px;
	overflow-y: auto;
	padding: 6px 4px;
}
.thg-alloc__card {
	position: relative;
	background: transparent !important;
	background-color: transparent !important;
	border: 2px solid transparent;
	border-radius: var(--thg-radius);
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .15s, opacity .15s, filter .15s;
}
/* Beat block-theme defaults that paint a pinkish/peach :hover background on
 * generic <button> elements. We force the background transparent in every
 * state and use the image brightening + border tint as the hover cue. */
.thg-alloc__card:hover,
.thg-alloc__card:focus,
.thg-alloc__card:active {
	background: transparent !important;
	background-color: transparent !important;
}
.thg-alloc__card:hover { border-color: rgba(42, 168, 144, 0.35); }
.thg-alloc__card:focus-visible {
	outline: none;
	border-color: var(--thg-teal-deep);
	box-shadow: 0 0 0 3px rgba(42, 168, 144, 0.3);
}
.thg-alloc__card img {
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: cover;
	display: block;
	border-radius: calc(var(--thg-radius) - 2px);
}
.thg-alloc__card-noimg {
	aspect-ratio: 5 / 7;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--thg-fog);
	color: var(--thg-ink-soft);
	font-size: 10px;
	font-style: italic;
	border-radius: calc(var(--thg-radius) - 2px);
}
.thg-alloc__card-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	background: #1f7c6b;
	color: #fff;
	font-size: 10px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	box-shadow: 0 2px 4px rgba(0,0,0,0.25);
	z-index: 2;
}
.thg-alloc__card-check {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--thg-teal-deep);
	color: var(--thg-paper);
	font-size: 14px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity .15s, transform .15s;
	pointer-events: none;
	z-index: 3;
	box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.thg-alloc__card.is-selected {
	border-color: var(--thg-teal-deep);
}
.thg-alloc__card.is-selected .thg-alloc__card-check {
	opacity: 1;
	transform: scale(1);
}
.thg-alloc__card:not(.is-selected) {
	opacity: 0.5;
	filter: grayscale(0.25);
}
.thg-alloc__card:not(.is-selected):hover {
	opacity: 0.85;
	filter: none;
}
.thg-alloc__card.is-selected { opacity: 1; }

/* ─── Inline target-price editor on card detail ─── */
.thg-card-targets {
	margin-top: 18px;
	padding: 14px 18px;
	background: rgba(0,0,0,0.025);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
}
.thg-card-targets__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}
.thg-card-targets__field {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 130px;
}
.thg-card-targets__field > span {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
	margin-bottom: 4px;
	font-weight: 600;
}
.thg-card-targets__field input {
	padding: 8px 12px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 6px;
	background: var(--thg-paper);
	font: inherit;
	font-family: var(--thg-font-display);
	font-size: 18px;
}
.thg-card-targets__field input:focus {
	outline: none;
	border-color: var(--thg-teal);
}
.thg-card-targets__save {
	padding: 10px 18px;
	background: var(--thg-ink);
	color: var(--thg-paper);
	border: 0;
	border-radius: var(--thg-radius);
	font-family: var(--thg-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.thg-card-targets__save:hover {
	background: var(--thg-teal-deep);
	transform: translateY(-1px);
}
.thg-card-targets__msg {
	margin: 8px 0 0;
	color: var(--thg-teal-deep);
	font-size: 13px;
	font-weight: 600;
}

/* Prospect compare filter toolbar */
.thg-prosp-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 6px 0 12px;
	font-size: 12px;
}
.thg-prosp-filter[hidden] { display: none; }
.thg-prosp-filter__group {
	display: inline-flex;
	gap: 6px;
}
.thg-prosp-filter__btn {
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fffdf7;
	color: #1a1a1a;
	padding: 5px 12px;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	transition: background 0.15s, border-color 0.15s;
}
.thg-prosp-filter__btn:hover { background: #f0ede4; }
.thg-prosp-filter__btn.is-active {
	background: #1a1a1a;
	color: #fffdf7;
	border-color: #1a1a1a;
}
.thg-prosp-filter__chars {
	position: relative;
}
.thg-prosp-filter__chars summary {
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fffdf7;
	padding: 5px 12px;
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.thg-prosp-filter__chars summary::-webkit-details-marker { display: none; }
.thg-prosp-filter__chars[open] summary { background: #f0ede4; }
.thg-prosp-filter__chars-count {
	color: #6b6b6b;
	font-variant-numeric: tabular-nums;
}
.thg-prosp-filter__chars-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 6;
	background: #fffdf7;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	padding: 8px 4px;
	max-height: 320px;
	overflow-y: auto;
	min-width: 220px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
}
.thg-prosp-filter__chars-list label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}
.thg-prosp-filter__chars-list label:hover { background: #f0ede4; }
.thg-prosp-filter__chars-list .thg-prosp-filter__swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 10px;
}
.thg-prosp-filter__chars-list input { margin: 0; }
.thg-prosp-filter__chars-bulk {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 7;
	display: none;
}
.thg-prosp-filter__chars[open] .thg-prosp-filter__chars-bulk {
	display: flex;
	gap: 4px;
	top: calc(100% + 4px);
	left: 232px;
	background: transparent;
	flex-direction: column;
}
.thg-prosp-filter__chars-bulk button {
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fffdf7;
	padding: 4px 10px;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 11px;
}
.thg-prosp-filter__chars-bulk button:hover { background: #f0ede4; }
.thg-prosp-filter__count {
	margin-left: auto;
	color: #6b6b6b;
	font-variant-numeric: tabular-nums;
}

/* Prospect compare multi-line chart container */
.thg-prosp-lines-wrap {
	position: relative;
	width: 100%;
	height: clamp(420px, 50vw, 620px);
}
.thg-prosp-lines-wrap canvas {
	width: 100% !important;
	height: 100% !important;
}

/* Hover overlay: card thumb + start/current prices, pinned top-left */
.thg-prosp-lines-overlay {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	gap: 10px;
	align-items: stretch;
	background: rgba(255, 253, 247, 0.96);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-left-width: 4px;
	border-radius: 6px;
	padding: 8px 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	max-width: 280px;
	pointer-events: none;
	z-index: 5;
	font-size: 12px;
	color: #1a1a1a;
}
.thg-prosp-lines-overlay[hidden] { display: none; }
.thg-prosp-lines-overlay__img {
	width: 56px;
	height: 78px;
	flex: 0 0 56px;
	background: #efece4 center/cover no-repeat;
	border-radius: 3px;
}
.thg-prosp-lines-overlay__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.thg-prosp-lines-overlay__title {
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}
.thg-prosp-lines-overlay__stats {
	margin: 0;
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 8px;
	row-gap: 2px;
}
.thg-prosp-lines-overlay__stats > div {
	display: contents;
}
.thg-prosp-lines-overlay__stats dt {
	color: #6b6b6b;
	font-weight: 500;
}
.thg-prosp-lines-overlay__stats dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	text-align: right;
	font-weight: 600;
}

/* ===================================================================
 * Set-completion tracker (/tracker/sets/)
 * =================================================================== */

/* --- List page totals --- */
.thg-sets-totals {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 40px);
	margin-top: 24px;
}
.thg-sets-total { display: flex; flex-direction: column; gap: 2px; }
.thg-sets-total__num {
	font-family: var(--thg-font-display);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1;
	color: var(--thg-teal);
	font-variant-numeric: tabular-nums;
}
.thg-sets-total__label {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
}

/* --- Set group + grid --- */
.thg-sets-group__title {
	font-family: var(--thg-font-display);
	font-size: clamp(20px, 2.6vw, 28px);
	color: var(--thg-ink);
	margin: 0 0 18px;
	letter-spacing: 0.01em;
}
.thg-sets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(14px, 2vw, 22px);
}

/* --- Single set card --- */
.thg-set-card {
	display: block;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg, 14px);
	padding: 18px 20px;
	text-decoration: none;
	color: inherit;
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.thg-set-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(2, 2, 2, 0.08);
	border-color: var(--thg-teal);
}
.thg-set-card--done { border-color: var(--thg-teal); background: var(--thg-teal-soft); }
.thg-set-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}
.thg-set-card__code {
	font-family: var(--thg-font-display);
	letter-spacing: 0.08em;
	font-size: 14px;
	color: var(--thg-ink-soft);
}
.thg-set-card__check {
	font-size: 11px;
	font-weight: 700;
	color: var(--thg-teal-deep);
	background: var(--thg-paper);
	border: 1px solid var(--thg-teal);
	border-radius: 999px;
	padding: 2px 8px;
}
.thg-set-card__name {
	font-family: var(--thg-font-body);
	font-weight: 600;
	font-size: 16px;
	margin: 0 0 14px;
	color: var(--thg-ink);
	line-height: 1.25;
}
.thg-set-card__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--thg-fog);
	overflow: hidden;
	margin-bottom: 10px;
}
.thg-set-card__bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--thg-teal);
	transition: width .3s ease;
}
.thg-set-card__stats {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	color: var(--thg-ink-soft);
	font-variant-numeric: tabular-nums;
}
.thg-set-card__stats strong { color: var(--thg-ink); }
.thg-set-card__pct { font-weight: 700; color: var(--thg-teal-deep); }
.thg-set-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--thg-fog);
	font-size: 13px;
	color: var(--thg-ink-soft);
	font-variant-numeric: tabular-nums;
}
.thg-set-card__cost { color: var(--thg-teal-deep); font-weight: 600; }
.thg-set-card__gain { font-weight: 700; }
.thg-set-card__gain.is-up   { color: #1f7a68; }
.thg-set-card__gain.is-down { color: #8c4f1c; }

/* --- Detail page --- */
.thg-set-detail-bar { max-width: 420px; height: 10px; margin: 18px 0 10px; }
.thg-set-detail-stats {
	font-size: 15px;
	color: var(--thg-ink-soft);
	margin: 0 0 18px;
}
.thg-set-detail-stats strong { color: var(--thg-ink); }
.thg-set-detail-worth {
	font-size: 15px;
	color: var(--thg-ink-soft);
	margin: -12px 0 18px;
}
.thg-set-detail-worth strong { color: var(--thg-ink); }
.thg-set-detail-worth__gain.is-up   { color: #1f7a68; font-weight: 700; }
.thg-set-detail-worth__gain.is-down { color: #8c4f1c; font-weight: 700; }
.thg-set-detail-worth__note { font-style: italic; opacity: 0.8; }
.thg-set-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.thg-set-filter__pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--thg-fog);
	background: var(--thg-paper);
	color: var(--thg-ink-soft);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .14s, color .14s, border-color .14s;
}
.thg-set-filter__pill:hover { border-color: var(--thg-teal); color: var(--thg-ink); }
.thg-set-filter__pill.is-active {
	background: var(--thg-ink);
	color: var(--thg-paper);
	border-color: var(--thg-ink);
}
.thg-set-addall {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border: none;
	border-radius: 999px;
	background: var(--thg-teal);
	color: var(--thg-paper);
	font-family: var(--thg-font-body);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background .14s, transform .14s;
}
.thg-set-addall:hover { background: var(--thg-teal-deep); transform: translateY(-1px); }
@media (max-width: 560px) {
	.thg-set-addall { margin-left: 0; width: 100%; justify-content: center; }
}

/* ===================================================================
 * Book performance — dashboard "how your collection is moving"
 * =================================================================== */
.thg-bookperf-windows { display: flex; gap: 8px; margin-top: 14px; }
.thg-bookperf-window {
	padding: 5px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--thg-fog);
	background: var(--thg-paper);
	color: var(--thg-ink-soft);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .14s, color .14s, border-color .14s;
}
.thg-bookperf-window:hover { border-color: var(--thg-teal); color: var(--thg-ink); }
.thg-bookperf-window.is-active { background: var(--thg-ink); color: var(--thg-paper); border-color: var(--thg-ink); }

/* Whole-catalog value chart: tier + window pill controls (reuse bookperf pill look). */
.thg-catval-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 4px 0 16px;
}
.thg-catval-group { display: flex; flex-wrap: wrap; gap: 8px; }
.thg-catval-pill {
	padding: 5px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--thg-fog);
	background: var(--thg-paper);
	color: var(--thg-ink-soft);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .14s, color .14s, border-color .14s;
}
.thg-catval-pill:hover { border-color: var(--thg-teal); color: var(--thg-ink); }
.thg-catval-pill.is-active { background: var(--thg-teal-deep); color: var(--thg-paper); border-color: var(--thg-teal-deep); }
.thg-catval-wrap { height: clamp(240px, 40vw, 380px); }

/* Summary stat strip */
.thg-bookperf-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: clamp(12px, 2vw, 20px);
	margin: 22px 0;
}
.thg-bookperf-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-left-width: 4px;
	border-radius: var(--thg-radius-lg, 14px);
	padding: 16px 18px;
}
.thg-bookperf-stat--up   { border-left-color: var(--thg-teal); }
.thg-bookperf-stat--down { border-left-color: #c8732c; }
.thg-bookperf-stat--net  { border-left-color: var(--thg-ink); }
.thg-bookperf-stat--flat { border-left-color: var(--thg-fog); }
.thg-bookperf-stat__num {
	font-family: var(--thg-font-display);
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1;
	color: var(--thg-ink);
	font-variant-numeric: tabular-nums;
}
.thg-bookperf-stat--up   .thg-bookperf-stat__num { color: var(--thg-teal-deep); }
.thg-bookperf-stat--down .thg-bookperf-stat__num { color: #c8732c; }
.thg-bookperf-stat__label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--thg-ink-soft);
}
.thg-bookperf-stat__sub { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--thg-ink-soft); }

/* Three leaderboards */
.thg-bookperf-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(16px, 2vw, 26px);
}
/* Pre-Release page: event-set movers + hot sets (reuses .thg-bookperf-row). */
.thg-pre-movers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(16px, 2vw, 26px);
}
.thg-bookperf-col__head {
	font-family: var(--thg-font-display);
	font-size: 19px;
	letter-spacing: 0.01em;
	color: var(--thg-ink);
	margin: 0 0 2px;
}
.thg-bookperf-col__sub { font-size: 11px; color: var(--thg-ink-soft); margin: 0 0 10px; font-style: italic; }
.thg-bookperf-empty { font-size: 13px; color: var(--thg-ink-soft); font-style: italic; margin: 6px 0; }
.thg-bookperf-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: background .12s;
}
.thg-bookperf-row:hover { background: var(--thg-paper); }
.thg-bookperf-row__img {
	width: 40px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--thg-fog);
	flex: 0 0 auto;
}
.thg-bookperf-row__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.thg-bookperf-row__name {
	font-weight: 600;
	font-size: 14px;
	color: var(--thg-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.thg-bookperf-row__meta { font-size: 11px; color: var(--thg-ink-soft); }
.thg-bookperf-row__metric {
	flex: 0 0 auto;
	text-align: right;
	font-weight: 700;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}
.thg-bookperf-row__metric small { display: block; font-size: 11px; font-weight: 600; opacity: 0.8; }