/* ==========================================================================
   tags.css
   Community-voted tag pills on the game show page ("Kinks").

   Reuses .pill, .badge, .btn from design-system.css. Category tinting is
   done with a single CSS custom property scoped per-category so a future
   tag-edit UI can change category color without touching layout.

   Reduced-motion: all transitions → 0.001ms.
   ========================================================================== */

/* ponytail: Tom Select drives the dropdown UI for the tag picker. Pulled
   in via url() so we don't vendor a static file; the CDN serves a hashed
   release and the browser cache hits on subsequent loads. Scoped to
   tags.css because Tom Select is only used on this section. */
@import url("https://cdn.jsdelivr.net/npm/tom-select@2.6.1/dist/css/tom-select.min.css");

/* ponytail: category color tokens. Tints are restrained (≤12% alpha in body)
   so the dark surface keeps authority and tags read as data, not decoration. */
:root {
	--tag-cat-cont-fg: #f0abfc; /* soft fuchsia — content/theme */
	--tag-cat-cont-bg: rgba(217, 70, 239, 0.1);
	--tag-cat-cont-border: rgba(217, 70, 239, 0.28);

	--tag-cat-ero-fg: #fca5a5; /* warm pink — sexual content */
	--tag-cat-ero-bg: rgba(248, 113, 113, 0.12);
	--tag-cat-ero-border: rgba(248, 113, 113, 0.32);

	--tag-cat-tech-fg: #93c5fd; /* cool blue — technical */
	--tag-cat-tech-bg: rgba(96, 165, 250, 0.1);
	--tag-cat-tech-border: rgba(96, 165, 250, 0.26);
}

/* ==========================================================================
   Section
   ========================================================================== */

.tag-section {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	min-width: 0;
}

.tag-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-1);
}

.tag-section__hint {
	color: var(--text-3);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-snug);
}

/* ==========================================================================
   Picker (typeahead)
   ========================================================================== */

.tag-picker {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

/* ponytail: Tom Select overrides — the picker only appears on the tag
   section, so we drop these rules into tags.css rather than a global
   tom-select.css. The defaults assume a light surface; we retint to match
   the dark surface tokens without forking the upstream stylesheet.

   Specificity note: Tom Select ships rules like
   `.ts-wrapper.single.input-active .ts-control { background:#fff }` that
   beat a plain `.tag-picker__select .ts-control` (both end up 0,2-3,0).
   We mirror Tom's class list in our selector to stay ahead, so the dark
   surface wins on focus, typing, and any other state it adds. */
.tag-picker__select.ts-wrapper,
.tag-picker__select.ts-wrapper.single {
	min-height: 38px;
}

.tag-picker__select.ts-wrapper .ts-control,
.tag-picker__select.ts-wrapper.single .ts-control,
.tag-picker__select.ts-wrapper.single.input-active .ts-control,
.tag-picker__select.ts-wrapper.focus .ts-control {
	padding: 0 var(--s-3);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: none;
	transition:
		border-color var(--dur) var(--ease),
		background var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.tag-picker__select.ts-wrapper .ts-control:hover {
	background: var(--surface-3);
	border-color: var(--border-strong);
}

.tag-picker__select.ts-wrapper.focus .ts-control,
.tag-picker__select.ts-wrapper.single.input-active.focus .ts-control {
	background: var(--surface-1);
	border-color: var(--border-accent);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

.tag-picker__select.ts-wrapper .ts-control input {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(
		--text
	) !important; /* ponytail: beats .ts-control input { color:#303030 } from CDN. */
	background: transparent;
}

.tag-picker__select.ts-wrapper .ts-control input::placeholder {
	color: var(--text-3);
	opacity: 1;
}

.tag-picker__select.ts-wrapper .ts-dropdown,
.tag-picker__select.ts-wrapper.single .ts-dropdown,
.tag-picker__select.ts-wrapper.focus .ts-dropdown {
	background: var(--surface-solid);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg), var(--inner-hi);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--text);
	/* ponytail: Tom Select positions the dropdown relative to the input.
	   The default z-index clashes with our sticky nav, so bump it. */
	z-index: 50;
}

.tag-picker__select.ts-wrapper .ts-dropdown [data-selectable] {
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-sm);
	color: var(--text);
	transition: background var(--dur-fast) var(--ease);
}

.tag-picker__select.ts-wrapper .ts-dropdown [data-selectable].active,
.tag-picker__select.ts-wrapper .ts-dropdown [data-selectable]:hover {
	background: var(--surface-2);
	color: var(--text);
}

.tag-picker__select.ts-wrapper .ts-dropdown .optgroup-header,
.tag-picker__select.ts-wrapper .ts-dropdown .optgroup-header.active {
	background: var(--surface-solid);
	color: var(--text-3);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding: var(--s-2) var(--s-3) var(--s-1);
}

