/* Ealyx UI kit for HTML mockups, demos and artefacts.
   See references/components/catalog.md.
   Requires tokens.css (../../tokens/tokens.css) loaded first. Every value comes from a token; do not add raw colours here.
   Class names: .e-<component>, modifiers .e-<component>--<variant>. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--ealyx-color-ui-background);
  color: var(--ealyx-color-ui-foreground-body);
  font-family: var(--ealyx-font-family-text);
  font-size: var(--ealyx-typography-ui-body-font-size);
  line-height: var(--ealyx-typography-ui-body-line-height);
}
::selection { background: color-mix(in oklab, var(--ealyx-color-ui-primary) 22%, transparent); }
a { color: var(--ealyx-color-ui-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
.e-icon { width: var(--ealyx-size-icon-md); height: var(--ealyx-size-icon-md); flex: none; }
.e-icon--sm { width: var(--ealyx-size-icon-sm); height: var(--ealyx-size-icon-sm); }
.e-icon--lg { width: var(--ealyx-size-icon-lg); height: var(--ealyx-size-icon-lg); }
.e-icon--xl { width: var(--ealyx-size-icon-xl); height: var(--ealyx-size-icon-xl); }
.e-muted { color: var(--ealyx-color-ui-muted-foreground); }
.e-num { font-variant-numeric: tabular-nums; }
.e-mono { font-family: var(--ealyx-font-family-mono); font-size: 0.92em; }

/* ---------- Scrollbars: thin, floating, translucent; only while the pointer is over the scrolling area ---------- */
::-webkit-scrollbar { width: var(--ealyx-size-scrollbar); height: var(--ealyx-size-scrollbar); background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--ealyx-radius-pill); }
:hover::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--ealyx-color-ui-foreground) 28%, transparent); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--ealyx-color-ui-foreground) 45%, transparent); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: color-mix(in oklab, var(--ealyx-color-ui-foreground) 28%, transparent) transparent; }
}

/* ---------- App shell: sidebar canvas + floating content frame. The window never scrolls; the page scrolls inside the frame. ---------- */
.e-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--ealyx-color-ui-sidebar); }
.e-sidebar { width: var(--ealyx-size-layout-sidebar); flex: none; display: flex; flex-direction: column; padding: var(--ealyx-space-sm); gap: var(--ealyx-space-sm); height: 100%; overflow-y: auto; transition: width var(--ealyx-duration-expand) ease; }
.e-sidebar__brand { display: flex; align-items: center; gap: var(--ealyx-space-sm); padding: var(--ealyx-space-sm); }
.e-sidebar__brand img { height: 20px; }
.e-sidebar__product { font-size: var(--ealyx-typography-ui-body-sm-font-size); color: var(--ealyx-color-ui-muted-foreground); }
.e-sidebar__group { display: grid; gap: 2px; }
.e-sidebar__label { height: 32px; display: flex; align-items: center; padding: 0 var(--ealyx-space-sm); font-size: var(--ealyx-typography-ui-body-sm-font-size); font-weight: 500; color: color-mix(in oklab, var(--ealyx-color-ui-foreground) 70%, transparent); }
/* A group that folds: the label is a button with aria-expanded; its items hide when folded. */
button.e-sidebar__label { width: 100%; border: 0; border-radius: var(--ealyx-radius-sm); background: transparent; font-family: inherit; cursor: pointer; justify-content: space-between; gap: var(--ealyx-space-sm); text-align: left; }
button.e-sidebar__label:hover { background: var(--ealyx-color-ui-sidebar-accent); color: var(--ealyx-color-ui-foreground); }
button.e-sidebar__label:focus-visible { outline: var(--ealyx-size-focus-width) solid var(--ealyx-color-ui-ring); outline-offset: calc(-1 * var(--ealyx-size-focus-width)); }
button.e-sidebar__label .e-icon { width: var(--ealyx-size-icon-sm); height: var(--ealyx-size-icon-sm); transition: transform var(--ealyx-duration-state); }
button.e-sidebar__label[aria-expanded="false"] .e-icon { transform: rotate(-90deg); }
.e-sidebar__label[aria-expanded="false"] ~ * { display: none; }
.e-nav-item { display: flex; align-items: center; gap: var(--ealyx-space-sm); height: 32px; padding: 0 var(--ealyx-space-sm); border-radius: var(--ealyx-radius-sm); color: var(--ealyx-color-ui-foreground); font-size: var(--ealyx-typography-ui-body-font-size); white-space: nowrap; overflow: hidden; cursor: pointer; }
.e-nav-item:hover { background: var(--ealyx-color-ui-sidebar-accent); text-decoration: none; }
.e-nav-item[aria-current="page"] { background: var(--ealyx-color-ui-sidebar-accent); font-weight: 500; }
.e-nav-item .e-count { margin-left: auto; font-size: var(--ealyx-typography-ui-body-sm-font-size); color: var(--ealyx-color-ui-muted-foreground); }
.e-sidebar__spacer { flex: 1; }
.e-sidebar__footer { border-top: 1px solid color-mix(in oklab, var(--ealyx-color-ui-sidebar-border) 70%, transparent); padding-top: var(--ealyx-space-sm); display: grid; gap: 2px; }
.e-user { display: flex; align-items: center; gap: var(--ealyx-space-sm); padding: var(--ealyx-space-sm); }
.e-user b { display: block; font-weight: 500; font-size: var(--ealyx-typography-ui-body-font-size); }
.e-user small { color: var(--ealyx-color-ui-muted-foreground); font-size: var(--ealyx-typography-ui-body-sm-font-size); }
.e-shell[data-collapsed] .e-sidebar { width: calc(var(--ealyx-size-layout-sidebar-collapsed) + var(--ealyx-space-lg)); }
.e-shell[data-collapsed] .e-sidebar :is(.e-sidebar__label, .e-sidebar__product, .e-nav-item span, .e-nav-item .e-count, .e-user div, .e-sidebar__brand .e-wordmark) { display: none; }
.e-shell[data-collapsed] .e-nav-item { width: 32px; justify-self: center; justify-content: center; padding: 0; }
.e-workspace { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.e-frame { flex: 1; min-width: 0; min-height: 0; margin: 0 var(--ealyx-space-sm) var(--ealyx-space-sm) 0; background: var(--ealyx-color-ui-background); border: 1px solid color-mix(in oklab, var(--ealyx-color-ui-sidebar-border) 70%, transparent); border-radius: var(--ealyx-radius-lg); box-shadow: var(--ealyx-shadow-frame); display: flex; flex-direction: column; overflow: hidden; }
.e-topbar { height: var(--ealyx-size-layout-topbar); display: flex; align-items: center; gap: var(--ealyx-space-sm); padding: 0 var(--ealyx-space-md); flex: none; }
.e-topbar__title { font-weight: 500; }
.e-breadcrumb { display: flex; align-items: center; gap: var(--ealyx-space-xs); min-width: 0; color: var(--ealyx-color-ui-muted-foreground); }
.e-breadcrumb a { color: inherit; white-space: nowrap; }
.e-breadcrumb a:hover { color: var(--ealyx-color-ui-foreground); }
.e-breadcrumb .e-icon { width: var(--ealyx-size-icon-sm); height: var(--ealyx-size-icon-sm); flex: none; }
.e-breadcrumb [aria-current="page"] { color: var(--ealyx-color-ui-foreground); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-topbar__spacer { flex: 1; }
.e-kbd { font: 500 var(--ealyx-typography-ui-label-font-size) var(--ealyx-font-family-text); border: 1px solid var(--ealyx-color-ui-border); border-radius: var(--ealyx-radius-xs); padding: 1px 5px; color: var(--ealyx-color-ui-muted-foreground); background: var(--ealyx-color-ui-card); }
.e-main { flex: 1; min-height: 0; overflow: auto; }
.e-page { margin: 0 auto; width: 100%; max-width: var(--ealyx-size-layout-content-list); padding: var(--ealyx-space-3xl) var(--ealyx-space-2xl); }
.e-page--detail { max-width: var(--ealyx-size-layout-content-detail); }
.e-page--reading { max-width: var(--ealyx-size-layout-content-reading); }
.e-page--wide { max-width: var(--ealyx-size-layout-content-wide); }

/* ---------- Page header: eyebrow + Fraunces title + description + one primary action ---------- */
.e-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ealyx-space-xl); margin-bottom: var(--ealyx-space-2xl); flex-wrap: wrap; }
.e-eyebrow { margin: 0 0 var(--ealyx-space-sm); font-size: var(--ealyx-typography-ui-label-font-size); line-height: var(--ealyx-typography-ui-label-line-height); font-weight: var(--ealyx-typography-ui-label-font-weight); letter-spacing: var(--ealyx-typography-ui-label-letter-spacing); text-transform: uppercase; color: var(--ealyx-color-ui-primary); }
.e-title { margin: 0; color: var(--ealyx-color-ui-foreground); font-family: var(--ealyx-font-family-text); font-size: var(--ealyx-typography-ui-h1-font-size); line-height: var(--ealyx-typography-ui-h1-line-height); font-weight: var(--ealyx-typography-ui-h1-font-weight); }
.e-h2 { margin: 0 0 var(--ealyx-space-lg); color: var(--ealyx-color-ui-foreground); font-family: var(--ealyx-font-family-text); font-size: var(--ealyx-typography-ui-h2-font-size); line-height: var(--ealyx-typography-ui-h2-line-height); font-weight: var(--ealyx-typography-ui-h2-font-weight); }
.e-description { margin: var(--ealyx-space-sm) 0 0; max-width: 42rem; color: var(--ealyx-color-ui-muted-foreground); font-size: var(--ealyx-typography-ui-body-font-size); line-height: var(--ealyx-typography-ui-body-line-height); }

