/* Instrument finder (/instrument) — page-scoped styling, redesigned 2026-07-14.
   Linked from templates/instrument/search.html via cssLinks=~{::link}.
   (Must be a linked stylesheet, NOT an inline <head> <style>: the layout
   dialect only pulls title/cssLinks/jsLinks fragments into the decorated
   <head>, so a bare <style> there is dropped.)

   Chips are the shared .sd-seg from modernize.css; this file styles the
   hero search line, the filter row and the CE/PE tags. Light mode = hex
   fallbacks, dark = theme tokens. */

/* ---- hero search line ---- */
.inst-hero {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 16px;
	border: 1.5px solid var(--border-strong, #d1d5db);
	border-radius: 8px;
	background: var(--bg-card, #ffffff);
}
.inst-hero:focus-within {
	border-color: var(--accent-primary, #1f56e6);
}
.inst-hero .feather {
	font-size: 16px;
	color: var(--text-muted, #94a3b8);
}
.inst-hero input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
	font-family: var(--tbl-f-mono, Consolas, "Courier New", monospace);
	font-size: 15px;
	color: var(--text-primary, #37474f);
	text-transform: uppercase;
}
.inst-hero__hint {
	font-family: var(--tbl-f-mono, Consolas, "Courier New", monospace);
	font-size: 10px;
	color: var(--text-muted, #94a3b8);
	border: 1px solid var(--border-subtle, #e4e9f0);
	border-radius: 4px;
	padding: 1px 6px;
	white-space: nowrap;
}

/* ---- filter chips row ---- */
.inst-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 13px;
}
.inst-fgroup {
	display: flex;
	align-items: center;
	gap: 8px;
}
.inst-flabel {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted, #94a3b8);
	white-space: nowrap;
}
/* Option type + strike exist only when OPTION is selected (progressive
   disclosure — JS toggles .is-opt on the container). */
.inst-opt {
	display: none;
}
.inst-filters.is-opt .inst-opt {
	display: flex;
}
.inst-strike {
	width: 110px;
	padding: 4px 10px;
	border: 1px solid var(--border-strong, #d1d5db);
	border-radius: 6px;
	background: var(--bg-card, #ffffff);
	color: var(--text-primary, #37474f);
	font-family: var(--tbl-f-mono, Consolas, "Courier New", monospace);
	font-size: 12px;
}
.inst-strike:focus {
	outline: none;
	border-color: var(--accent-primary, #1f56e6);
}
.inst-segment {
	padding: 4px 8px;
	border: 1px solid var(--border-strong, #d1d5db);
	border-radius: 6px;
	background: var(--bg-card, #ffffff);
	color: var(--text-secondary, #64748b);
	font-size: 11.5px;
	font-weight: 700;
}
.inst-segment:focus {
	outline: none;
	border-color: var(--accent-primary, #1f56e6);
}

/* ---- result count / errors (inline, replaces the old Swal popups) ---- */
.inst-count {
	margin: 13px 0 0;
	font-size: 11.5px;
	color: var(--text-muted, #94a3b8);
	font-variant-numeric: tabular-nums;
	min-height: 17px;
}
.inst-count--err {
	color: #dc2626;
}
[data-theme="dark"] .inst-count--err {
	color: var(--accent-danger, #f85149);
}

/* ---- CE / PE tags in the results ---- */
.inst-tag {
	display: inline-block;
	border-radius: 4px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
}
.inst-tag--ce {
	background: #ecfdf5;
	color: #15803d;
}
.inst-tag--pe {
	background: #fdeeee;
	color: #b91c1c;
}
[data-theme="dark"] .inst-tag--ce {
	background: rgba(63, 185, 80, .14);
	background: color-mix(in srgb, var(--accent-success) 14%, transparent);
	color: var(--accent-success, #3fb950);
}
[data-theme="dark"] .inst-tag--pe {
	background: rgba(248, 81, 73, .14);
	background: color-mix(in srgb, var(--accent-danger) 14%, transparent);
	color: var(--accent-danger, #f85149);
}
