/**
 * CEMIUX.COMPONENT-FOUNDATION.1 · Canonical primitives
 * Domain-neutral. No screen-, motor- or entity-specific selectors.
 */

/* Progress / percentage */
.cemi-ux-progress { display:grid; gap:var(--cemi-space-2); min-width:0; }
.cemi-ux-progress__meta { display:flex; align-items:baseline; justify-content:space-between; gap:var(--cemi-space-3); min-width:0; }
.cemi-ux-progress__label { min-width:0; color:var(--cemi-color-text); font-size:var(--cemi-font-size-sm); font-weight:600; }
.cemi-ux-progress__value { flex:0 0 auto; color:var(--cemi-color-ink); font-variant-numeric:tabular-nums; font-size:var(--cemi-font-size-sm); font-weight:700; }
.cemi-ux-progress__track { position:relative; width:100%; height:.625rem; overflow:hidden; border-radius:var(--cemi-radius-pill); background:var(--cemi-color-surface-strong); }
.cemi-ux-progress__bar { display:block; width:clamp(0%,var(--cemi-progress-value,0%),100%); height:100%; border-radius:inherit; background:var(--cemi-color-brand); transition:width var(--cemi-duration-normal) var(--cemi-ease-standard); }
.cemi-ux-progress[data-state="complete"] .cemi-ux-progress__bar { background:var(--cemi-color-success); }
.cemi-ux-progress[data-state="warning"] .cemi-ux-progress__bar { background:var(--cemi-color-warning); }
.cemi-ux-progress[data-state="error"] .cemi-ux-progress__bar, .cemi-ux-progress[data-state="blocked"] .cemi-ux-progress__bar { background:var(--cemi-color-danger); }
.cemi-ux-percentage { display:inline-flex; align-items:baseline; gap:var(--cemi-space-2); min-width:0; }
.cemi-ux-percentage__value { color:var(--cemi-color-ink); font-size:var(--cemi-font-size-xl); font-weight:800; font-variant-numeric:tabular-nums; }
.cemi-ux-percentage__label { color:var(--cemi-color-muted); font-size:var(--cemi-font-size-sm); }

/* Empty / loading / skeleton */
.cemi-ux-empty { display:grid; justify-items:center; gap:var(--cemi-space-3); padding:var(--cemi-space-8); text-align:center; color:var(--cemi-color-text); background:var(--cemi-color-surface-soft); border:1px dashed var(--cemi-color-border-strong); border-radius:var(--cemi-radius-lg); }
.cemi-ux-empty__icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:var(--cemi-color-surface-strong); color:var(--cemi-color-muted); }
.cemi-ux-empty__title { margin:0; color:var(--cemi-color-ink); font-size:var(--cemi-font-size-lg); font-weight:700; }
.cemi-ux-empty__body { max-width:38rem; margin:0; color:var(--cemi-color-muted); }
.cemi-ux-empty__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--cemi-space-2); margin-top:var(--cemi-space-2); }
.cemi-ux-loading { display:inline-flex; align-items:center; gap:var(--cemi-space-3); color:var(--cemi-color-muted); }
.cemi-ux-loading__indicator { width:1.125rem; height:1.125rem; border:.16rem solid var(--cemi-color-border); border-top-color:var(--cemi-color-brand); border-radius:50%; animation:cemi-ux-spin .8s linear infinite; }
@keyframes cemi-ux-spin { to { transform:rotate(360deg); } }
.cemi-ux-skeleton { display:grid; gap:var(--cemi-space-3); }
.cemi-ux-skeleton__line { display:block; width:var(--cemi-skeleton-width,100%); min-height:var(--cemi-skeleton-height,.875rem); border-radius:var(--cemi-radius-sm); background:linear-gradient(90deg,var(--cemi-color-surface-strong) 20%,var(--cemi-color-surface-soft) 40%,var(--cemi-color-surface-strong) 60%); background-size:200% 100%; animation:cemi-ux-skeleton-shimmer 1.35s ease-in-out infinite; }
@keyframes cemi-ux-skeleton-shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce) { .cemi-ux-loading__indicator,.cemi-ux-skeleton__line { animation:none; } }

