/* hx-field.css — Field SSOT
 * Covers: field, text-field, search-field
 * Level 2 variants share tokens from this file.
 */
 * hx-fields.css — Fields SSOT
 * Field, SearchField, TextField
 */
.hx-field {
  display: flex;
  flex-direction: column;
  gap: var(--hx-space-2);
}
.hx-field__input {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border: 0;
  border-radius: var(--hx-radius);
  padding: var(--hx-space-2) var(--hx-space-3);
}
.hx-field__input:focus {
  outline: none;
}


/* Migrated from hx-primitives.css — Field family (3.04.85) */
/* ---------- Field family ---------- */
.hx-searchfield, .hx-globalsearch__control,
.hx-combobox__input {
	background: var(--hx-surface-subtle);
	color: var(--hx-fg);
	border-color: transparent;
	min-height: var(--hx-control-md);
	font-size: 16px;
}
.hx-combobox__input {
	border: 1px solid var(--hx-line);
	border-radius: 8px;
	height: var(--hx-control-md);
}
.hx-searchfield, .hx-globalsearch__control { border-radius: var(--hx-radius-field); }
.hx-searchfield, .hx-globalsearch--lg .hx-searchfield, .hx-globalsearch__control,
.hx-searchfield, .hx-globalsearch--lg .hx-searchfield, .hx-globalsearch__input {
	min-height: var(--hx-control-lg);
	height: var(--hx-control-lg);
}
.hx-searchfield, .hx-globalsearch__input,
.hx-searchfield, .hx-globalsearch .helix-search-input {
	color: var(--hx-fg);
	background: transparent;
}
.hx-searchfield, .hx-globalsearch__control:focus-within,
.hx-combobox__input:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--hx-focus);
	border-color: transparent;
}
.hx-combobox__label,
.hx-searchfield, .hx-globalsearch__label { color: var(--hx-fg); }
.hx-combobox__list {
	background: var(--hx-surface);
	color: var(--hx-fg);
	border-color: var(--hx-line);
}
.hx-combobox__helper,
.hx-searchfield, .hx-globalsearch__helper { color: var(--hx-fg-muted); }
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__control {
	border: 1px solid var(--hx-danger);
}
.hx-combobox--error .hx-combobox__input {
	border-color: var(--hx-danger);
}
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__helper,
.hx-combobox--error .hx-combobox__helper { color: var(--hx-danger); }
.hx-searchfield, .hx-globalsearch__submit {
	background: var(--hx-primary);
	color: var(--hx-on-primary);
}