/* ---------- Button ---------- */
.e-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ealyx-space-sm); height: var(--ealyx-size-control-md); padding: 0 var(--ealyx-space-lg); border-radius: var(--ealyx-radius-md); border: 1px solid transparent; font: 600 var(--ealyx-typography-ui-body-font-size)/1 var(--ealyx-font-family-text); white-space: nowrap; cursor: pointer; transition: background-color var(--ealyx-duration-state), transform var(--ealyx-duration-press); color: inherit; background: transparent; }
.e-btn:active { transform: scale(.98); }
.e-btn:focus-visible { outline: var(--ealyx-size-focus-width) solid var(--ealyx-color-ui-ring); outline-offset: var(--ealyx-size-focus-offset); }
.e-btn:disabled { pointer-events: none; color: var(--ealyx-color-ui-muted-foreground); }
.e-btn:is(.e-btn--primary, .e-btn--secondary):disabled { background: var(--ealyx-color-ui-border-strong); color: var(--ealyx-color-ui-background); }
.e-btn[aria-busy="true"] { pointer-events: none; background: var(--ealyx-color-ui-primary-unselected); color: var(--ealyx-color-ui-primary-foreground); }
.e-btn--primary { background: var(--ealyx-color-ui-primary); color: var(--ealyx-color-ui-primary-foreground); }
.e-btn--primary:hover { background: var(--ealyx-color-ui-primary-hover); }
.e-btn--secondary { background: var(--ealyx-color-ui-foreground); color: var(--ealyx-color-ui-background); }
.e-btn--secondary:hover { background: color-mix(in oklab, var(--ealyx-color-ui-foreground) 85%, var(--ealyx-color-ui-background)); }
.e-btn--ghost { border-color: var(--ealyx-color-ui-border-strong); color: var(--ealyx-color-ui-foreground); }
.e-btn--ghost:hover, .e-btn--bare:hover { background: var(--ealyx-color-ui-muted); }
.e-btn--destructive { background: var(--ealyx-color-status-error-container); color: var(--ealyx-color-status-error); }
.e-btn--link { height: auto; padding: 0; color: var(--ealyx-color-ui-primary); }
.e-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; }
.e-btn--sm { height: var(--ealyx-size-control-sm); padding: 0 var(--ealyx-space-md); font-size: var(--ealyx-typography-ui-body-sm-font-size); border-radius: var(--ealyx-radius-sm); }
.e-btn--sm .e-icon { width: var(--ealyx-size-icon-sm); height: var(--ealyx-size-icon-sm); }
.e-btn--lg { height: var(--ealyx-size-control-lg); padding: 0 var(--ealyx-space-xl); }
.e-btn--icon { width: var(--ealyx-size-control-md); padding: 0; }
.e-btn--icon.e-btn--sm { width: var(--ealyx-size-control-sm); }
.e-btn--round { border-radius: var(--ealyx-radius-pill); }

