/* QAIL 2026 — Components.
 * All component classes are token-driven. No hardcoded colors.
 * Naming: BEM-ish — qail-{component}__{element}--{modifier}.
 */

/* ================================================================
 * BUTTON — primary, secondary, ghost
 * ================================================================ */
.qail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.625rem var(--space-5);
	border-radius: var(--radius-pill);
	font-family: var(--ff-sans);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body);
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--dur-state) var(--ease-state),
		border-color     var(--dur-state) var(--ease-state),
		color            var(--dur-state) var(--ease-state),
		transform        var(--dur-state) var(--ease-state),
		box-shadow       var(--dur-state) var(--ease-state);
}
.qail-btn:hover { transform: translateY(-1px); text-decoration: none; }
.qail-btn:active { transform: translateY(0); }
.qail-btn:disabled,
.qail-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.qail-btn--primary {
	background: var(--text);
	color: var(--bg);
	border-color: var(--text);
}
.qail-btn--primary:hover { box-shadow: var(--shadow-md); }

.qail-btn--secondary {
	background: transparent;
	color: var(--text);
	border-color: var(--border-strong);
}
.qail-btn--secondary:hover {
	border-color: var(--text);
	background: var(--accent-soft);
}

.qail-btn--ghost {
	background: transparent;
	color: var(--text-muted);
	padding-inline: var(--space-3);
}
.qail-btn--ghost:hover { color: var(--text); }

.qail-btn--lg {
	padding: 0.875rem var(--space-6);
	font-size: var(--fs-body-lg);
}

/* ================================================================
 * PILL-CHIP — small badge / category marker
 * ================================================================ */
.qail-pill-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.375rem 0.875rem;
	border-radius: var(--radius-pill);
	background: var(--bg-elevated);
	color: var(--text-muted);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	border: 1px solid var(--border);
}
.qail-pill-chip--mono {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: 0.02em;
}
.qail-pill-chip--accent {
	background: var(--accent-soft);
	color: var(--accent);
	border-color: transparent;
}

/* ================================================================
 * INPUT — text input
 * ================================================================ */
.qail-input {
	display: block;
	width: 100%;
	padding: 0.75rem var(--space-4);
	border-radius: var(--radius-md);
	background: var(--bg-elevated);
	color: var(--text);
	border: 1px solid var(--border-strong);
	font-family: var(--ff-sans);
	font-size: var(--fs-body);
	line-height: 1.4;
	transition:
		border-color     var(--dur-state) var(--ease-state),
		background-color var(--dur-state) var(--ease-state);
}
.qail-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.qail-input::placeholder { color: var(--text-subtle); }
.qail-input--lg {
	padding: 1rem var(--space-5);
	font-size: var(--fs-body-lg);
}

.qail-input-group {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
	width: 100%;
}
.qail-input-group .qail-input { flex: 1 1 auto; }

/* ================================================================
 * TOGGLE — Human/Agent pill toggle
 * ================================================================ */
.qail-toggle {
	display: inline-flex;
	align-items: center;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0.25rem;
	gap: 0.25rem;
}
.qail-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.5rem var(--space-5);
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	font-family: var(--ff-sans);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body);
	line-height: 1;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition:
		background-color var(--dur-toggle) var(--ease-state),
		color            var(--dur-toggle) var(--ease-state);
}
.qail-toggle__btn[aria-pressed="true"] {
	background: var(--text);
	color: var(--bg);
}
.qail-toggle__btn:not([aria-pressed="true"]):hover { color: var(--text); }

/* ================================================================
 * CARD — generic content surface
 * ================================================================ */
.qail-card {
	background: var(--surface-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: var(--space-6);
	transition:
		background-color var(--dur-theme) var(--ease-state),
		border-color     var(--dur-theme) var(--ease-state),
		box-shadow       var(--dur-state) var(--ease-state);
}
.qail-card--elevated { box-shadow: var(--shadow-md); }
.qail-card--interactive { cursor: pointer; }
.qail-card--interactive:hover {
	box-shadow: var(--shadow-elevated);
	border-color: var(--border-strong);
}
.qail-card__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--text);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-3);
}
.qail-card__body {
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
}
.qail-card__eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-3);
}

/* ================================================================
 * STAT — large display number with caption
 * ================================================================ */
.qail-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.qail-stat__number {
	font-size: var(--fs-display);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--text);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.qail-stat__caption {
	font-size: var(--fs-body);
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
}

/* ================================================================
 * TABS — keyboard-accessible tab strip
 * ================================================================ */
.qail-tabs { display: flex; flex-direction: column; gap: var(--space-6); }
.qail-tabs__strip {
	display: inline-flex;
	align-self: flex-start;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0.25rem;
	gap: 0.25rem;
	flex-wrap: wrap;
}
.qail-tabs__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem var(--space-5);
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	font-family: var(--ff-sans);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body);
	line-height: 1;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition:
		color            var(--dur-state) var(--ease-state),
		background-color var(--dur-state) var(--ease-state);
}
.qail-tabs__btn[aria-selected="true"] {
	background: var(--text);
	color: var(--bg);
}
.qail-tabs__btn:not([aria-selected="true"]):hover { color: var(--text); }
.qail-tabs__panel { display: none; }
.qail-tabs__panel[data-active="true"] {
	display: block;
	animation: qail-fade-in var(--dur-element) var(--ease-entrance);
}
@keyframes qail-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ================================================================
 * ACCORDION — vertical expand/collapse list
 * ================================================================ */