/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-combobox__input {
	background: var(--hx-surface-subtle);
	color: var(--hx-fg);
	border-color: transparent;
	min-height: var(--hx-control-md);
	font-size: 16px;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-combobox__input {
	border: 1px solid var(--hx-line);
	border-radius: 8px;
	height: var(--hx-control-md);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch__control { border-radius: var(--hx-radius-field); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch--lg .hx-searchfield, .hx-globalsearch__input {
	min-height: var(--hx-control-lg);
	height: var(--hx-control-lg);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch .helix-search-input {
	color: var(--hx-fg);
	background: transparent;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-combobox__input:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--hx-focus);
	border-color: transparent;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch__label { color: var(--hx-fg); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-combobox__list {
	background: var(--hx-surface);
	color: var(--hx-fg);
	border-color: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch__helper { color: var(--hx-fg-muted); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-combobox--error .hx-combobox__input {
	border-color: var(--hx-danger);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-combobox--error .hx-combobox__helper { color: var(--hx-danger); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch__submit {
	background: var(--hx-primary);
	color: var(--hx-on-primary);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch .helix-custom-search-form:focus-within .helix-search-input-container {
	outline: none;
	border: 0;
	box-shadow: none;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
  .hx-field__control input {
    min-height: var(--hx-control-height-compact);
    font-size: 14px;
  }

/* Auto-migrated from hx-primitives.css (3.04.90) */
  .hx-field {
    --hx-field-gap: var(--hx-space-2);
  }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-field {
  color: var(--hx-fg);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-field__control input {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-combobox {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
  .hx-combobox {
    min-height: var(--hx-control-height-compact);
  }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-hx-vp="mobile"] .hx-field__control input {
  min-height: var(--hx-control-height-compact);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch .hx-status {
  display: inline-flex;
  align-items: center;
  margin-inline-end: var(--hx-space-2);
  color: var(--hx-fg-muted);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-searchfield, .hx-globalsearch--error .hx-status {
  color: var(--hx-danger);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-preview-card__stage[data-theme="dark"] .hx-combobox {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-preview-card__stage[data-theme="light"] .hx-field__control input {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-preview-card__stage[data-theme="light"] .hx-combobox {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}


/* 3.04.94 — 4-variant readiness (light/dark × desktop/mobile)
   Controlled by data-theme + data-hx-vp on <html>.
   All styles token-driven. Composition with other primitives encouraged. */
html[data-theme="light"][data-hx-vp="desktop"],
html[data-theme="light"][data-hx-vp="mobile"],
html[data-theme="dark"][data-hx-vp="desktop"],
html[data-theme="dark"][data-hx-vp="mobile"] {
  /* tokens flip automatically */
}

/* Shared field tokens */
.hx-field,
.hx-searchfield, .hx-globalsearch,
.hx-textfield {
  --field-radius: var(--radius-element);
  --field-border: var(--hx-line);
  --field-bg: var(--hx-surface);
  --field-fg: var(--hx-fg);
}

/* ========== SEARCH-FIELD (aggregated from primitives/search-field/search-field.css) ========== */
/* Level 2 variant of Field. Classes: .hx-searchfield, .hx-globalsearch, .hx-searchfield, .hx-globalsearch__* */
.hx-searchfield, .hx-globalsearch {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacing-2);
	width: 100%;
	max-width: 480px;
	margin: 0;
	text-align: left;
	color: var(--hx-fg);
}
.hx-searchfield, .hx-globalsearch__label {
	font-size: var(--text-label-size);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: inherit;
}
.hx-searchfield, .hx-globalsearch__control {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	min-height: var(--density-control-height);
	background: transparent;
	border: 1px solid var(--hx-line);
	border-radius: var(--radius-full);
	padding: 0 var(--spacing-2) 0 0;
	box-sizing: border-box;
}
.hx-searchfield, .hx-globalsearch--lg .hx-searchfield, .hx-globalsearch__control {
	min-height: var(--density-control-height-lg);
	border-radius: var(--radius-full);
	padding-right: var(--spacing-3);
}
.hx-searchfield, .hx-globalsearch__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	color: var(--hx-fg-muted);
	pointer-events: none;
}
.hx-searchfield, .hx-globalsearch__icon svg { fill: none; stroke: currentColor; }
.hx-searchfield, .hx-globalsearch__input,
.hx-searchfield, .hx-globalsearch .helix-search-input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: var(--density-control-height);
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 0 var(--spacing-2) 0 0;
	font: inherit;
	font-size: var(--text-body-size);
	line-height: 1.3;
	color: inherit;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.hx-searchfield, .hx-globalsearch--lg .hx-searchfield, .hx-globalsearch__input { height: var(--density-control-height-lg); font-size: 18px; }
.hx-searchfield, .hx-globalsearch--lg .hx-searchfield, .hx-globalsearch__icon svg { width: 22px; height: 22px; }
.hx-searchfield, .hx-globalsearch__input::-webkit-search-cancel-button,
.hx-searchfield, .hx-globalsearch__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.hx-searchfield, .hx-globalsearch__input::placeholder { color: var(--hx-fg-muted); }
.hx-searchfield, .hx-globalsearch__control:focus-within {
	outline: none;
	box-shadow: 0 0 0 2px var(--hx-fg);
}
.hx-searchfield, .hx-globalsearch__clear,
.hx-searchfield, .hx-globalsearch__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.hx-searchfield, .hx-globalsearch__clear[hidden] { display: none; }
.hx-searchfield, .hx-globalsearch__submit {
	background: var(--hx-fg);
	color: var(--hx-on-primary);
}
.hx-searchfield, .hx-globalsearch__helper,
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__helper {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--hx-fg-muted);
}
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__control { border-color: var(--hx-danger); }
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__helper { color: var(--hx-danger); }
.hx-searchfield, .hx-globalsearch.is-disabled,
.hx-searchfield, .hx-globalsearch:has(.hx-searchfield, .hx-globalsearch__input:disabled) { opacity: 0.6; pointer-events: none; }
.hx-searchfield, .hx-globalsearch-stack {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	width: min(480px, 100%);
}
/* Dark */
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch { color: var(--hx-fg); }
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch__control {
	background: transparent;
	border: 1px solid var(--hx-line);
}
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch__submit {
	background: var(--hx-on-primary);
	color: var(--hx-fg);
}



/* Outer SearchField: no border, no fill. Border lives only on __control */
.hx-searchfield, .hx-globalsearch,
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch,
.hx-app .hx-searchfield, .hx-globalsearch {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.hx-searchfield, .hx-globalsearch svg,
.hx-searchfield, .hx-globalsearch__icon svg,
.hx-searchfield, .hx-globalsearch__icon svg path {
  fill: none;
  stroke: currentColor;
}
/* Control keeps its border */
.hx-searchfield, .hx-globalsearch__control,
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch__control {
  border: 1px solid var(--hx-line);
}
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__control {
  border-color: var(--hx-danger);
}


/* ========== UNIFIED FIELD SHELL (Astryx-inspired) ========== */
/* Field is the shell: label + status + control slot.
   SearchField composes the same shell. Shared anatomy, shared tokens. */

.hx-field,
.hx-searchfield, .hx-globalsearch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
  text-align: start;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.hx-field__label,
.hx-searchfield, .hx-globalsearch__label {
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--hx-fg);
}
.hx-field__helper,
.hx-searchfield, .hx-globalsearch__helper {
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: 1.4;
  color: var(--hx-fg-muted);
}
/* Status message uses banner tokens — do not override with muted */
.hx-field__status.hx-banner {
  color: inherit;
}
/* Unified validation — same tokens as banner, across Field and SearchField */
.hx-field--error .hx-field__helper,
.hx-field--error .hx-field__status,
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__helper,
.hx-field--error .hx-banner,
.hx-searchfield, .hx-globalsearch--error .hx-banner {
  color: var(--hx-danger);
}
.hx-field--warning .hx-field__helper,
.hx-field--warning .hx-field__status,
.hx-searchfield, .hx-globalsearch--warning .hx-searchfield, .hx-globalsearch__helper,
.hx-field--warning .hx-banner,
.hx-searchfield, .hx-globalsearch--warning .hx-banner {
  color: var(--hx-warning);
}
.hx-field--success .hx-field__helper,
.hx-field--success .hx-field__status,
.hx-searchfield, .hx-globalsearch--success .hx-searchfield, .hx-globalsearch__helper,
.hx-field--success .hx-banner,
.hx-searchfield, .hx-globalsearch--success .hx-banner {
  color: var(--hx-success);
}
.hx-field--error .hx-field__input,
.hx-field--error .hx-field__control,
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__control {
  border-color: var(--hx-danger);
}
.hx-field--warning .hx-field__input,
.hx-field--warning .hx-field__control,
.hx-searchfield, .hx-globalsearch--warning .hx-searchfield, .hx-globalsearch__control {
  border-color: var(--hx-warning);
}
.hx-field--success .hx-field__input,
.hx-field--success .hx-field__control,
.hx-searchfield, .hx-globalsearch--success .hx-searchfield, .hx-globalsearch__control {
  border-color: var(--hx-success);
}
.hx-field.is-disabled,
.hx-field:has(:disabled),
.hx-searchfield, .hx-globalsearch.is-disabled,
.hx-searchfield, .hx-globalsearch:has(:disabled) {
  opacity: 0.55;
  pointer-events: none;
}

/* Control border lives only on the control, never the shell */
.hx-searchfield, .hx-globalsearch__control,
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch__control {
  border: 1px solid var(--hx-line);
  background: transparent;
}
.hx-field__input,
.hx-field__control,
.hx-textfield__control {
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
}

/* Migrated from helix-app — searchfield clear/icon spacing */
.hx-searchfield, .hx-globalsearch__control { padding: 4px 10px 4px 14px; }
.hx-searchfield, .hx-globalsearch__icon { margin-inline-end: 4px; fill: none; }
.hx-searchfield, .hx-globalsearch__icon svg,
.hx-searchfield, .hx-globalsearch__icon svg path { fill: none; stroke: currentColor; }
.hx-searchfield, .hx-globalsearch__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--hx-fg);
}
.hx-searchfield, .hx-globalsearch__clear[hidden] { display: none; }
.hx-searchfield, .hx-globalsearch__clear svg { display: block; fill: none; stroke: currentColor; }

/* Dark */
html[data-theme="dark"] .hx-field,
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch {
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-field__label,
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch__label {
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch__control {
  background: transparent;
  border-color: var(--hx-line);
}


/* SearchField control: no default fill */
.hx-searchfield, .hx-globalsearch__control,
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch__control,
.hx-app .hx-searchfield, .hx-globalsearch__control {
  background: transparent;
}


/* SearchField error — border must show */
.hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__control,
html[data-theme="dark"] .hx-searchfield, .hx-globalsearch--error .hx-searchfield, .hx-globalsearch__control {
  border: 1px solid var(--hx-danger);
  background: transparent;
}


/* ========== FIELD SHELL (migrated from helix-app) ========== */
.hx-field-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: min(320px, 100%);
}
.hx-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: min(320px, 100%);
  max-width: 320px;
  text-align: start;
  margin-bottom: 12px;
}
.hx-field-stack .hx-field:last-child { margin-bottom: 0; }
.hx-field__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hx-field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-semibold);
  color: var(--hx-fg);
}
.hx-field__label--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.hx-field__req {
  font-weight: var(--font-weight-medium);
  color: var(--hx-fg-muted);
}
.hx-field__req::before { content: "·"; margin-right: 6px; }
.hx-field__tip {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hx-fg-muted);
  cursor: help;
}
.hx-field__desc {
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: 1.4;
  color: var(--hx-fg-muted);
}
.hx-field__slot { position: relative; display: flex; }
.hx-field__control,
.hx-textfield__control {
  width: 100%;
  box-sizing: border-box;
  height: var(--density-control-height);
  padding: 0 12px;
  border: 1px solid var(--hx-line);
  border-radius: var(--radius-element);
  background: var(--hx-surface);
  color: var(--hx-fg);
  font: inherit;
}
.hx-field--lg .hx-field__control { height: var(--density-control-height-lg); }
.hx-field__status-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--hx-danger);
  pointer-events: none;
}
.hx-field__status-icon svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; }
.hx-field--warning .hx-field__status-icon { color: var(--hx-warning); }
.hx-field--success .hx-field__status-icon { color: var(--hx-success); }
.hx-field--error .hx-field__control,
.hx-field--warning .hx-field__control,
.hx-field--success .hx-field__control { padding-right: 34px; }
.hx-field--error .hx-field__control { border: 1px solid var(--hx-danger); }
.hx-field--warning .hx-field__control { border: 1px solid var(--hx-warning); }
.hx-field--success .hx-field__control { border: 1px solid var(--hx-success); }
.hx-field__control:disabled { opacity: .55; cursor: not-allowed; }
.hx-field__control:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }
.hx-field .hx-badge {
  height: 16px;
  min-height: 16px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}


/* Field / TextField control border restored */
.hx-field__control,
.hx-textfield__control,
html[data-theme="dark"] .hx-field__control,
html[data-theme="dark"] .hx-textfield__control {
  border: 1px solid var(--hx-line);
}


/* GlobalSearch — alias of SearchField (variant under Field) */
.hx-globalsearch { }
.hx-globalsearch__control,
.hx-globalsearch__input,
.hx-globalsearch__label,
.hx-globalsearch__icon,
.hx-globalsearch__clear,
.hx-globalsearch__submit,
.hx-globalsearch__helper {
  /* styles inherited via shared rules below */
}
/* Map GlobalSearch classes to the same rules as SearchField */
.hx-globalsearch,
.hx-searchfield, .hx-globalsearch { }


/* ========== COMBOBOX (variant under Field) ========== */
.hx-combobox {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: min(360px, 100%);
  text-align: start;
  position: relative;
  border: 0;
  background: transparent;
}
.hx-combobox__label {
  font-size: var(--text-label-size);
  font-weight: var(--font-weight-semibold);
  color: var(--hx-fg);
}
.hx-combobox__wrap { position: relative; }
.hx-combobox__input {
  width: 100%;
  min-height: var(--density-control-height);
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--hx-line);
  border-radius: var(--radius-element);
  background: var(--hx-surface);
  color: var(--hx-fg);
  font: inherit;
}
.hx-combobox--error .hx-combobox__input { border-color: var(--hx-danger); }
.hx-combobox__list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--radius-element);
  box-shadow: var(--shadow-med);
  max-height: 200px;
  overflow: auto;
}
.hx-combobox__list li { padding: 8px 12px; cursor: pointer; color: var(--hx-fg); }
.hx-combobox__list li:hover { background: var(--hx-surface-subtle); }
.hx-combobox__helper {
  margin: 0;
  font-size: var(--text-caption-size);
  color: var(--hx-fg-muted);
}
.hx-combobox--error .hx-combobox__helper { color: var(--hx-danger); }
html[data-theme="dark"] .hx-combobox__input,
html[data-theme="dark"] .hx-combobox__list {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}


/* GlobalSearch — production header shell (master for examples) */
.helix-custom-search-form.hx-globalsearch-global,
.hx-globalsearch-global {
  width: min(480px, 100%);
}
.helix-search-input-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--density-control-height);
  padding: 6px 12px 6px 16px;
  border: 1px solid var(--hx-line);
  border-radius: var(--radius-full);
  background: transparent;
}
.helix-search-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--hx-fg-muted);
}
.helix-search-icon svg { fill: none; stroke: currentColor; }
.helix-search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  outline: none;
  min-width: 0;
  color: var(--hx-fg);
}
.helix-search-clear,
.hx-globalsearch__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--hx-fg);
}
.helix-search-clear svg,
.hx-globalsearch__clear svg { fill: none; stroke: currentColor; }
.hx-globalsearch--error .helix-search-input-container {
  border-color: var(--hx-danger);
}
.hx-globalsearch-global.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
html[data-theme="dark"] .helix-search-input-container {
  border-color: var(--hx-line);
  background: transparent;
}
html[data-theme="dark"] .helix-search-input {
  color: var(--hx-fg);
}