/* ---------- Status pill: six families + error ---------- */
.e-badge { display: inline-flex; align-items: center; gap: var(--ealyx-space-xs); height: 20px; padding: 0 7px; border-radius: var(--ealyx-radius-pill); font: var(--ealyx-typography-ui-status-font-weight) var(--ealyx-typography-ui-status-font-size)/1 var(--ealyx-font-family-text); letter-spacing: var(--ealyx-typography-ui-status-letter-spacing); text-transform: uppercase; white-space: nowrap; background: var(--ealyx-color-ui-primary-container); color: var(--ealyx-color-ui-primary); }
.e-badge--pre-commit { background: var(--ealyx-color-ui-primary-container); color: var(--ealyx-color-ui-primary); }
.e-badge--active, .e-badge--live { background: var(--ealyx-color-ui-primary-container-high); color: var(--ealyx-color-ui-primary); }
.e-badge--live::before { content: ""; width: 5px; height: 5px; border-radius: var(--ealyx-radius-circle); background: var(--ealyx-color-status-live); animation: e-live 1.6s ease-in-out infinite; }
.e-badge--attention { background: var(--ealyx-color-status-warning-container); color: var(--ealyx-color-status-warning); }
.e-badge--positive { background: var(--ealyx-color-status-success-container); color: var(--ealyx-color-status-success); }
.e-badge--negative { background: var(--ealyx-color-ui-muted); color: var(--ealyx-color-ui-foreground-secondary); }
.e-badge--error { background: var(--ealyx-color-status-error-container); color: var(--ealyx-color-status-error); }
.e-badge--count { text-transform: none; letter-spacing: 0; font-weight: 600; background: var(--ealyx-color-ui-muted); color: var(--ealyx-color-ui-foreground-secondary); }
@keyframes e-live { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .e-badge--live::before { animation: none; } }

/* ---------- Card ---------- */
.e-card { min-width: 0; background: var(--ealyx-color-ui-card); border: 1px solid var(--ealyx-color-ui-border); border-radius: var(--ealyx-radius-lg); }
.e-card__header { padding: var(--ealyx-space-lg) var(--ealyx-space-lg) 0; display: flex; align-items: center; gap: var(--ealyx-space-sm); }
.e-card__title { margin: 0; color: var(--ealyx-color-ui-foreground); font-family: var(--ealyx-font-family-text); font-size: var(--ealyx-typography-ui-h3-font-size); line-height: var(--ealyx-typography-ui-h3-line-height); font-weight: var(--ealyx-typography-ui-h3-font-weight); }
.e-card__body { padding: var(--ealyx-space-lg); }
.e-card__footer { padding: var(--ealyx-space-md) var(--ealyx-space-lg); border-top: 1px solid var(--ealyx-color-ui-border); background: color-mix(in oklab, var(--ealyx-color-ui-muted) 50%, transparent); border-radius: 0 0 var(--ealyx-radius-lg) var(--ealyx-radius-lg); display: flex; justify-content: flex-end; gap: var(--ealyx-space-sm); }
.e-stat { padding: var(--ealyx-space-lg) var(--ealyx-space-xl); }
.e-stat__label { font-size: var(--ealyx-typography-ui-label-font-size); line-height: var(--ealyx-typography-ui-label-line-height); font-weight: var(--ealyx-typography-ui-label-font-weight); letter-spacing: var(--ealyx-typography-ui-label-letter-spacing); text-transform: uppercase; color: var(--ealyx-color-ui-muted-foreground); }
.e-stat__value { margin-top: var(--ealyx-space-sm); white-space: nowrap; font: var(--ealyx-typography-ui-h1-font-weight) var(--ealyx-typography-ui-h1-font-size)/var(--ealyx-typography-ui-h1-line-height) var(--ealyx-font-family-text); color: var(--ealyx-color-ui-foreground); font-variant-numeric: tabular-nums; }
/* The one hero number of a view (design system: Fraunces at most once per view). */
.e-stat--hero .e-stat__value { font: var(--ealyx-typography-ui-display-font-weight) var(--ealyx-typography-ui-display-font-size)/var(--ealyx-typography-ui-display-line-height) var(--ealyx-font-family-display); color: var(--ealyx-color-ui-primary); }
.e-stat__meaning { margin-top: var(--ealyx-space-sm); font-size: var(--ealyx-typography-ui-body-sm-font-size); color: var(--ealyx-color-ui-muted-foreground); }
.e-grid { display: grid; gap: var(--ealyx-space-lg); }
.e-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.e-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.e-detail { display: grid; grid-template-columns: 200px 1fr; gap: var(--ealyx-space-lg); padding: var(--ealyx-space-md) var(--ealyx-space-xl); border-top: 1px solid var(--ealyx-color-ui-border); }
.e-detail dt { color: var(--ealyx-color-ui-muted-foreground); }
.e-detail dd { margin: 0; }

/* ---------- Form ---------- */
.e-field { display: flex; flex-direction: column; min-width: 0; }
.e-label { margin-bottom: var(--ealyx-space-form-label); font-size: var(--ealyx-typography-ui-body-font-size); font-weight: 500; }
.e-hint { margin-top: var(--ealyx-space-form-hint); font-size: var(--ealyx-typography-ui-body-sm-font-size); color: var(--ealyx-color-ui-muted-foreground); }
/* Proximity: a label sits closer to its control than to the field above. */
.e-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ealyx-space-form-field) var(--ealyx-space-form-column); align-items: start; }
.e-field--wide { grid-column: 1 / -1; }
.e-form-section + .e-form-section, .e-form-grid + .e-form-section { margin-top: var(--ealyx-space-form-section); }
.e-form-section__title { margin: 0; font: var(--ealyx-typography-ui-h3-font-weight) var(--ealyx-typography-ui-h3-font-size)/var(--ealyx-typography-ui-h3-line-height) var(--ealyx-font-family-text); color: var(--ealyx-color-ui-foreground); }
.e-form-section__description { margin: var(--ealyx-space-form-label) 0 var(--ealyx-space-md); font-size: var(--ealyx-typography-ui-body-sm-font-size); color: var(--ealyx-color-ui-muted-foreground); }
.e-form-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ealyx-space-lg); flex-wrap: wrap; }
.e-form-section__head .e-input-icon { width: min(240px, 100%); }