.tag-picker__select.ts-wrapper .ts-dropdown .no-results {
	color: var(--text-3);
	padding: var(--s-2) var(--s-3);
}

.tag-picker__select.ts-wrapper .ts-control .item {
	display: inline-flex;
	align-items: center;
	padding: 0 0 0 var(--s-1);
	color: var(--text);
	background: transparent;
	border: 0;
}

/* ==========================================================================
   Category groups
   ========================================================================== */

.tag-category {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	min-width: 0;
}

.tag-category + .tag-category {
	margin-top: var(--s-3);
	padding-top: var(--s-3);
	border-top: 1px solid var(--border);
}

.tag-category__label {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-3);
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.tag-category__count {
	color: var(--text-3);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

/* ==========================================================================
   Pills (one per assignment)
   ========================================================================== */

.tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-pill {
	--pill-fg: var(--text);
	--pill-bg: var(--surface-2);
	--pill-border: var(--border);

	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	min-height: 32px;
	padding: 4px 4px 4px 12px;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--pill-fg);
	background: var(--pill-bg);
	border: 1px solid var(--pill-border);
	border-radius: var(--r-full);
	white-space: nowrap;
	transition:
		background var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.tag-pill.tag-category-cont {
	--pill-fg: var(--tag-cat-cont-fg);
	--pill-bg: var(--tag-cat-cont-bg);
	--pill-border: var(--tag-cat-cont-border);
}
.tag-pill.tag-category-ero {
	--pill-fg: var(--tag-cat-ero-fg);
	--pill-bg: var(--tag-cat-ero-bg);
	--pill-border: var(--tag-cat-ero-border);
}
.tag-pill.tag-category-tech {
	--pill-fg: var(--tag-cat-tech-fg);
	--pill-bg: var(--tag-cat-tech-bg);
	--pill-border: var(--tag-cat-tech-border);
}

.tag-pill__name {
	color: inherit;
	font-weight: 600;
	letter-spacing: var(--tracking-snug);
}

.tag-pill__score {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	margin-left: 2px;
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	font-weight: 700;
	color: var(--text);
	background: rgba(0, 0, 0, 0.32);
	border-radius: var(--r-full);
}

/* Negative score should signal disapproval without screaming */
.tag-pill__score.is-negative {
	color: #fca5a5;
	background: rgba(248, 113, 113, 0.18);
}

/* ==========================================================================
   Vote + remove buttons
   ========================================================================== */

.tag-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--text-2);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition:
		background var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.tag-action:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.06);
}

.tag-action:active {
	transform: scale(0.92);
}

.tag-action:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--border-accent);
}

.tag-action.is-active {
	color: var(--text);
	background: rgba(239, 68, 68, 0.18);
}

.tag-action--down.is-active {
	background: rgba(248, 113, 113, 0.22);
}

.tag-action--remove {
	color: var(--text-3);
	opacity: 0;
	transition:
		opacity var(--dur) var(--ease),
		color var(--dur-fast) var(--ease),
		background var(--dur-fast) var(--ease);
}

.tag-pill:hover .tag-action--remove,
.tag-pill:focus-within .tag-action--remove {
	opacity: 1;
}

.tag-action--remove:hover {
	color: var(--danger);
	background: rgba(248, 113, 113, 0.12);
}

/* ponytail: tag_vote_controller.js updates the button's aria-pressed, so we
   give a visible "pressed" state. Color uses the same accent tokens as
   .badge--want so vote-up = want-coded, vote-down = drop-coded. */

/* ==========================================================================
   Empty state
   ========================================================================== */

.tag-empty {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-4);
	font-size: var(--text-sm);
	color: var(--text-3);
	background: var(--surface-1);
	border: 1px dashed var(--border);
	border-radius: var(--r-md);
	line-height: var(--leading-relaxed);
}

.tag-empty strong {
	color: var(--text-2);
	font-weight: 600;
}

/* ==========================================================================
   Live region (announces vote outcomes to screen readers)
   ========================================================================== */

.tag-live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.tag-pill,
	.tag-action,
	.tag-picker__input,
	.tag-results,
	.tag-results__item,
	.tag-action--remove {
		transition: none;
	}
	.tag-action:active {
		transform: none;
	}
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {
	.tag-pill {
		min-height: 36px; /* thumb-zone friendly */
		padding: 4px 4px 4px 12px;
	}
	.tag-action {
		width: 30px; /* 30×30 inside a 36-tall pill ≈ 44 effective */
		height: 30px;
	}
	.tag-action--remove {
		opacity: 1; /* don't hide on touch devices */
	}
}