/* Field validation status — flush under control, fill under rounded bottom corners */
.hx-field__status.hx-banner--sm {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: -18px 0 0;
  padding: 18px var(--spacing-3) 8px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  font-size: var(--text-caption-size);
  line-height: 1.4;
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
  position: relative;
  z-index: 0;
}
.hx-field__slot { position: relative; z-index: 1; }
.hx-field--error .hx-field__control,
.hx-field--warning .hx-field__control,
.hx-field--success .hx-field__control {
  border-bottom-left-radius: var(--radius-element);
  border-bottom-right-radius: var(--radius-element);
}
.hx-field__status.hx-banner--error {
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
}
.hx-field__status.hx-banner--warning {
  background: var(--hx-warning-bg);
  color: var(--hx-warning);
}
.hx-field__status.hx-banner--success {
  background: var(--hx-success-bg);
  color: var(--hx-success);
}
.hx-field__status .hx-banner__icon {
  background: transparent;
  color: inherit;
  width: 16px;
  height: 16px;
  display: inline-flex;
  flex-shrink: 0;
}
.hx-field__status .hx-banner__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}
.hx-field__status .hx-banner__msg {
  display: inline;
  color: inherit;
}
/* Status sits directly under the control */
.hx-field > .hx-field__status {
  margin-top: -18px;
}
.hx-globalsearch > .hx-globalsearch__helper.hx-banner {
  margin-top: var(--spacing-2);
}