/* Attribute select: the label inside, only in sets of three or more short attributes (.e-attrs). */
.e-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ealyx-size-control-attribute), 1fr)); gap: var(--ealyx-space-sm); }
.e-attr { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: var(--ealyx-size-control-lg); padding: var(--ealyx-space-xs) var(--ealyx-space-md); border: 1px solid var(--ealyx-color-ui-border-strong); border-radius: var(--ealyx-radius-md); background: var(--ealyx-color-ui-card); cursor: pointer; }
.e-attr__label { font-size: var(--ealyx-typography-ui-label-font-size); line-height: var(--ealyx-typography-ui-label-line-height); font-weight: var(--ealyx-typography-ui-label-font-weight); letter-spacing: var(--ealyx-typography-ui-label-letter-spacing); text-transform: uppercase; color: var(--ealyx-color-ui-muted-foreground); }
.e-attr select, .e-attr-cell select { appearance: none; width: 100%; min-width: 0; padding: 0 var(--ealyx-space-lg) 0 0; border: 0; outline: 0; background: transparent; color: inherit; font: 600 var(--ealyx-typography-ui-input-font-size)/1.3 var(--ealyx-font-family-text); text-overflow: ellipsis; cursor: inherit; }
.e-attr .e-icon, .e-attr-cell .e-icon { position: absolute; right: var(--ealyx-space-sm); bottom: 50%; transform: translateY(50%); width: var(--ealyx-size-icon-sm); height: var(--ealyx-size-icon-sm); pointer-events: none; color: currentColor; }
.e-attr .e-icon { bottom: var(--ealyx-space-md); transform: none; }
.e-attr:focus-within, .e-attr-cell:focus-within { outline: var(--ealyx-size-focus-width) solid var(--ealyx-color-ui-ring); outline-offset: var(--ealyx-size-focus-offset); }
.e-attr-cell { position: relative; display: flex; align-items: center; min-width: 0; height: var(--ealyx-size-control-sm); padding: 0 var(--ealyx-space-sm); border: 1px solid var(--ealyx-color-ui-border-strong); border-radius: var(--ealyx-radius-sm); background: var(--ealyx-color-ui-card); cursor: pointer; }
.e-attr-cell select { font-size: var(--ealyx-typography-ui-input-font-size); font-weight: 500; }
/* In a table a cell keeps its short value whole; the table scrolls sideways instead. */
.e-table .e-attr-cell { min-width: max-content; }
/* Tones: set · changed (differs from its default) · missing (required) · fixed (set elsewhere). */
:is(.e-attr, .e-attr-cell).e-attr--set { background: var(--ealyx-color-ui-primary-container); border-color: var(--ealyx-color-ui-primary-unselected); color: var(--ealyx-color-ui-on-primary-container); }
:is(.e-attr, .e-attr-cell).e-attr--changed { background: var(--ealyx-color-status-warning-container); border-color: var(--ealyx-color-status-warning); color: var(--ealyx-color-status-warning); }
:is(.e-attr, .e-attr-cell).e-attr--missing { background: var(--ealyx-color-status-error-container); border-color: var(--ealyx-color-status-error); color: var(--ealyx-color-status-error); }
:is(.e-attr, .e-attr-cell).e-attr--fixed { background: transparent; border-style: dashed; border-color: var(--ealyx-color-ui-border); color: var(--ealyx-color-ui-muted-foreground); cursor: default; }
.e-attr--fixed .e-icon { display: none; }
.e-legend { display: inline-flex; align-items: center; gap: var(--ealyx-space-md); font-size: var(--ealyx-typography-ui-body-sm-font-size); color: var(--ealyx-color-ui-muted-foreground); }
.e-legend > span { display: inline-flex; align-items: center; gap: var(--ealyx-space-xs); }
.e-legend > span::before { content: ""; width: 12px; height: 12px; border-radius: var(--ealyx-radius-xs); border: 1px solid; }
.e-legend .e-attr--set::before { background: var(--ealyx-color-ui-primary-container); border-color: var(--ealyx-color-ui-primary-unselected); }
.e-legend .e-attr--changed::before { background: var(--ealyx-color-status-warning-container); border-color: var(--ealyx-color-status-warning); }
.e-legend .e-attr--missing::before { background: var(--ealyx-color-status-error-container); border-color: var(--ealyx-color-status-error); }