/* Slider */
.cemi-ux-slider { display:grid; gap:var(--cemi-space-2); min-width:0; }
.cemi-ux-slider__header { display:flex; align-items:baseline; justify-content:space-between; gap:var(--cemi-space-3); }
.cemi-ux-slider__label { color:var(--cemi-color-ink); font-size:var(--cemi-font-size-sm); font-weight:700; }
.cemi-ux-slider__value { color:var(--cemi-color-ink); font-variant-numeric:tabular-nums; font-weight:700; }
.cemi-ux-slider__control { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--cemi-space-3); }
.cemi-ux-slider input[type="range"] { width:100%; min-width:0; height:2.75rem; margin:0; accent-color:var(--cemi-color-brand); cursor:pointer; }
.cemi-ux-slider input[type="number"] { width:min(8.5rem,34vw); min-height:44px; padding:.65rem .75rem; color:var(--cemi-color-text); background:var(--cemi-color-surface); border:1px solid var(--cemi-color-border-strong); border-radius:var(--cemi-radius-md); font-variant-numeric:tabular-nums; }
.cemi-ux-slider__hint { color:var(--cemi-color-muted); font-size:var(--cemi-font-size-xs); }
.cemi-ux-slider :disabled { cursor:not-allowed; opacity:.55; }
@media (max-width:47.999rem) { .cemi-ux-slider__control { grid-template-columns:1fr; } .cemi-ux-slider input[type="number"] { width:100%; } }

/* Card / panel anatomy. Variants describe purpose, not business domain. */
.cemi-ux-panel,
.cemi-ux-card[data-cemi-card-type] { min-width:0; color:var(--cemi-color-text); background:var(--cemi-color-surface); border:1px solid var(--cemi-color-border); border-radius:var(--cemi-radius-lg); box-shadow:var(--cemi-shadow-sm); }
.cemi-ux-panel { padding:var(--cemi-space-6); }
.cemi-ux-card[data-cemi-card-type] { display:grid; gap:var(--cemi-space-4); padding:var(--cemi-space-5); }
.cemi-ux-card__header,.cemi-ux-panel__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--cemi-space-3); min-width:0; }
.cemi-ux-card__body,.cemi-ux-panel__body { min-width:0; }
.cemi-ux-card__footer,.cemi-ux-panel__footer { display:flex; flex-wrap:wrap; align-items:center; gap:var(--cemi-space-2); padding-top:var(--cemi-space-3); border-top:1px solid var(--cemi-color-border); }
.cemi-ux-card[data-cemi-card-type="metric_card"] { box-shadow:none; }
.cemi-ux-card[data-cemi-card-type="result_card"] { border-color:var(--cemi-color-border-strong); }
.cemi-ux-card[data-cemi-card-type="decision_card"] { border-color:color-mix(in srgb,var(--cemi-color-brand) 32%,var(--cemi-color-border)); }
.cemi-ux-card[data-cemi-card-type="warning_card"] { border-color:color-mix(in srgb,var(--cemi-color-warning) 42%,var(--cemi-color-border)); }
.cemi-ux-card[data-cemi-card-type="promo_card"] { background:var(--cemi-color-brand-soft); border-color:color-mix(in srgb,var(--cemi-color-brand) 25%,var(--cemi-color-border)); }
.cemi-ux-card[data-cemi-card-type="ad_slot"] { box-shadow:none; border-style:dashed; }
.cemi-ux-card[data-cemi-card-type="diagnostic_card"] { box-shadow:none; background:var(--cemi-color-surface-soft); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

/* Density is context-driven and does not create a second component. */
[data-cemi-density="compact"] :where(.cemi-ux-panel,.cemi-ux-card[data-cemi-card-type]) { padding:var(--cemi-space-3); gap:var(--cemi-space-2); }
[data-cemi-density="relaxed"] :where(.cemi-ux-panel,.cemi-ux-card[data-cemi-card-type]) { padding:var(--cemi-space-8); gap:var(--cemi-space-5); }