/**
 * Event101 - unified QERA classification band chips (system-wide).
 * Use only via Event101_Qera_Band_Presenter; do not duplicate colours in module CSS.
 */

.e101-qera-band {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 4px;
	line-height: 1.25;
	letter-spacing: 0.02em;
	max-width: 100%;
	box-sizing: border-box;
}

.e101-qera-band__text {
	word-break: break-word;
}

.e101-qera-band--compact {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 3px;
}

.e101-qera-band--with-score {
	font-variant-numeric: tabular-nums;
}

.e101-qera-band-distribution {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.e101-qera-band-distribution__sep {
	display: inline-block;
	width: 4px;
}

/* Layout-only row for label + band chip + meta (workspace, export). No colours. */
.e101-qera-classification-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 0.75em;
	margin: 0 0 0.35em 0;
}

/* Canonical band colours (match snapshot vocabulary: Low … Critical) */
.e101-qera-band--low {
	background: #ecfdf5;
	color: #166534;
	border: 1px solid rgba(22, 101, 52, 0.18);
}

.e101-qera-band--moderate {
	background: #f1f5f9;
	color: #152a45;
	border: 1px solid rgba(30, 64, 175, 0.2);
}

.e101-qera-band--high {
	background: #fef9c3;
	color: #854d0e;
	border: 1px solid rgba(133, 77, 14, 0.22);
}

.e101-qera-band--very-high {
	background: #ffedd5;
	color: #9a3412;
	border: 1px solid rgba(154, 52, 18, 0.22);
}

.e101-qera-band--critical {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid rgba(153, 27, 27, 0.25);
}

.e101-qera-band--unknown {
	background: #f3f4f6;
	color: #4b5563;
	border: 1px solid rgba(75, 85, 99, 0.2);
}

/* Optional: tight row on hub cards */
.e101-hub-events__card-qera {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.e101-event-details__qera {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--e101-surface-elevated, #f8fafc);
	border: 1px solid var(--e101-border, rgba(15, 23, 42, 0.08));
}

.e101-event-details__qera-lede {
	font-size: 12px;
	color: var(--e101-muted, #64748b);
	margin: 0 0 10px;
	line-height: 1.45;
}

.e101-event-details__qera-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.e101-event-details__qera-meta {
	font-size: 12px;
	color: var(--e101-tertiary, #64748b);
}

.e101-event-details__qera-drivers {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--e101-tertiary, #64748b);
}

.e101-event-details__qera-more {
	margin: 8px 0 0;
	font-size: 12px;
}

/* QERA input-anchor reliability (organiser guidance; separate from band colour system). */
.e101-event-details__qera-anchor-alert {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 6px;
	border: 1px solid var(--e101-border, rgba(15, 23, 42, 0.08));
	border-left-width: 3px;
	border-left-color: var(--e101-amber-border, #ca8a04);
	background: var(--e101-amber-surface, rgba(202, 138, 4, 0.06));
}

.e101-event-details__qera-anchor-alert-title,
.e101-event-details__qera-anchor-alert-detail {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--e101-tertiary, #334155);
}

.e101-event-setup__stage-callout {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--e101-border, rgba(15, 23, 42, 0.08));
}

.e101-dash__header-qera {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	vertical-align: middle;
}