/* Stepper: − value + (and optional +5, +10). */
.e-stepper { display: inline-flex; align-items: center; gap: var(--ealyx-space-xs); }
.e-stepper .e-btn { width: var(--ealyx-size-control-md); padding: 0; font-variant-numeric: tabular-nums; }
.e-stepper .e-btn:not(:first-child, :nth-child(3)) { width: auto; padding: 0 var(--ealyx-space-md); }
.e-stepper .e-input { width: 4.5em; padding: 0 var(--ealyx-space-xs); text-align: center; font-variant-numeric: tabular-nums; }
.e-stepper .e-input:focus-visible { padding-left: calc(var(--ealyx-space-xs) - 1px); }
.e-stepper--sm .e-btn, .e-stepper--sm .e-input { height: var(--ealyx-size-control-sm); border-radius: var(--ealyx-radius-sm); }
.e-stepper--sm .e-btn { width: var(--ealyx-size-control-sm); }
.e-hint--error { color: var(--ealyx-color-status-error); font-weight: 600; }
.e-input { height: var(--ealyx-size-control-md); width: 100%; padding: 0 var(--ealyx-space-md); border: 1px solid var(--ealyx-color-ui-border-strong); border-radius: var(--ealyx-radius-md); background: var(--ealyx-color-ui-card); color: inherit; font: inherit; font-size: var(--ealyx-typography-ui-input-font-size); }
.e-input:not(:placeholder-shown) { border-color: var(--ealyx-color-ui-border); }
.e-input:focus-visible { outline: none; border: var(--ealyx-size-focus-width) solid var(--ealyx-color-ui-ring); padding-left: calc(var(--ealyx-space-md) - 1px); }
.e-input-icon .e-input:focus-visible { padding-left: 35px; }
.e-input:disabled { background: var(--ealyx-color-ui-muted); color: var(--ealyx-color-ui-muted-foreground); cursor: not-allowed; }
/* Locked (can't be edited here) and verified (confirmed): an icon at the right edge. */
.e-field__control { position: relative; }
.e-field__control > .e-icon { position: absolute; right: var(--ealyx-space-md); top: 50%; transform: translateY(-50%); }
.e-input--locked, .e-input--locked:not(:placeholder-shown) { border-color: transparent; background: var(--ealyx-color-ui-muted); color: var(--ealyx-color-ui-muted-foreground); }
.e-input--locked + .e-icon { color: var(--ealyx-color-ui-muted-foreground); }
.e-input--verified + .e-icon { color: var(--ealyx-color-status-success); }
.e-input[aria-invalid="true"], .e-input[aria-invalid="true"]:not(:placeholder-shown) { border-color: var(--ealyx-color-status-error); }
.e-input-icon { position: relative; }
.e-input-icon .e-icon { position: absolute; left: var(--ealyx-space-md); top: 50%; transform: translateY(-50%); color: var(--ealyx-color-ui-muted-foreground); }
.e-input-icon .e-input { padding-left: 36px; }

/* ---------- Table ---------- */
.e-toolbar { display: flex; align-items: center; gap: var(--ealyx-space-sm); flex-wrap: wrap; margin-bottom: var(--ealyx-space-md); }
.e-toolbar .e-input-icon { flex: 1; min-width: 220px; max-width: 360px; }
.e-toolbar__spacer { flex: 1; }
.e-table-wrap { border: 1px solid var(--ealyx-color-ui-border); border-radius: var(--ealyx-radius-lg); background: var(--ealyx-color-ui-card); overflow: auto; }
.e-table { width: 100%; border-collapse: collapse; font-size: var(--ealyx-typography-ui-body-font-size); }
.e-table th { position: sticky; top: 0; height: var(--ealyx-size-layout-table-row); padding: 0 var(--ealyx-space-md); text-align: left; font-size: var(--ealyx-typography-ui-label-font-size); font-weight: var(--ealyx-typography-ui-label-font-weight); letter-spacing: var(--ealyx-typography-ui-label-letter-spacing); text-transform: uppercase; color: var(--ealyx-color-ui-muted-foreground); background: var(--ealyx-color-ui-muted); border-bottom: 1px solid var(--ealyx-color-ui-border); white-space: nowrap; }
.e-table td { height: var(--ealyx-size-layout-table-row); padding: 0 var(--ealyx-space-md); border-bottom: 1px solid var(--ealyx-color-ui-border); white-space: nowrap; }
.e-table tr:last-child td { border-bottom: 0; }
.e-table tbody tr:hover { background: color-mix(in oklab, var(--ealyx-color-ui-muted) 50%, transparent); }
.e-table tbody tr[aria-selected="true"] { background: var(--ealyx-color-ui-primary-container-high); }
.e-table .e-right { text-align: right; }
.e-table td.e-right { font-variant-numeric: tabular-nums; }
.e-table--media td { height: var(--ealyx-size-layout-table-row-media); }
.e-table input[type="checkbox"] { accent-color: var(--ealyx-color-ui-primary); }
.e-row-link { display: inline-flex; align-items: center; gap: var(--ealyx-space-xs); color: var(--ealyx-color-ui-foreground); font-weight: 500; }
.e-row-link .e-icon { color: var(--ealyx-color-ui-muted-foreground); }
.e-thumb { width: 44px; height: 44px; border-radius: var(--ealyx-radius-sm); background: var(--ealyx-color-ui-muted); display: inline-flex; align-items: center; justify-content: center; color: var(--ealyx-color-ui-muted-foreground); vertical-align: middle; }
.e-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--ealyx-space-md); padding: var(--ealyx-space-md) 0 0; color: var(--ealyx-color-ui-muted-foreground); }
.e-table-title { display: flex; align-items: center; gap: var(--ealyx-space-lg); flex-wrap: wrap; margin-bottom: var(--ealyx-space-md); }
.e-table-title h3 { flex: 1; margin: 0; font: var(--ealyx-typography-ui-h3-font-weight) var(--ealyx-typography-ui-h3-font-size)/var(--ealyx-typography-ui-h3-line-height) var(--ealyx-font-family-text); }
.e-table-title__total { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Grouped editable table: a group row with its subtotal in the quantity column, lines indented under it. */
.e-table--grouped td { padding: var(--ealyx-space-xs) var(--ealyx-space-xs); border-bottom: 0; }
.e-table--grouped th { padding: 0 var(--ealyx-space-xs); }
.e-table--grouped :is(th, td):first-child { padding-left: calc(var(--ealyx-space-md) + var(--ealyx-space-lg)); }
.e-table--grouped :is(th, td):last-child { padding-right: var(--ealyx-space-md); }
.e-table--grouped tbody + tbody .e-group-row td { border-top: 1px solid var(--ealyx-color-ui-border); }
.e-table--grouped .e-group-row td { padding-top: var(--ealyx-space-md); font: var(--ealyx-typography-ui-h3-font-weight) var(--ealyx-typography-ui-h3-font-size)/var(--ealyx-typography-ui-h3-line-height) var(--ealyx-font-family-text); }
.e-table--grouped .e-group-row td:first-child { padding-left: var(--ealyx-space-md); }
.e-table--grouped .e-group-row .e-btn--link { margin-left: var(--ealyx-space-md); font-size: var(--ealyx-typography-ui-body-sm-font-size); }
.e-table--grouped tbody tr:last-child td { padding-bottom: var(--ealyx-space-md); }
.e-table--grouped tbody tr:hover { background: transparent; }
.e-table--grouped tfoot td { height: var(--ealyx-size-layout-table-row); border-top: 1px solid var(--ealyx-color-ui-border); background: var(--ealyx-color-ui-muted); font-weight: 700; }
.e-table--grouped .e-price { color: var(--ealyx-color-ui-muted-foreground); font-size: var(--ealyx-typography-ui-body-sm-font-size); }
.e-table--grouped td.e-right .e-stepper { justify-content: flex-end; vertical-align: middle; }
.e-table--grouped td.e-right .e-stepper + .e-btn { margin-left: var(--ealyx-space-xs); vertical-align: middle; }
/* The column the person acts on stays in view when the table scrolls sideways. */
.e-table--grouped .e-pinned { position: sticky; right: 0; background: var(--ealyx-color-ui-card); border-left: 1px solid var(--ealyx-color-ui-border); }
.e-table--grouped :is(th, tfoot td).e-pinned { background: var(--ealyx-color-ui-muted); }
.e-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ealyx-space-md); margin-top: var(--ealyx-space-lg); }
.e-bulkbar { display: flex; align-items: center; gap: var(--ealyx-space-sm); padding: var(--ealyx-space-sm) var(--ealyx-space-md); margin-bottom: var(--ealyx-space-md); border-radius: var(--ealyx-radius-md); background: var(--ealyx-color-ui-primary-container); color: var(--ealyx-color-ui-on-primary-container); }