.qail-accordion {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
}
.qail-accordion__item { border-bottom: 1px solid var(--border); }
.qail-accordion__btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-5) 0;
	color: var(--text);
	font-family: var(--ff-sans);
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	gap: var(--space-4);
}
.qail-accordion__icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	color: var(--text-muted);
	transition: transform var(--dur-state) var(--ease-state);
}
.qail-accordion__btn[aria-expanded="true"] .qail-accordion__icon {
	transform: rotate(45deg);
	color: var(--accent);
}
.qail-accordion__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--dur-element) var(--ease-state);
}
.qail-accordion__panel-inner {
	padding-bottom: var(--space-5);
	color: var(--text-muted);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-relaxed);
	max-width: 60ch;
}

/* ================================================================
 * SCORE-GAUGE — radial score indicator
 * ================================================================ */
.qail-score-gauge {
	--qail-gauge-size: 200px;
	--qail-gauge-stroke: 12px;
	--qail-gauge-circumference: 553;
	width: var(--qail-gauge-size);
	height: var(--qail-gauge-size);
	position: relative;
	flex-shrink: 0;
}
.qail-score-gauge__svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.qail-score-gauge__track {
	fill: none;
	stroke: var(--border);
	stroke-width: var(--qail-gauge-stroke);
}
.qail-score-gauge__fill {
	fill: none;
	stroke: var(--accent);
	stroke-width: var(--qail-gauge-stroke);
	stroke-linecap: round;
	stroke-dasharray: var(--qail-gauge-circumference);
	stroke-dashoffset: var(--qail-gauge-circumference);
	transition: stroke-dashoffset var(--dur-gauge) var(--ease-gauge);
}
.qail-score-gauge--excellent .qail-score-gauge__fill { stroke: var(--success); }
.qail-score-gauge--good      .qail-score-gauge__fill { stroke: var(--accent); }
.qail-score-gauge--average   .qail-score-gauge__fill { stroke: var(--warning); }
.qail-score-gauge--poor      .qail-score-gauge__fill { stroke: var(--danger); }
.qail-score-gauge__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
}
.qail-score-gauge__value {
	font-size: 3rem;
	font-weight: var(--fw-bold);
	color: var(--text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.qail-score-gauge__band {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.qail-score-bar {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-3);
	align-items: center;
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--border);
}
.qail-score-bar__label {
	color: var(--text);
	font-weight: var(--fw-medium);
}
.qail-score-bar__value {
	color: var(--text);
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	font-variant-numeric: tabular-nums;
}
.qail-score-bar__track {
	grid-column: 1 / -1;
	height: 6px;
	background: var(--bg-sunken);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.qail-score-bar__fill {
	height: 100%;
	width: 0;
	background: var(--accent);
	border-radius: inherit;
	transition: width var(--dur-gauge) var(--ease-gauge);
}

/* ================================================================
 * CODE-CARD — monospace JSON / structured data display
 * ================================================================ */
.qail-code-card {
	background: var(--code-bg);
	color: var(--code-text);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	line-height: var(--lh-relaxed);
	overflow-x: auto;
	white-space: pre;
	text-align: left;
	border: 1px solid var(--border);
	tab-size: 2;
	margin: 0;
}
.qail-code-card__key    { color: #88C0FF; }
.qail-code-card__string { color: #A8E6C4; }
.qail-code-card__num    { color: #FFC78F; }
.qail-code-card__bool   { color: #FF9AC1; }
.qail-code-card__null   { color: #B5B5BD; }

/* ================================================================
 * Component Lab utilities
 * Internal-only layout helpers for the /component-lab/ preview page.
 * Safe to delete with the Lab template after launch.
 * ================================================================ */
.qail-lab__header {
	border-bottom: 1px solid var(--border);
	padding-block: var(--space-7) var(--space-6);
}
.qail-lab__eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-3);
}
.qail-lab__title {
	font-size: var(--fs-display);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.02em;
	line-height: var(--lh-tight);
	margin-bottom: var(--space-3);
}
.qail-lab__subtitle {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
	margin-bottom: var(--space-6);
	max-width: 60ch;
}
.qail-lab__toggle-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.qail-lab__group {
	border-bottom: 1px solid var(--border);
	padding-block: var(--space-7);
}
.qail-lab__group-title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-6);
}
.qail-lab__row {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	align-items: center;
}
.qail-lab__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.qail-lab__grid {
	display: grid;
	gap: var(--space-5);
}
.qail-lab__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
	.qail-lab__grid--3 { grid-template-columns: 1fr; }
}

.qail-lab__error {
	color: var(--danger);
	font-size: var(--fs-small);
	margin-top: var(--space-3);
	min-height: 1.25em;
}
.qail-lab__error[data-shown="false"] { visibility: hidden; }

.qail-lab__score-result {
	margin-top: var(--space-6);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-7);
	align-items: start;
	opacity: 0;
	transition: opacity var(--dur-element) var(--ease-state);
}
.qail-lab__score-result[data-state="shown"] { opacity: 1; }
.qail-lab__bars { display: grid; gap: var(--space-1); }
@media (max-width: 768px) {
	.qail-lab__score-result { grid-template-columns: 1fr; }
}

/* Loading state on submit button */
.qail-btn[data-loading="true"] {
	pointer-events: none;
	opacity: 0.7;
}
.qail-btn[data-loading="true"]::after {
	content: '';
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: qail-spin 0.6s linear infinite;
	margin-left: 0.5rem;
}
@keyframes qail-spin {
	to { transform: rotate(360deg); }
}