/* Beat helix-app .hx-banner--sm — status flush under control */
body.hx-app .hx-field__status.hx-banner--sm,
.hx-app .hx-field__status.hx-banner--sm,
.hx-field > .hx-field__status.hx-banner--sm {
  margin: -18px 0 0;
  padding: 18px var(--spacing-3) 8px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
}


/* Attached status — Field overlaps corners; GlobalSearch and ComboBox sit below, full width */
.hx-field__status.hx-banner--sm,
body.hx-app .hx-field__status.hx-banner--sm {
  margin: -18px 0 0;
  padding: 18px var(--spacing-3) 8px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  width: 100%;
  box-sizing: border-box;
}
.hx-globalsearch__helper.hx-banner--sm,
.hx-combobox__status.hx-banner--sm,
body.hx-app .hx-globalsearch__helper.hx-banner--sm,
body.hx-app .hx-combobox__status.hx-banner--sm {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: 18px var(--spacing-3) 8px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  order: 2;
}
.hx-globalsearch,
.hx-combobox {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: min(320px, 100%);
}
.hx-globalsearch__control,
.hx-combobox__input,
.helix-search-input-container {
  order: 1;
  width: 100%;
}
/* Error */
.hx-field__status.hx-banner--error,
.hx-globalsearch__helper.hx-banner--error,
.hx-combobox__status.hx-banner--error,
body.hx-app .hx-field__status.hx-banner--error,
body.hx-app .hx-globalsearch__helper.hx-banner--error,
body.hx-app .hx-combobox__status.hx-banner--error {
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
}
/* Warning */
.hx-field__status.hx-banner--warning,
body.hx-app .hx-field__status.hx-banner--warning {
  background: var(--hx-warning-bg);
  color: var(--hx-warning);
}
/* Success */
.hx-field__status.hx-banner--success,
body.hx-app .hx-field__status.hx-banner--success {
  background: var(--hx-success-bg);
  color: var(--hx-success);
}
.hx-globalsearch--error .helix-search-input-container,
.hx-combobox--error .hx-combobox__input,
.hx-field--error .hx-field__control {
  border-color: var(--hx-danger);
}
.hx-field--warning .hx-field__control { border-color: var(--hx-warning); }
.hx-field--success .hx-field__control { border-color: var(--hx-success); }