/* ---------- Tabs ---------- */
.e-tabs { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 3px; border-radius: var(--ealyx-radius-md); background: var(--ealyx-color-ui-muted); }
.e-tab { display: inline-flex; align-items: center; gap: var(--ealyx-space-sm); white-space: nowrap; border: 0; background: transparent; height: 30px; padding: 0 var(--ealyx-space-md); border-radius: var(--ealyx-radius-sm); font: 500 var(--ealyx-typography-ui-body-font-size) var(--ealyx-font-family-text); color: color-mix(in oklab, var(--ealyx-color-ui-foreground) 60%, transparent); cursor: pointer; }
.e-tab:hover { color: var(--ealyx-color-ui-foreground); }
.e-tab[aria-selected="true"] { background: var(--ealyx-color-ui-card); color: var(--ealyx-color-ui-foreground); box-shadow: var(--ealyx-shadow-sm); }

/* ---------- Feedback ---------- */
.e-alert { display: flex; gap: var(--ealyx-space-md); padding: var(--ealyx-space-md) var(--ealyx-space-lg); border-radius: var(--ealyx-radius-md); border: 1px solid var(--ealyx-color-ui-border); background: var(--ealyx-color-ui-card); }
.e-alert b { display: block; font-weight: 600; }
.e-alert p { margin: 2px 0 0; color: var(--ealyx-color-ui-muted-foreground); }
.e-alert--info { background: var(--ealyx-color-ui-primary-container); border-color: transparent; color: var(--ealyx-color-ui-on-primary-container); }
.e-alert--warning { background: var(--ealyx-color-status-warning-container); border-color: transparent; }
.e-alert--warning > .e-icon { color: var(--ealyx-color-status-warning); }
.e-alert--error { background: var(--ealyx-color-status-error-container); border-color: transparent; }
.e-alert--error > .e-icon, .e-alert--error b { color: var(--ealyx-color-status-error); }
.e-alert--success { background: var(--ealyx-color-status-success-container); border-color: transparent; }
.e-alert--success > .e-icon { color: var(--ealyx-color-status-success); }
.e-empty { display: grid; justify-items: center; gap: var(--ealyx-space-sm); padding: var(--ealyx-space-3xl) var(--ealyx-space-xl); border: 1px dashed var(--ealyx-color-ui-border-strong); border-radius: var(--ealyx-radius-lg); background: var(--ealyx-color-ui-card); text-align: center; }
.e-empty > .e-icon { color: var(--ealyx-color-ui-primary); margin-bottom: var(--ealyx-space-xs); }
.e-empty h3 { margin: 0; font: var(--ealyx-typography-ui-h2-font-weight) var(--ealyx-typography-ui-h2-font-size)/var(--ealyx-typography-ui-h2-line-height) var(--ealyx-font-family-text); }
.e-empty p { margin: 0 0 var(--ealyx-space-sm); max-width: 28rem; color: var(--ealyx-color-ui-muted-foreground); }
.e-toast { display: flex; align-items: flex-start; gap: var(--ealyx-space-md); width: 360px; padding: var(--ealyx-space-lg); border-radius: var(--ealyx-radius-lg); background: var(--ealyx-color-ui-card); box-shadow: var(--ealyx-shadow-lg); }
.e-toast > .e-icon { color: var(--ealyx-color-status-success); }
.e-toast b { display: block; font-weight: 600; }
.e-toast p { margin: 2px 0 0; color: var(--ealyx-color-ui-muted-foreground); }
.e-skeleton { height: 14px; border-radius: var(--ealyx-radius-xs); background: var(--ealyx-color-ui-primary-container); animation: e-pulse 1.6s ease-in-out infinite; }
@keyframes e-pulse { 50% { background: var(--ealyx-color-ui-primary-container-high); } }
@media (prefers-reduced-motion: reduce) { .e-skeleton { animation: none; } }

/* ---------- Dialog ---------- */
.e-dialog { width: min(440px, 100%); background: var(--ealyx-color-ui-card); border-radius: var(--ealyx-radius-xl); box-shadow: var(--ealyx-shadow-lg); }
.e-dialog__body { padding: var(--ealyx-space-xl); display: grid; gap: var(--ealyx-space-sm); }
.e-dialog__title { margin: 0; font: var(--ealyx-typography-ui-h2-font-weight) var(--ealyx-typography-ui-h2-font-size)/var(--ealyx-typography-ui-h2-line-height) var(--ealyx-font-family-text); }
.e-dialog__body p { margin: 0; color: var(--ealyx-color-ui-muted-foreground); }

