/* PQ Form — Embark Design System */
/* Uses tokens from /design-tokens/foundation.css + embark.css */

/* ================================================================
   Base & Layout Utilities
   ================================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: var(--bg-primary);
	color: var(--text-primary);
	font-family: var(--font-display);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

.page-container {
	max-width: 672px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-6) var(--space-12);
}

.page-container--wide {
	max-width: 1152px;
}

.hidden { display: none; }

/* ================================================================
   Typography
   ================================================================ */

.heading-xl {
	font-size: 1.875rem;
	font-weight: var(--weight-medium);
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.heading-lg {
	font-size: 1.5rem;
	font-weight: var(--weight-medium);
	letter-spacing: -0.025em;
	line-height: 1.25;
}

.heading-md {
	font-size: 1.125rem;
	font-weight: var(--weight-medium);
	line-height: 1.3;
}

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }

.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-body { color: var(--text-body); }
.text-accent { color: var(--accent-primary); }
.text-center { text-align: center; }
.tracking-tight { letter-spacing: -0.025em; }

/* ================================================================
   Layout helpers
   ================================================================ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }

.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.pt-4 { padding-top: var(--space-4); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.p-0 { padding: 0; }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-8-wb { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.space-y-4 > * + * { margin-top: var(--space-4); }

.border-t-subtle { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.overflow-hidden { overflow: hidden; }

/* ================================================================
   Glass Card
   ================================================================ */

.glass-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	padding: var(--space-6);
	backdrop-filter: var(--glass-blur);
}

/* ================================================================
   Step Indicator
   ================================================================ */

.step-dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: var(--weight-medium);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--text-subtle);
	transition: all var(--duration-fast) var(--ease-out);
}

.step-dot.active {
	background: var(--accent-primary);
	color: var(--bg-primary);
	border-color: var(--accent-primary);
}

.step-dot.completed {
	background: var(--glass-accent-bg);
	color: var(--accent-primary);
	border-color: var(--glass-accent-border);
}

.step-line {
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
}

/* ================================================================
   Form Fields
   ================================================================ */

.field-label {
	display: block;
	font-size: 12px;
	font-weight: var(--weight-regular);
	color: var(--text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.field-input {
	width: 100%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--glass-radius-sm);
	padding: 10px 14px;
	color: var(--text-primary);
	font-size: 14px;
	font-family: var(--font-display);
	transition: border-color var(--duration-fast) var(--ease-out);
}

.field-input:focus {
	outline: none;
	border-color: rgba(211, 238, 88, 0.5);
}

.field-input::placeholder {
	color: rgba(255, 255, 255, 0.2);
}

/* Select dropdown */
select.field-input {
	appearance: none;
	cursor: pointer;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

select.field-input option {
	background: var(--bg-input);
	color: #f0f0f0;
	padding: 8px 12px;
}

select.field-input option:checked {
	background: rgba(211, 238, 88, 0.12);
	color: #f0f0f0;
}

select.field-input::-ms-expand {
	display: none;
}

/* Search input (workbench & PQ) */
.search-input {
	flex: 1;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	padding: 10px var(--space-4);
	font-size: 0.875rem;
	color: var(--text-primary);
	font-family: var(--font-display);
	transition: border-color var(--duration-fast) var(--ease-out);
}

.search-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.search-input:focus {
	outline: none;
	border-color: rgba(211, 238, 88, 0.5);
}

/* ABR entity search input */
.entity-search-input {
	width: 100%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	color: var(--text-primary);
	font-family: var(--font-display);
	transition: border-color var(--duration-fast) var(--ease-out);
}

.entity-search-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.entity-search-input:focus {
	outline: none;
	border-color: rgba(211, 238, 88, 0.5);
}

/* Helper text */
.field-hint {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.35);
	margin-bottom: var(--space-4);
	line-height: 1.5;
}

/* Inline validation errors */
.field-error {
	font-size: 12px;
	color: var(--chart-pink);
	margin-top: var(--space-1);
	line-height: 1.4;
}

.field-input.field-invalid {
	border-color: rgba(255, 89, 150, 0.5);
}

/* ================================================================
   Tooltips
   ================================================================ */

.tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.4);
	font-size: 10px;
	font-weight: 600;
	cursor: help;
	position: relative;
	vertical-align: middle;
	margin-left: 6px;
}