/* Reinforce attached status */
body.hx-app .hx-field--error .hx-field__status.hx-banner--sm {
  margin: -18px 0 0;
  padding: 18px var(--spacing-3) 8px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
}
body.hx-app .hx-globalsearch--error .hx-globalsearch__helper.hx-banner--sm {
  margin: -20px 0 0;
  padding: 28px var(--spacing-3) 8px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  order: 2;
}
body.hx-app .hx-combobox--error .hx-combobox__status.hx-banner--sm {
  margin: -18px 0 0;
  padding: 18px var(--spacing-3) 8px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
  order: 2;
}
/* GlobalSearch parent must be flex so order works */
.hx-globalsearch,
.hx-globalsearch-global,
.helix-custom-search-form.hx-globalsearch-global {
  display: flex;
  flex-direction: column;
  width: min(320px, 100%);
}


/* Status icon — Field, GlobalSearch, ComboBox */
.hx-field__status .hx-banner__icon,
.hx-globalsearch__helper .hx-banner__icon,
.hx-combobox__status .hx-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: transparent;
  color: inherit;
}
.hx-field__status .hx-banner__icon svg,
.hx-globalsearch__helper .hx-banner__icon svg,
.hx-combobox__status .hx-banner__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}


/* Status width matches its control — general rule */
.hx-field__status,
.hx-globalsearch__helper.hx-banner,
.hx-combobox__status {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* ========== SELECT (variant under Field) ========== */
/**
 * hx-selects.css — Selects SSOT
 * Select, ComboBox
 */
.hx-select {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: min(320px, 100%);
  max-width: 320px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--hx-fg);
}
.hx-select__trigger {
  border: 1px solid var(--hx-line);
  border-radius: var(--radius-element);
  background: var(--hx-surface);
  min-height: var(--density-control-height);
  padding: 0 12px;
}
.hx-select:focus {
  border-color: var(--hx-primary);
  outline: none;
}
.hx-combobox {
  position: relative;
}
.hx-combobox__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius);
}


