/* ==========================================================================
   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. Its
   stylesheet is vendored (app/assets/stylesheets/vendor/tom-select.min.css)
   and linked from ApplicationHelper::VENDOR_STYLESHEETS, which puts it in
   the cascade before this sheet so the overrides below win. It used to be
   imported from cdn.jsdelivr.net, which handed every page view that loads
   this sheet to a third party. */

/* 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);
}

/* ponytail: the "Show more" link under the categories. It only shows when
   the preview actually left something out. */
.tag-section__more {
	margin-top: var(--s-2);
}

/* ==========================================================================
   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 upstream. */
	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: var(--z-nav);
}

.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-1);
	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: 26px;
	padding: 3px 4px 3px 9px;
	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: 18px;
	height: 18px;
	padding: 0 5px;
	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: var(--score-neg);
	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. Up = the accent red; down = the lighter
   red the negative-score pill uses, so the two directions read apart. */

/* ==========================================================================
   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-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 */
	}
}

/* ==========================================================================
   Tags pages (index, show, and the admin new/edit forms)
   ==========================================================================

   These views used to wrap themselves in .home-page / .home-main. .home-page
   is a two-column grid — `1fr 320px` — sized for the home page's main +
   sidebar split. The tags pages have no sidebar sibling, so their content
   landed in the 1fr track with a dead 320px column beside it: the page read
   as half-unstyled, content pushed left with a gap on the right.

   One single-column container instead, matching .game-page and the 1200px
   max-width DESIGN.md documents. */
.tags-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--s-4) var(--s-6) var(--s-10);
}

@media (max-width: 640px) {
	.tags-page {
		padding: var(--s-3) var(--s-4) var(--s-9);
	}
}

/* Filter bar on tags#index. The bare .search-* classes are the nav search
   primitives, which are sized for the 64px nav; on a full-width page they
   need room to breathe. */
.tags-filter {
	display: flex;
	gap: var(--s-3);
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: var(--s-5);
}

.tags-filter .search-form {
	flex: 1 1 260px;
	display: flex;
	gap: var(--s-2);
}

.tags-filter .search-input {
	flex: 1 1 auto;
	min-width: 0;
}

/* .select is width:100% for use inside a .form-field column. Here it is a
   flex sibling of the search box, so size it to its content instead. */
.tags-filter .select {
	flex: 0 0 auto;
	width: auto;
	min-width: 150px;
}