/* ---------- Sheet: forms slide in from the right; dialogs stay for quick confirmations ---------- */
.e-sheet { width: min(var(--ealyx-size-layout-sheet), 100%); display: flex; flex-direction: column; background: var(--ealyx-color-ui-card); border-radius: var(--ealyx-radius-xl); box-shadow: var(--ealyx-shadow-lg); overflow: hidden; }
.e-sheet__head { flex: none; display: flex; align-items: flex-start; gap: var(--ealyx-space-sm); padding: var(--ealyx-space-xl) var(--ealyx-space-xl) var(--ealyx-space-lg); }
.e-sheet__title { margin: 0; flex: 1; font: var(--ealyx-typography-ui-h2-font-weight) var(--ealyx-typography-ui-h2-font-size)/var(--ealyx-typography-ui-h2-line-height) var(--ealyx-font-family-text); color: var(--ealyx-color-ui-foreground); }
.e-sheet__head p { margin: var(--ealyx-space-xs) 0 0; color: var(--ealyx-color-ui-muted-foreground); }
.e-sheet__body { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--ealyx-space-xl) var(--ealyx-space-xl); display: grid; align-content: start; gap: var(--ealyx-space-form-field); }
.e-sheet__foot { flex: none; display: flex; justify-content: flex-end; gap: var(--ealyx-space-sm); padding: var(--ealyx-space-md) var(--ealyx-space-xl); border-top: 1px solid var(--ealyx-color-ui-border); }
/* As a native <dialog>: floats at the right edge, inset like the frame, over a light scrim. */
dialog.e-sheet { position: fixed; inset: var(--ealyx-space-sm) var(--ealyx-space-sm) var(--ealyx-space-sm) auto; height: auto; max-height: none; margin: 0; padding: 0; border: 0; color: inherit; }
dialog.e-sheet:not([open]) { display: none; }
dialog.e-sheet[open] { animation: e-sheet-in var(--ealyx-duration-expand) ease-out; }
dialog.e-sheet::backdrop { background: color-mix(in oklab, var(--ealyx-color-brand-ink) 20%, transparent); }
@keyframes e-sheet-in { from { transform: translateX(var(--ealyx-space-3xl)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.e-sheet[open] { animation: none; } }
/* Below size.breakpoint.tablet (media queries can't read custom properties). */
@media (max-width: 767px) { dialog.e-sheet { inset: 0; width: 100%; border-radius: 0; } .e-breadcrumb > :not([aria-current]) { display: none; } }

/* ---------- Agent (chat): the person in taupe, the agent in soft violet, no avatar per message ---------- */
.e-msg { display: flex; max-width: 84%; }
.e-msg__text { padding: 11px var(--ealyx-space-lg); border-radius: var(--ealyx-radius-lg) var(--ealyx-radius-lg) var(--ealyx-radius-lg) var(--ealyx-radius-xs); background: var(--ealyx-color-ui-primary-container); color: var(--ealyx-color-ui-foreground); font-size: var(--ealyx-typography-ui-message-font-size); line-height: var(--ealyx-typography-ui-message-line-height); }
.e-msg__text p { margin: 0 0 var(--ealyx-space-sm); }
.e-msg__text p:last-child { margin-bottom: 0; }
.e-msg--user { margin-left: auto; justify-content: flex-end; }
.e-msg--user .e-msg__text { background: var(--ealyx-color-ui-bubble-user); border-radius: var(--ealyx-radius-lg) var(--ealyx-radius-lg) var(--ealyx-radius-xs) var(--ealyx-radius-lg); }
/* Thinking: accent dot + present-continuous caption. Never a bare spinner. */
.e-thinking { display: inline-flex; align-items: center; gap: var(--ealyx-space-sm); font-size: var(--ealyx-typography-ui-label-font-size); font-weight: 500; letter-spacing: var(--ealyx-typography-ui-label-letter-spacing); text-transform: uppercase; color: var(--ealyx-color-ui-muted-foreground); }
.e-thinking::before { content: ""; width: 6px; height: 6px; border-radius: var(--ealyx-radius-circle); background: var(--ealyx-color-status-live); animation: e-live 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .e-thinking::before { animation: none; } }
/* Reasoning: the "why" behind a number. */
.e-reasoning { display: flex; gap: var(--ealyx-space-sm); padding: var(--ealyx-space-md) var(--ealyx-space-lg); border-radius: var(--ealyx-radius-lg); background: var(--ealyx-color-ui-primary-container); }
.e-reasoning::before { content: "↳"; color: var(--ealyx-color-ui-primary); font-weight: 700; }
.e-reasoning b { display: block; font-size: var(--ealyx-typography-ui-label-font-size); letter-spacing: var(--ealyx-typography-ui-label-letter-spacing); text-transform: uppercase; color: var(--ealyx-color-ui-muted-foreground); }
/* Reward: static gradient pill, text only. */
.e-reward { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--ealyx-space-md); border-radius: var(--ealyx-radius-pill); background: linear-gradient(90deg, var(--ealyx-gradient-reward)); color: var(--ealyx-color-ui-primary-foreground); box-shadow: var(--ealyx-shadow-reward); font: 700 12px/1 var(--ealyx-font-family-text); letter-spacing: 0.08em; text-transform: uppercase; }
/* The Ealyx symbol in the accent: the agent's entry point and the agent panel header. The logo file itself is never recoloured. */
.e-symbol { display: inline-block; width: 18px; height: 18px; background: var(--ealyx-color-brand-violet-accent); -webkit-mask: url(../../logos/ealyx/ealyx-symbol.svg) center / contain no-repeat; mask: url(../../logos/ealyx/ealyx-symbol.svg) center / contain no-repeat; }
.e-avatar { width: 32px; height: 32px; flex: none; border-radius: var(--ealyx-radius-circle); display: inline-flex; align-items: center; justify-content: center; background: var(--ealyx-color-ui-primary-container); color: var(--ealyx-color-ui-on-primary-container); font-size: var(--ealyx-typography-ui-body-sm-font-size); font-weight: 600; overflow: hidden; }
.e-composer { border-radius: var(--ealyx-radius-xl); background: var(--ealyx-color-ui-surface); box-shadow: var(--ealyx-shadow-md); padding: var(--ealyx-space-md); display: grid; gap: var(--ealyx-space-sm); }
.e-composer textarea { border: 0; resize: none; font: inherit; font-size: var(--ealyx-typography-ui-input-font-size); background: transparent; color: inherit; min-height: 56px; outline: none; }
.e-composer__row { display: flex; align-items: center; gap: var(--ealyx-space-sm); }
.e-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--ealyx-space-md); border-radius: var(--ealyx-radius-pill); background: var(--ealyx-color-ui-muted); color: var(--ealyx-color-ui-foreground-body); font: 500 var(--ealyx-typography-ui-body-sm-font-size) var(--ealyx-font-family-text); border: 1px solid transparent; cursor: pointer; }
.e-chip:hover { background: var(--ealyx-color-ui-background); border-color: var(--ealyx-color-ui-border-strong); }
.e-chip[aria-pressed="true"], .e-chip--primary, .e-chip--primary:hover { background: var(--ealyx-color-ui-primary); color: var(--ealyx-color-ui-primary-foreground); border-color: transparent; font-weight: 700; }
.e-chip-picker { display: grid; gap: var(--ealyx-space-lg); }
.e-chip-picker__group { display: flex; flex-wrap: wrap; gap: var(--ealyx-space-sm); }
.e-chip-picker__label { width: 100%; font-size: var(--ealyx-typography-ui-label-font-size); line-height: var(--ealyx-typography-ui-label-line-height); font-weight: var(--ealyx-typography-ui-label-font-weight); letter-spacing: var(--ealyx-typography-ui-label-letter-spacing); text-transform: uppercase; color: var(--ealyx-color-ui-muted-foreground); }
.e-chip-picker .e-chip { gap: var(--ealyx-space-sm); background: var(--ealyx-color-ui-card); border-color: var(--ealyx-color-ui-border); font-weight: 600; transition: transform var(--ealyx-duration-press); }
.e-chip-picker .e-chip:hover { border-color: var(--ealyx-color-ui-primary-unselected); }
.e-chip-picker .e-chip:active { transform: scale(.98); background: var(--ealyx-color-ui-primary-container); }
.e-chip:focus-visible { outline: var(--ealyx-size-focus-width) solid var(--ealyx-color-ui-ring); outline-offset: var(--ealyx-size-focus-offset); }
.e-chip__count { min-width: 20px; padding: 0 6px; border-radius: var(--ealyx-radius-pill); background: var(--ealyx-color-ui-primary); color: var(--ealyx-color-ui-primary-foreground); font-size: var(--ealyx-typography-ui-label-font-size); line-height: 18px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.e-chip__count:empty { display: none; }
/* Disclosure: a link-style summary; the focus ring wraps the summary, not the row. */
.e-disclosure > summary { display: inline-flex; align-items: center; gap: var(--ealyx-space-xs); width: fit-content; list-style: none; border-radius: var(--ealyx-radius-sm); color: var(--ealyx-color-ui-primary); font-weight: 600; cursor: pointer; }
.e-disclosure > summary::-webkit-details-marker { display: none; }
.e-disclosure > summary .e-icon { width: var(--ealyx-size-icon-sm); height: var(--ealyx-size-icon-sm); transition: transform var(--ealyx-duration-state); }
.e-disclosure[open] > summary .e-icon { transform: rotate(90deg); }
.e-disclosure > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.e-disclosure > summary:focus-visible { outline: var(--ealyx-size-focus-width) solid var(--ealyx-color-ui-ring); outline-offset: var(--ealyx-size-focus-offset); }
.e-disclosure[open] > summary { margin-bottom: var(--ealyx-space-lg); }
.e-chip--more { background: transparent; border: 1px dashed var(--ealyx-color-ui-border-strong); }
/* Agent panel: outside the frame, on the sidebar canvas, like the side menu; opening it shrinks the frame. */
.e-panel { width: var(--ealyx-size-layout-agent-panel); flex: none; height: 100%; display: flex; flex-direction: column; padding: 0 var(--ealyx-space-sm) var(--ealyx-space-sm) 0; background: transparent; }
.e-panel[hidden] { display: none; }
/* Messages and composer in a box like the content frame; the panel head stays on the canvas, in the top bar's row. */
.e-panel__frame { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ealyx-color-ui-background); border: 1px solid color-mix(in oklab, var(--ealyx-color-ui-sidebar-border) 70%, transparent); border-radius: var(--ealyx-radius-lg); box-shadow: var(--ealyx-shadow-frame); }
.e-spin { animation: e-spin 1s linear infinite; }
@keyframes e-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .e-spin { animation-duration: 3s; } }