/* 3.04.94 — 4-variant readiness (light/dark × desktop/mobile)
   Controlled by data-theme + data-hx-vp on <html>.
   All styles token-driven. Composition with other primitives encouraged. */
html[data-theme="light"][data-hx-vp="desktop"],
html[data-theme="light"][data-hx-vp="mobile"],
html[data-theme="dark"][data-hx-vp="desktop"],
html[data-theme="dark"][data-hx-vp="mobile"] {
  /* tokens flip automatically */
}


/* ComboBox error — tailored */
.hx-combobox--error {
  display: flex;
  flex-direction: column;
  width: min(320px, 100%);
}
.hx-combobox--error .hx-combobox__input {
  order: 1;
  border: 1px solid var(--hx-danger);
  width: 100%;
}
body.hx-app .hx-combobox--error .hx-combobox__status,
.hx-combobox--error .hx-combobox__status {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: -18px 0 0;
  padding: 18px var(--spacing-3) 8px;
  width: 100%;
  box-sizing: border-box;
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
  border-radius: 0 0 var(--radius-element) var(--radius-element);
}
.hx-combobox--error .hx-combobox__status .hx-banner__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: inherit;
}
.hx-combobox--error .hx-combobox__status .hx-banner__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

/* GlobalSearch error — tailored */
.hx-globalsearch--error,
.helix-custom-search-form.hx-globalsearch--error {
  display: flex;
  flex-direction: column;
  width: min(320px, 100%);
}
.hx-globalsearch--error .helix-search-input-container,
.hx-globalsearch--error .hx-globalsearch__control {
  order: 1;
  border-color: var(--hx-danger);
  width: 100%;
}
.hx-globalsearch--error .hx-globalsearch__helper {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: 18px var(--spacing-3) 8px;
  width: 100%;
  box-sizing: border-box;
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
  border-radius: 0 0 var(--radius-element) var(--radius-element);
}
.hx-globalsearch--error .hx-globalsearch__helper .hx-banner__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: inherit;
}
.hx-globalsearch--error .hx-globalsearch__helper .hx-banner__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}


