/* The Real Gay Guy Pro — tool styles (quiz, routine, wardrobe, palette, prioritizer, profile, database, tracker). Phase 5 fleshes. */

.trgg-tool {
	background: var(--trgg-white);
	border-radius: var(--trgg-radius-lg);
	box-shadow: var(--trgg-shadow-1);
	padding: var(--trgg-s-6);
	max-width: 820px;
	margin: 0 auto;
}

.trgg-tool[hidden] { display: none; }

.trgg-tool__progress {
	height: 6px;
	background: var(--trgg-blush);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: var(--trgg-s-5);
}
.trgg-tool__progress-bar {
	height: 100%;
	background: var(--trgg-rose);
	transition: width var(--trgg-dur-2) var(--trgg-ease);
	width: 0%;
}

.trgg-tool__step { display: none; }
.trgg-tool__step.is-active { display: block; }

.trgg-tool__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--trgg-s-3);
	margin-top: var(--trgg-s-5);
}

.trgg-tool__result { display: none; }
.trgg-tool__result.is-active { display: block; }

.trgg-choice {
	display: block;
	border: 1px solid var(--trgg-border);
	padding: var(--trgg-s-3) var(--trgg-s-4);
	border-radius: var(--trgg-radius-md);
	margin-bottom: var(--trgg-s-2);
	cursor: pointer;
	transition: border-color var(--trgg-dur-1) var(--trgg-ease), background var(--trgg-dur-1) var(--trgg-ease);
}
.trgg-choice:hover { border-color: var(--trgg-rose); background: rgba(199, 123, 123, 0.05); }
.trgg-choice input { margin-right: var(--trgg-s-2); }
.trgg-choice.is-selected { border-color: var(--trgg-burgundy); background: rgba(124, 34, 56, 0.05); }

.trgg-palette-wheel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--trgg-s-3);
	margin: var(--trgg-s-5) 0;
}
.trgg-palette-swatch {
	aspect-ratio: 1 / 1;
	border-radius: var(--trgg-radius-md);
	box-shadow: var(--trgg-shadow-1);
	display: flex;
	align-items: flex-end;
	padding: var(--trgg-s-2);
	color: var(--trgg-bone);
	font-family: var(--trgg-font-mono);
	font-size: var(--trgg-fs-xs);
}

.trgg-prioritizer-list { list-style: none; padding: 0; margin: 0; }
.trgg-prioritizer-item {
	display: flex; align-items: center; gap: var(--trgg-s-3);
	background: var(--trgg-bone);
	padding: var(--trgg-s-3); border-radius: var(--trgg-radius-md);
	margin-bottom: var(--trgg-s-2);
	cursor: grab;
}
.trgg-prioritizer-item.is-dragging { opacity: 0.6; cursor: grabbing; }

.trgg-tracker-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: var(--trgg-s-3);
	padding: var(--trgg-s-3) 0;
	border-bottom: 1px solid var(--trgg-border);
}

.trgg-spec-card {
	background: var(--trgg-plum);
	color: var(--trgg-bone);
	border-radius: var(--trgg-radius-md);
	padding: var(--trgg-s-4);
	font-family: var(--trgg-font-mono);
	font-size: var(--trgg-fs-sm);
}
.trgg-spec-card__head { font-family: var(--trgg-font-display); font-size: var(--trgg-fs-lg); color: var(--trgg-bone); margin: 0 0 var(--trgg-s-2); }

.trgg-pull-quote {
	font-family: var(--trgg-font-display);
	font-style: italic;
	font-size: var(--trgg-fs-xl);
	border-left: 3px solid var(--trgg-rose);
	padding-left: var(--trgg-s-4);
	margin: var(--trgg-s-5) 0;
	color: var(--trgg-ink);
}