/* ---------- Role-locked and read-only ---------- */
.e-locked { background: var(--ealyx-color-ui-border-strong); color: var(--ealyx-color-ui-muted-foreground); border-color: transparent; cursor: not-allowed; }
.e-tooltip { display: inline-flex; align-items: center; gap: var(--ealyx-space-xs); padding: var(--ealyx-space-xs) var(--ealyx-space-sm); border-radius: var(--ealyx-radius-sm); background: var(--ealyx-color-ui-card); color: var(--ealyx-color-ui-foreground); box-shadow: var(--ealyx-shadow-md); font-size: 12px; }
.e-view-only { font-size: var(--ealyx-typography-ui-label-font-size); font-weight: var(--ealyx-typography-ui-label-font-weight); letter-spacing: var(--ealyx-typography-ui-label-letter-spacing); text-transform: uppercase; color: var(--ealyx-color-ui-muted-foreground); }

/* ---------- Touch: every control reaches 44px on coarse pointers ---------- */
@media (pointer: coarse) {
  .e-btn, .e-btn--sm, .e-input, .e-nav-item, .e-tab, .e-chip, .e-attr-cell, .e-stepper--sm :is(.e-btn, .e-input) { min-height: var(--ealyx-size-control-lg); }
  .e-stepper .e-btn, .e-stepper--sm .e-btn { min-width: var(--ealyx-size-control-lg); }
  .e-btn--icon, .e-btn--icon.e-btn--sm { min-width: var(--ealyx-size-control-lg); }
}