/* Shared validation status — Field, ComboBox, GlobalSearch */
.hx-field__status.hx-banner--sm,
.hx-combobox__status.hx-banner--sm,
.hx-globalsearch__helper.hx-banner--sm {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  box-sizing: border-box;
}
.hx-field--error .hx-field__status,
.hx-combobox--error .hx-combobox__status,
.hx-globalsearch--error .hx-globalsearch__helper {
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
}
.hx-combobox--error .hx-combobox__status {
  margin: -18px 0 0;
  order: 2;
}
.hx-globalsearch--error .hx-globalsearch__helper {
  margin: 0;
  order: 2;
}


/* Field status is the master — ComboBox and Select reuse it */
.hx-combobox,
.hx-select {
  display: flex;
  flex-direction: column;
}
.hx-combobox--error .hx-field__status.hx-banner--sm {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  order: 2;
  margin: -18px 0 0;
  padding: 18px var(--spacing-3) 8px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}
.hx-combobox--error .hx-combobox__input,
.hx-combobox--error .hx-combobox__wrap,
.hx-select--error .hx-select__wrap,
.hx-select--error .hx-select__trigger {
  order: 1;
}
.hx-combobox--error .hx-field__status .hx-banner__icon,
.hx-select--error .hx-field__status .hx-banner__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  background: transparent;
  color: inherit;
  flex-shrink: 0;
}
.hx-combobox--error .hx-field__status .hx-banner__icon svg,
.hx-select--error .hx-field__status .hx-banner__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}