.tooltip-icon:hover {
	background: var(--glass-accent-bg);
	color: var(--accent-primary);
}

.tooltip-content {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: 240px;
	background: var(--bg-tertiary);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--glass-radius-sm);
	padding: 10px 12px;
	font-size: 12px;
	font-weight: var(--weight-regular);
	color: var(--text-body);
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	z-index: 20;
	pointer-events: none;
}

.tooltip-icon:hover .tooltip-content {
	display: block;
}

/* ================================================================
   Buttons
   ================================================================ */

.btn-primary {
	background: var(--accent-primary);
	color: var(--bg-primary);
	padding: 10px var(--space-6);
	border-radius: var(--glass-radius-sm);
	font-size: 14px;
	font-weight: var(--weight-medium);
	font-family: var(--font-display);
	transition: all var(--duration-fast) var(--ease-out);
	cursor: pointer;
	border: none;
}

.btn-primary:hover {
	background: #e0f47a;
}

.btn-primary:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.btn-secondary {
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	padding: 10px var(--space-6);
	border-radius: var(--glass-radius-sm);
	font-size: 14px;
	font-weight: var(--weight-regular);
	font-family: var(--font-display);
	border: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: all var(--duration-fast) var(--ease-out);
}

.btn-secondary:hover {
	border-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.8);
}

/* ================================================================
   Links
   ================================================================ */

.link-accent {
	color: var(--accent-primary);
	text-decoration: none;
	font-size: 0.875rem;
}

.link-accent:hover { text-decoration: underline; }

.link-muted {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color var(--duration-fast) var(--ease-out);
}

.link-muted:hover { color: var(--text-primary); }

/* ================================================================
   Selected Entity Card
   ================================================================ */

.entity-selected {
	margin-top: var(--space-4);
	padding: var(--space-4);
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--radius-md);
	border: 1px solid var(--glass-accent-border);
}

.entity-selected__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-3);
}

.entity-selected__label {
	color: var(--accent-primary);
	font-size: 0.75rem;
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.entity-selected__clear {
	color: rgba(255, 255, 255, 0.3);
	font-size: 0.75rem;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-display);
}

.entity-selected__clear:hover { color: var(--text-primary); }

.entity-selected__name {
	font-size: 1.125rem;
	font-weight: var(--weight-medium);
}

.entity-selected__meta {
	display: flex;
	gap: var(--space-4);
	margin-top: var(--space-2);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
}

.entity-selected__meta-value {
	color: rgba(255, 255, 255, 0.8);
}

/* ================================================================
   ABR Results Dropdown
   ================================================================ */

#abr-results {
	background: var(--bg-tertiary);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	overflow: hidden;
	max-height: 320px;
	overflow-y: auto;
}

.abr-result-item {
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: background var(--duration-fast) var(--ease-out);
}

.abr-result-item:hover {
	background: var(--glass-accent-bg);
}

.abr-result-item:last-child {
	border-bottom: none;
}

/* ================================================================
   Decision Badges
   ================================================================ */

.badge-pass {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(211, 238, 88, 0.15);
	color: var(--accent-primary);
	padding: 6px var(--space-4);
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: var(--weight-medium);
}

.badge-fail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 89, 150, 0.15);
	color: var(--chart-pink);
	padding: 6px var(--space-4);
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: var(--weight-medium);
}

.badge-manual {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 159, 28, 0.15);
	color: var(--chart-orange);
	padding: 6px var(--space-4);
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: var(--weight-medium);
}

/* ================================================================
   Spinner
   ================================================================ */

.spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 2px solid rgba(211, 238, 88, 0.3);
	border-top-color: var(--accent-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ================================================================
   Animations
   ================================================================ */

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.step-panel {
	animation: fadeIn var(--duration-slide) var(--ease-out);
}

/* ================================================================
   Currency prefix
   ================================================================ */

.currency-prefix {
	position: absolute;
	left: var(--space-3);
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.3);
	pointer-events: none;
}

.field-input--currency {
	padding-left: 28px;
}