/* Select error — match Field: status tucks under the control */
body.hx-app .hx-select--error {
  display: flex;
  flex-direction: column;
}
body.hx-app .hx-select--error .hx-field__status.hx-banner--sm {
  order: 2;
  margin-top: var(--space-2);
  margin-bottom: 0;
  padding: 8px var(--spacing-3);
  min-height: 43px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
  width: 100%;
  box-sizing: border-box;
}
body.hx-app .hx-select--error .hx-select__wrap {
  order: 1;
}


/* Select status sits fully below the wrap */
.hx-select--error .hx-field__status.hx-banner--sm {
  order: 2;
  margin-top: var(--space-2);
  padding: 8px var(--spacing-3);
  min-height: 43px;
  border-radius: 0 0 var(--radius-element) var(--radius-element);
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
}


/* GlobalSearch status — force below the control */
body.hx-app .hx-globalsearch--error > .hx-globalsearch__helper,
body.hx-app .hx-globalsearch--error > .hx-field__status {
  order: 2;
  margin-top: 0;
  position: relative;
}
body.hx-app .hx-globalsearch--error {
  display: flex;
  flex-direction: column;
}
body.hx-app .hx-globalsearch--error > .helix-search-input-container,
body.hx-app .hx-globalsearch--error > .hx-globalsearch__control {
  order: 1;
}

.hx-field__status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  color: var(--hx-fg);
}

.hx-select--error .hx-field__status {
  margin-top: var(--space-2);
  min-height: 43px;
  border-radius: 0 0 var(--hx-radius) var(--hx-radius);
}

.hx-globalsearch {
  display: flex;
  flex-direction: column;
}
.hx-globalsearch__helper,
.hx-globalsearch .hx-field__status {
  order: 2;
  margin-top: var(--space-1);
}


/* GlobalSearch and Select: status always below control */
.hx-globalsearch,
.hx-select {
  display: flex;
  flex-direction: column;
}
.hx-globalsearch__control,
.hx-select__wrap {
  order: 1;
}
.hx-globalsearch__helper,
.hx-globalsearch .hx-field__status,
.hx-select .hx-field__status {
  order: 2;
  margin-top: var(--space-1);
  position: static;
}


/* Force status below by making parent a column and status last */
form.hx-globalsearch,
div.hx-select {
  display: flex;
  flex-direction: column;
}
form.hx-globalsearch > .hx-field__status,
form.hx-globalsearch > .hx-globalsearch__helper,
div.hx-select > .hx-field__status {
  order: 99;
  margin-top: var(--space-2);
}


.hx-preview-card__stage:has(.hx-select--error) {
  padding-bottom: var(--space-4);
  overflow: visible;
}