/*
 * HELIX v2 — Component Stylesheet
 * Load order: helix-metachrosis-tokens.css → helix-semantic-tokens.css → helix-components.css
 *
 * Components reference only --hx-* semantic tokens (never raw palette tokens directly).
 * Exception: brand colors, gradient, semantic status colors, and always-dark elements.
 *
 * Naming convention: .hx-{component}[--modifier][__element]
 */

/* ============================================================
   TOKEN EXTENSIONS
   Missing tokens not in metachrosis-tokens.css
   ============================================================ */
:root {
  --fs-13: 0.8125rem;
  /* 13px — widget header titles */
}

/* ============================================================
   BASE RESET
   ============================================================ */

/* Global box-model reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: radial-gradient(ellipse at 60% 40%, #112040 0%, #0D1A2D 70%);
  color: var(--hx-text-high);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hx-btn,
.hx-input,
.hx-textarea,
.hx-select__trigger,
.hx-toggle__track {
  font-family: var(--font-body);
  box-sizing: border-box;
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */

/* Shimmer sweep — skeleton loader */
@keyframes hx-shimmer {
  0% {
    background-position: -600px 0;
  }

  100% {
    background-position: 600px 0;
  }
}

/* Pulse breathe — live indicator */
@keyframes hx-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.7;
  }
}

/* Fade in up — entrance */
@keyframes hx-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in — general */
@keyframes hx-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Spin — loading spinner */
@keyframes hx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Progress sweep — indeterminate */
@keyframes hx-sweep {
  0% {
    left: -40%;
    width: 40%;
  }

  50% {
    left: 30%;
    width: 60%;
  }

  100% {
    left: 110%;
    width: 40%;
  }
}

/* Slide in from right — toast */
@keyframes hx-slide-in-right {
  from {
    transform: translateX(110%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide out to right — toast exit */
@keyframes hx-slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(110%);
    opacity: 0;
  }
}

/* Slide up — modal */
@keyframes hx-slide-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Scrim fade */
@keyframes hx-scrim-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Connector fill — workflow stepper */
@keyframes hx-fill-right {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes hx-dot-bounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Count up — numeric reveal (trigger via JS adding .is-counting) */
@keyframes hx-count-flash {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   BUTTON
   ============================================================ */
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-medium);
  font-size: var(--fs-14);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-04);
  text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.1s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  outline: none;
}

/* Sizes */
.hx-btn--sm {
  padding: 4px 12px;
  font-size: var(--fs-12);
}

.hx-btn--md {
  padding: 7px 16px;
  font-size: var(--fs-14);
}

.hx-btn--lg {
  padding: 10px 22px;
  font-size: var(--fs-16);
}

/* Icon-only: equal width/height */
.hx-btn--icon-only.hx-btn--sm {
  padding: 6px;
  width: 28px;
  height: 28px;
}

.hx-btn--icon-only.hx-btn--md {
  padding: 8px;
  width: 36px;
  height: 36px;
}

.hx-btn--icon-only.hx-btn--lg {
  padding: 10px;
  width: 44px;
  height: 44px;
}

/* Primary */
.hx-btn--primary {
  background-color: var(--cap-blue-600);
  color: var(--grey-white);
}

.hx-btn--primary:hover:not(:disabled) {
  background-color: var(--cap-blue-700);
}

.hx-btn--primary:active:not(:disabled) {
  background-color: var(--cap-blue-800);
  transform: scale(0.98);
}

.hx-btn--primary:focus-visible {
  box-shadow: 0 0 0 3px var(--cap-lightblue-400);
}

/* Secondary */
.hx-btn--secondary {
  background-color: var(--cap-lightblue-600);
  color: var(--grey-white);
}

.hx-btn--secondary:hover:not(:disabled) {
  background-color: var(--cap-lightblue-700);
}

.hx-btn--secondary:active:not(:disabled) {
  background-color: var(--cap-lightblue-800);
  transform: scale(0.98);
}

.hx-btn--secondary:focus-visible {
  box-shadow: 0 0 0 3px var(--cap-lightblue-300);
}

/* Ghost */
.hx-btn--ghost {
  background-color: transparent;
  color: var(--hx-text-high);
  border: 1px solid var(--hx-state-border);
}

.hx-btn--ghost:hover:not(:disabled) {
  background-color: var(--hx-state-hover);
}

.hx-btn--ghost:active:not(:disabled) {
  background-color: var(--hx-state-pressed);
  transform: scale(0.98);
}

.hx-btn--ghost:focus-visible {
  box-shadow: 0 0 0 2px var(--cap-lightblue-400);
}

/* Danger */
.hx-btn--danger {
  background-color: var(--red-500);
  color: var(--grey-white);
}

.hx-btn--danger:hover:not(:disabled) {
  background-color: var(--red-600);
}

.hx-btn--danger:active:not(:disabled) {
  background-color: var(--red-700);
  transform: scale(0.98);
}

.hx-btn--danger:focus-visible {
  box-shadow: 0 0 0 3px var(--red-300);
}

/* Disabled */
.hx-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Loading */
.hx-btn--loading {
  cursor: wait;
}

.hx-btn__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--grey-white);
  border-radius: 50%;
  animation: hx-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.hx-btn__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================================
   INPUT
   ============================================================ */
.hx-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hx-input-wrap__label {
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-07);
  color: var(--hx-text-med);
  text-transform: uppercase;
}

.hx-input-wrap__field-row {
  position: relative;
  display: flex;
  align-items: center;
}

.hx-input {
  width: 100%;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  letter-spacing: var(--ls-04);
  color: var(--hx-text-high);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  box-sizing: border-box;
}

.hx-input::placeholder {
  color: var(--hx-text-low);
}

.hx-input:hover:not(:disabled):not(:focus) {
  background: var(--glass-elevated-bg);
  border-color: var(--hx-state-activated);
}

.hx-input:focus {
  border-color: var(--cap-lightblue-400);
  box-shadow: var(--hx-shadow-sm), 0 0 0 2px var(--hx-tint-accent-focus);
}

.hx-input:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.hx-input--error {
  border-color: var(--red-500);
}

.hx-input--error:focus {
  box-shadow: var(--hx-shadow-sm), 0 0 0 2px var(--hx-tint-error-focus);
}

.hx-input-wrap__prefix,
.hx-input-wrap__suffix {
  position: absolute;
  display: flex;
  align-items: center;
  color: var(--hx-text-med);
}

.hx-input-wrap__prefix {
  left: 12px;
}

.hx-input-wrap__suffix {
  right: 12px;
}

.hx-input--with-prefix {
  padding-left: 36px;
}

.hx-input--with-suffix {
  padding-right: 36px;
}

.hx-input-wrap__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hx-input-wrap__helper {
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-07);
  color: var(--hx-text-med);
}

.hx-input-wrap__helper--error {
  color: var(--red-500);
}

.hx-input-wrap__char-count {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--hx-text-low);
}

/* ============================================================
   TEXTAREA
   ============================================================ */
.hx-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  letter-spacing: var(--ls-04);
  color: var(--hx-text-high);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  box-sizing: border-box;
}

.hx-textarea::placeholder {
  color: var(--hx-text-low);
}

.hx-textarea:hover:not(:disabled):not(:focus) {
  background: var(--glass-elevated-bg);
}

.hx-textarea:focus {
  border-color: var(--cap-lightblue-400);
  box-shadow: var(--hx-shadow-sm), 0 0 0 2px var(--hx-tint-accent-focus);
}

.hx-textarea:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* AI provenance variant — gradient left border */
.hx-textarea--ai-provenance {
  border-left: 3px solid transparent;
  border-image: var(--gradient-progress) 1;
  border-image-slice: 1;
  padding-left: 16px;
}

/* ============================================================
   SELECT / DROPDOWN
   ============================================================ */
.hx-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

.hx-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--hx-text-high);
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  box-sizing: border-box;
}

.hx-select__trigger:hover:not(:disabled) {
  background: var(--glass-elevated-bg);
  border-color: var(--hx-state-activated);
}

.hx-select__trigger:focus-visible {
  border-color: var(--cap-lightblue-400);
  box-shadow: var(--hx-shadow-sm), 0 0 0 2px var(--hx-tint-accent-focus);
}

.hx-select__trigger:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.hx-select__value {
  flex: 1;
  text-align: left;
}

.hx-select__placeholder {
  color: var(--hx-text-low);
}

.hx-select__chevron {
  flex-shrink: 0;
  color: var(--hx-text-med);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-select--open .hx-select__chevron {
  transform: rotate(180deg);
}

/* Floating menu — always forward shadow (elevation-03), never routed through --hx-shadow-* */
.hx-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--glass-elevated-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 8px;
  box-shadow: var(--elevation-03);
  border: 1px solid var(--glass-border);
  z-index: 200;
  overflow: hidden;
  animation: hx-fade-in-up 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 240px;
  overflow-y: auto;
}

.hx-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--hx-text-high);
  cursor: pointer;
  transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 40px;
}

.hx-select__option:hover {
  background-color: var(--hx-state-hover);
}

.hx-select__option--selected {
  background-color: var(--hx-state-selected);
  color: var(--cap-lightblue-400);
}

.hx-select__option-check {
  flex-shrink: 0;
}

/* ============================================================
   CHIP
   ============================================================ */
.hx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 100px;
  padding: 2px 9px;
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-regular);
  font-size: var(--fs-10);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-04);
  white-space: nowrap;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  cursor: default;
}

/* Filter chip — toggleable */
.hx-chip--filter {
  background-color: var(--hx-state-default);
  color: var(--hx-text-med);
  border: 1px solid var(--hx-state-border);
  cursor: pointer;
  outline: none;
}

.hx-chip--filter:hover:not(:disabled) {
  background-color: var(--hx-state-hover);
}

.hx-chip--filter:focus-visible {
  box-shadow: 0 0 0 2px var(--cap-lightblue-400);
}

.hx-chip--filter.hx-chip--active {
  background-color: var(--hx-state-brand-selected);
  color: var(--cap-lightblue-400);
  border-color: var(--cap-blue-600);
  font-weight: var(--fw-ubuntu-medium);
}

/* Context chip — read-only, accent */
.hx-chip--context {
  background-color: rgba(41, 190, 244, 0.07);
  color: var(--cap-lightblue-400);
  border: 1px solid rgba(41, 190, 244, 0.18);
  font-size: var(--fs-10);
  font-weight: var(--fw-ubuntu-regular);
  letter-spacing: var(--ls-04);
  animation: hx-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Removable chip */
.hx-chip__remove {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.1s;
  margin-left: 2px;
}

.hx-chip__remove:hover {
  opacity: 1;
}

/* Disabled */
.hx-chip:disabled,
.hx-chip--filter:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ============================================================
   BADGE
   ============================================================ */
.hx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 100px;
  padding: 2px 8px;
  font-family: var(--font-label);
  font-weight: var(--fw-ubuntu-bold);
  font-size: var(--fs-10);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-07);
  text-transform: uppercase;
  white-space: nowrap;
}

.hx-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Badge semantic variants — background and text use semantic tokens for mode-awareness */
.hx-badge--success {
  background-color: var(--hx-badge-success-bg);
  color: var(--hx-badge-success-text);
}

.hx-badge--success .hx-badge__dot {
  background-color: var(--green-500);
}

.hx-badge--warning {
  background-color: var(--hx-badge-warning-bg);
  color: var(--hx-badge-warning-text);
}

.hx-badge--warning .hx-badge__dot {
  background-color: var(--yellow-500);
}

.hx-badge--error {
  background-color: var(--hx-badge-error-bg);
  color: var(--hx-badge-error-text);
}

.hx-badge--error .hx-badge__dot {
  background-color: var(--red-500);
}

.hx-badge--info {
  background-color: var(--hx-badge-info-bg);
  color: var(--hx-badge-info-text);
}

.hx-badge--info .hx-badge__dot {
  background-color: var(--cap-lightblue-400);
}

.hx-badge--ai {
  background-color: var(--hx-tint-primary-soft);
  color: var(--cap-lightblue-400);
  border: 1px solid var(--hx-tint-primary-border);
}

.hx-badge--ai .hx-badge__dot {
  background-color: var(--cap-lightblue-400);
}

/* Neutral / ghost — for Draft, Archived, unpublished states */
.hx-badge--neutral {
  background-color: transparent;
  color: var(--hx-text-med);
  border: 1px solid var(--hx-state-border);
}

.hx-badge--neutral .hx-badge__dot {
  background-color: var(--hx-surface-neutral);
}

/* ============================================================
   TOGGLE / SWITCH
   ============================================================ */
.hx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.hx-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hx-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background-color: var(--hx-surface-2);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.hx-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--grey-white);
  box-shadow: var(--elevation-02);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-toggle__input:checked+.hx-toggle__track {
  background-color: var(--cap-blue-600);
}

.hx-toggle__input:checked+.hx-toggle__track .hx-toggle__thumb {
  transform: translateX(20px);
}

.hx-toggle__input:focus-visible+.hx-toggle__track {
  box-shadow: 0 0 0 3px var(--cap-lightblue-400);
}

.hx-toggle__label {
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-regular);
  font-size: var(--fs-14);
  color: var(--hx-text-high);
}

.hx-toggle--disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.hx-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hx-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hx-progress__label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-ubuntu-medium);
  color: var(--hx-text-med);
}

.hx-progress__value {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-ubuntu-medium);
  color: var(--cap-lightblue-400);
}

.hx-progress__track {
  position: relative;
  width: 100%;
  background-color: var(--hx-surface-2);
  border-radius: 100px;
  overflow: hidden;
}

.hx-progress__track--sm {
  height: 4px;
}

.hx-progress__track--md {
  height: 8px;
}

.hx-progress__track--lg {
  height: 12px;
}

.hx-progress__fill {
  height: 100%;
  border-radius: 100px;
  background: var(--gradient-progress);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left;
}

/* RAG (Red / Amber / Green) semantic fill — use for score-type bars */
.hx-progress__fill--rag-green {
  background: var(--green-500);
}

.hx-progress__fill--rag-yellow {
  background: var(--yellow-400);
}

.hx-progress__fill--rag-red {
  background: var(--red-500);
}

/* Indeterminate — animated sweep */
.hx-progress__fill--indeterminate {
  position: absolute;
  top: 0;
  width: 40% !important;
  animation: hx-sweep 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ============================================================
   AVATAR
   ============================================================ */
.hx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--cap-darkblue-500);
  color: var(--grey-white);
  /* always white — bg is always a dark/vivid color */
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-medium);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.hx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hx-avatar--xs {
  width: 24px;
  height: 24px;
  font-size: var(--fs-10);
}

.hx-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--fs-12);
}

.hx-avatar--md {
  width: 40px;
  height: 40px;
  font-size: var(--fs-14);
}

.hx-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--fs-20);
}

/* AI avatar — turquoise: the gradient's endpoint colour, the platform's AI signal */
.hx-avatar--ai {
  background-color: var(--cap-turquoise-600);
  color: var(--cap-darkblue-700);
  font-weight: var(--fw-ubuntu-bold);
}

/* Subtle gloss highlight — soft radial catch-light in the upper-left */
.hx-avatar--ai::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 8%;
  width: 60%;
  height: 50%;
  background: radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, 0.32) 0%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
}

/* Legacy ring-only variant (stackable) */
.hx-avatar--ai-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--gradient-progress);
  z-index: -1;
}

/* ============================================================
   TOOLTIP
   ============================================================ */
.hx-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

/* Floating tooltip — always forward shadow (elevation-03), never --hx-shadow-* */
.hx-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-elevated-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--hx-text-high);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-07);
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: var(--elevation-03);
  white-space: nowrap;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  min-width: 160px;
  max-width: 280px;
  white-space: normal;
  text-align: center;
}

.hx-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--hx-surface-1);
}

.hx-tooltip-wrap:hover .hx-tooltip,
.hx-tooltip-wrap:focus-within .hx-tooltip {
  opacity: 1;
}

/* Root Cause C: sidebar nav items are full-width block buttons — inline-flex
 * shrinks them to icon width in the collapsed state, causing overlap */
.hx-sidebar .hx-tooltip-wrap {
  display: block;
  width: 100%;
}

/* ============================================================
   SKELETON / SHIMMER
   ============================================================ */
.hx-skeleton {
  background: linear-gradient(90deg,
      var(--hx-skeleton-base) 0%,
      var(--hx-skeleton-peak) 50%,
      var(--hx-skeleton-base) 100%);
  background-size: 600px 100%;
  animation: hx-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.hx-skeleton--text {
  height: 14px;
  border-radius: 4px;
}

.hx-skeleton--text-sm {
  height: 10px;
  border-radius: 4px;
}

.hx-skeleton--headline {
  height: 32px;
  border-radius: 6px;
}

.hx-skeleton--metric {
  height: 48px;
  border-radius: 8px;
}

.hx-skeleton--card {
  height: 180px;
  border-radius: 12px;
  background-size: 800px 100%;
}

.hx-skeleton--row {
  height: 40px;
  border-radius: 4px;
}

.hx-skeleton--avatar {
  border-radius: 50%;
}

/* ============================================================
   LIVE INDICATOR
   ============================================================ */
.hx-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hx-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: hx-pulse 2s ease-in-out infinite;
}

.hx-live__dot--green {
  background-color: var(--green-500);
}

.hx-live__dot--blue {
  background-color: var(--cap-lightblue-400);
}

.hx-live__dot--yellow {
  background-color: var(--yellow-500);
}

.hx-live__dot--red {
  background-color: var(--red-500);
}

.hx-live__label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-ubuntu-medium);
  color: var(--hx-text-med);
  letter-spacing: var(--ls-07);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.hx-sidebar {
  height: 100%;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.hx-sidebar--collapsed {
  width: 56px;
}

.hx-sidebar--expanded {
  width: 224px;
}

.hx-light .hx-sidebar {
  background: rgba(0, 88, 171, 0.05);
  border-right: 1px solid rgba(0, 88, 171, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hx-light .hx-sidebar__header {
  border-bottom-color: rgba(0, 88, 171, 0.12);
}

.hx-light .hx-sidebar__footer {
  border-top-color: rgba(0, 88, 171, 0.12);
}

.hx-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hx-state-border);
  min-height: 44px;
  flex-shrink: 0;
}

.hx-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.hx-sidebar__logo-mark {
  height: 16px;
  width: auto;
  flex-shrink: 0;
  display: block;
  color: rgba(255, 255, 255, 0.90);
}

.hx-light .hx-sidebar__logo-mark {
  color: var(--surface-dark-bg);
}

.hx-sidebar__logo-name {
  font-family: var(--font-display);
  font-weight: var(--fw-ubuntu-medium);
  font-size: var(--fs-13);
  color: var(--hx-text-high);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}

.hx-sidebar--collapsed .hx-sidebar__logo-name {
  opacity: 0;
  pointer-events: none;
}

.hx-sidebar__toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hx-text-med);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background-color 0.15s;
  flex-shrink: 0;
}

.hx-sidebar__toggle:hover {
  background-color: var(--hx-state-hover);
}

.hx-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: none;
}

.hx-sidebar__nav::-webkit-scrollbar {
  display: none;
}

.hx-sidebar__group {
  margin-bottom: 4px;
}

.hx-sidebar__group-label {
  font-family: var(--font-label);
  font-weight: var(--fw-ubuntu-bold);
  font-size: var(--fs-10);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-05);
  text-transform: uppercase;
  color: var(--hx-text-low);
  padding: 8px 16px 4px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}

.hx-sidebar--collapsed .hx-sidebar__group-label {
  opacity: 0;
  height: 0;
  padding: 0;
}

.hx-sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--hx-text-med);
  position: relative;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  min-height: 34px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.hx-sidebar__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--cap-blue-600);
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-sidebar__item:hover {
  background-color: var(--hx-state-hover);
  color: var(--hx-text-high);
}

.hx-sidebar__item--active {
  background-color: rgba(29, 184, 242, 0.12);
  color: var(--cap-lightblue-400);
}

.hx-sidebar__item--active::before {
  opacity: 1;
}

.hx-sidebar__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hx-sidebar__item-label {
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-regular);
  font-size: var(--fs-12);
  opacity: 1;
  transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
  overflow: hidden;
}

/* Collapsed: centre the icon, collapse label out of layout so nothing clips */
.hx-sidebar--collapsed .hx-sidebar__item {
  justify-content: center;
  padding: 7px 0;
  gap: 0;
}

.hx-sidebar--collapsed .hx-sidebar__item-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.hx-sidebar__footer {
  padding: 8px;
  border-top: 1px solid var(--hx-state-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hx-sidebar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s;
  overflow: hidden;
}

.hx-sidebar__user:hover {
  background-color: var(--hx-state-hover);
}

.hx-sidebar__user-info {
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}

.hx-sidebar--collapsed .hx-sidebar__user-info {
  opacity: 0;
  pointer-events: none;
}

.hx-sidebar__user-name {
  font-size: var(--fs-12);
  font-weight: var(--fw-ubuntu-medium);
  color: var(--hx-text-high);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hx-sidebar__user-role {
  font-size: 10px;
  color: var(--hx-text-low);
  white-space: nowrap;
}

/* Theme toggle block in sidebar footer */
.hx-sidebar__theme-block {
  padding: 8px 8px 4px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}

.hx-sidebar--collapsed .hx-sidebar__theme-block {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  overflow: hidden;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.hx-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.hx-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hx-breadcrumb__link {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--hx-text-med);
  text-decoration: none;
  transition: color 0.15s;
  padding: 2px 4px;
  border-radius: 4px;
}

.hx-breadcrumb__link:hover {
  color: var(--hx-text-high);
}

.hx-breadcrumb__link--current {
  color: var(--hx-text-high);
  font-weight: var(--fw-ubuntu-medium);
  pointer-events: none;
}

.hx-breadcrumb__sep {
  color: var(--hx-text-low);
  font-size: var(--fs-12);
}

/* ============================================================
   TAB BAR
   ============================================================ */
.hx-tabs {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hx-state-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.hx-tabs::-webkit-scrollbar {
  display: none;
}

.hx-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-regular);
  font-size: var(--fs-12);
  color: var(--hx-text-med);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  flex-shrink: 0;
}

.hx-tab:hover {
  color: var(--hx-text-high);
}

.hx-tab--active {
  color: var(--cap-blue-600);
  font-weight: var(--fw-ubuntu-medium);
}

.hx-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--cap-blue-600);
  transform: scaleX(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-tab--active::after {
  transform: scaleX(1);
}

.hx-tab:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cap-lightblue-400);
  border-radius: 4px;
}

.hx-tab__count {
  background-color: var(--hx-state-border);
  color: var(--hx-text-low);
  font-size: 9px;
  font-weight: var(--fw-ubuntu-bold);
  border-radius: 100px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

.hx-tab--active .hx-tab__count {
  background-color: var(--hx-tint-primary-soft);
  color: var(--cap-lightblue-400);
}

/* ============================================================
   THREE COLUMN LAYOUT
   ============================================================ */
.hx-layout {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: var(--hx-canvas);
}

.hx-layout__sidebar {
  flex-shrink: 0;
  height: 100%;
}

.hx-layout__workspace {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  background-color: var(--hx-canvas);
  display: flex;
  flex-direction: column;
  position: relative;
}

.hx-layout__workspace-inner {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.hx-layout__orchestrator {
  width: 320px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Glass handled by .hx-orchestrator inside */
}

.hx-layout__orchestrator--collapsed {
  width: 0;
}

/* ============================================================
   SHARED GRADIENT TOP-BORDER
   All surface cards share this 2px gradient signature.
   ============================================================ */
.hx-card::before,
.hx-metric::before,
.hx-engine-card::before,
.hx-orchestrator__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-progress);
}

/* ============================================================
   CARD
   ============================================================ */
.hx-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: clamp(8px, 3cqi, 12px);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  container-type: inline-size;
  container-name: hx-card;
}

.hx-card:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

.hx-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(6px, 2.5cqi, 10px);
  padding: clamp(10px, 3.5cqi, 14px) clamp(12px, 4cqi, 16px) clamp(8px, 2.5cqi, 10px);
}

.hx-card__header-left {
  flex: 1;
  min-width: 0;
}

.hx-card__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-medium);
  font-size: var(--fs-10);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-05);
  text-transform: uppercase;
  color: var(--hx-text-low);
  margin-bottom: 4px;
}

.hx-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-ubuntu-light);
  font-size: clamp(var(--fs-14), 4cqi, var(--fs-16));
  line-height: var(--lh-20);
  color: var(--hx-text-high);
}

.hx-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hx-card__body {
  padding: clamp(10px, 3cqi, 12px) clamp(12px, 4cqi, 16px) clamp(12px, 4cqi, 16px);
}

.hx-card__divider {
  height: 1px;
  background-color: var(--hx-state-border);
  margin: 0 20px;
}

/* Collapsible toggle */
.hx-card__collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hx-text-med);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background-color 0.15s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-card__collapse-btn:hover {
  background-color: var(--hx-state-hover);
}

.hx-card__collapse-btn--collapsed {
  transform: rotate(-90deg);
}

.hx-card__body--collapsed {
  display: none;
}

/* ============================================================
   METRIC CARD
   ============================================================ */
.hx-metric {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: clamp(8px, 3cqi, 12px);
  box-shadow: var(--glass-shadow);
  padding: clamp(10px, 5cqi, 20px);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  container-type: inline-size;
  container-name: hx-metric;
}

.hx-metric:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

.hx-metric__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(8px, 2.5cqi, 10px);
  font-weight: var(--fw-ubuntu-bold);
  letter-spacing: var(--ls-05);
  text-transform: uppercase;
  color: var(--hx-text-low);
  margin-bottom: 8px;
}

.hx-metric__value {
  font-family: var(--font-display);
  font-weight: var(--fw-ubuntu-light);
  font-size: clamp(var(--fs-24), 10cqi, var(--fs-48));
  line-height: 1.1;
  color: var(--hx-text-high);
  margin-bottom: 4px;
  animation: hx-count-flash 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-metric__label {
  font-family: var(--font-body);
  font-size: clamp(var(--fs-12), 3.5cqi, var(--fs-14));
  font-weight: var(--fw-ubuntu-regular);
  color: var(--hx-text-med);
  margin-bottom: 12px;
}

.hx-metric__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hx-metric__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: clamp(10px, 3cqi, var(--fs-12));
  font-weight: var(--fw-ubuntu-medium);
  border-radius: 100px;
  padding: clamp(1px, 0.5cqi, 2px) clamp(4px, 2cqi, 8px);
  white-space: nowrap;
}

.hx-metric__delta--up {
  color: var(--green-500);
  background-color: var(--hx-tint-success);
}

.hx-metric__delta--down {
  color: var(--red-500);
  background-color: var(--hx-tint-error);
}

.hx-metric__delta--flat {
  color: var(--hx-text-low);
  background-color: var(--hx-state-default);
}

.hx-metric__sparkline {
  flex-shrink: 0;
}

@container hx-metric (width <=160px) {
  .hx-metric__sparkline {
    display: none;
  }
}

/* ============================================================
   AI ENGINE CARD
   ============================================================ */
.hx-engine-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: clamp(8px, 3cqi, 12px);
  box-shadow: var(--glass-shadow);
  padding: clamp(10px, 4cqi, 16px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 3cqi, 12px);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  container-type: inline-size;
  container-name: hx-engine-card;
}

.hx-engine-card:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

.hx-engine-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hx-engine-card__identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hx-engine-card__icon {
  width: clamp(24px, 7cqi, 32px);
  height: clamp(24px, 7cqi, 32px);
  border-radius: clamp(6px, 2cqi, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-ubuntu-bold);
  font-size: clamp(10px, 2.5cqi, var(--fs-12));
  color: var(--grey-white);
  flex-shrink: 0;
}

.hx-engine-card__name {
  font-family: var(--font-body);
  font-size: clamp(var(--fs-12), 3.5cqi, var(--fs-14));
  font-weight: var(--fw-ubuntu-medium);
  color: var(--hx-text-high);
}

.hx-engine-card__score-ring {
  position: relative;
  width: clamp(32px, 11cqi, 48px);
  height: clamp(32px, 11cqi, 48px);
  flex-shrink: 0;
}

.hx-engine-card__score-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-bold);
  font-size: clamp(10px, 2.5cqi, var(--fs-12));
  color: var(--hx-text-high);
}

.hx-engine-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hx-engine-card__timestamp {
  font-size: clamp(10px, 3cqi, var(--fs-12));
  color: var(--hx-text-low);
}

@container hx-engine-card (width <=200px) {
  .hx-engine-card__score-ring {
    display: none;
  }
}

/* ============================================================
   COMPETITOR BAR
   ============================================================ */
.hx-competitor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  container-type: inline-size;
  container-name: hx-competitor;
}

.hx-competitor__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hx-competitor__label {
  font-family: var(--font-body);
  font-size: clamp(var(--fs-12), 3.5cqi, var(--fs-14));
  color: var(--hx-text-med);
  min-width: clamp(72px, 20cqi, 100px);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hx-competitor__track {
  flex: 1;
  height: 8px;
  background-color: var(--hx-surface-2);
  border-radius: 100px;
  overflow: hidden;
}

.hx-competitor__fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-competitor__fill--brand {
  background: var(--gradient-progress);
}

.hx-competitor__fill--other {
  background-color: var(--hx-surface-3);
}

.hx-competitor__pct {
  font-family: var(--font-body);
  font-size: clamp(10px, 3cqi, var(--fs-12));
  font-weight: var(--fw-ubuntu-medium);
  color: var(--hx-text-med);
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* Explicit modifier for brand percentage — replaces adjacent-sibling selector */
.hx-competitor__pct--brand {
  color: var(--cap-lightblue-400);
}

/* ============================================================
   SENTIMENT METER
   ============================================================ */
.hx-sentiment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hx-sentiment__arc {
  display: block;
  overflow: visible;
}

.hx-sentiment__value {
  font-family: var(--font-display);
  font-weight: var(--fw-ubuntu-light);
  font-size: var(--fs-34);
  line-height: var(--lh-36);
  color: var(--hx-text-high);
  text-align: center;
}

.hx-sentiment__label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--hx-text-med);
  text-align: center;
}

/* ============================================================
   ORCHESTRATOR PANEL
   ============================================================ */
.hx-orchestrator {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-border);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.hx-orchestrator--collapsed {
  width: 40px !important;
}

.hx-orchestrator--collapsed .hx-orchestrator__body,
.hx-orchestrator--collapsed .hx-orchestrator__footer,
.hx-orchestrator--collapsed .hx-orchestrator__pinned-top,
.hx-orchestrator--collapsed .hx-orchestrator__context-row,
.hx-orchestrator--collapsed .hx-orchestrator__title {
  display: none;
}

.hx-orchestrator__header {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hx-state-border);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  flex-shrink: 0;
}

.hx-orchestrator__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hx-orchestrator--collapsed .hx-orchestrator__header {
  padding: 10px 0;
  border-bottom: none;
  display: flex;
  justify-content: center;
}

.hx-orchestrator--collapsed .hx-orchestrator__header-row {
  margin-bottom: 0;
}

.hx-orchestrator__pinned-top {
  flex-shrink: 0;
  border-bottom: 1px solid var(--hx-state-border);
  padding: 8px 12px;
}

.hx-light .hx-orchestrator__pinned-top {
  border-bottom-color: rgba(0, 88, 171, 0.12);
}

.hx-orchestrator__collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hx-text-low);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.hx-orchestrator__collapse-btn:hover {
  background: var(--hx-state-hover);
  color: var(--hx-text-med);
}

.hx-orchestrator__strip-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-label);
  font-weight: var(--fw-ubuntu-bold);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-05);
  text-transform: uppercase;
  color: var(--hx-text-low);
  margin: auto;
  padding: 12px 0;
  cursor: pointer;
  transition: color 0.15s;
}

.hx-orchestrator__strip-label:hover {
  color: var(--hx-text-med);
}

.hx-orchestrator__title {
  font-family: var(--font-display);
  font-weight: var(--fw-ubuntu-medium);
  font-size: var(--fs-14);
  color: var(--hx-text-high);
  margin: 0;
}

.hx-orchestrator__context-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.hx-orchestrator__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--hx-state-border);
  padding-top: 8px;
}

.hx-orchestrator__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--hx-surface-2) transparent;
}

.hx-orchestrator__section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hx-orchestrator__section+.hx-orchestrator__section {
  border-top: 1px solid var(--hx-state-border);
  padding-top: 10px;
}

.hx-orchestrator__section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0 6px;
  color: var(--hx-text-low);
  transition: color 0.15s;
  margin-bottom: 8px;
}

.hx-orchestrator__section-toggle:hover {
  color: var(--hx-text-med);
}

.hx-orchestrator__section-label {
  font-family: var(--font-label);
  font-weight: var(--fw-ubuntu-bold);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-05);
  text-transform: uppercase;
  margin: 0;
}

.hx-orchestrator__section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    margin-bottom 0.2s;
  margin-bottom: 0;
}

.hx-orchestrator__section-body--closed {
  max-height: 0;
  opacity: 0;
  margin-bottom: -8px;
}

/* Light mode — blue glass */
.hx-light .hx-orchestrator {
  background: rgba(0, 88, 171, 0.04);
  border-left: 1px solid rgba(0, 88, 171, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hx-light .hx-orchestrator__header {
  border-bottom-color: rgba(0, 88, 171, 0.12);
  background: rgba(0, 88, 171, 0.06);
}

.hx-light .hx-orchestrator__section+.hx-orchestrator__section {
  border-top-color: rgba(0, 88, 171, 0.12);
}

.hx-light .hx-orchestrator__footer {
  border-top-color: rgba(0, 88, 171, 0.12);
}

/* ============================================================
   SUGGESTION CARD
   ============================================================ */
.hx-suggestion {
  background: var(--glass-elevated-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--cap-lightblue-400);
  /* accent overrides left edge */
  border-radius: 10px;
  box-shadow: var(--glass-shadow);
  padding: 11px 12px;
  animation: hx-fade-in-up 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-suggestion:hover {
  box-shadow: var(--glass-shadow-hover);
}

.hx-suggestion__badge {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.hx-suggestion__title {
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-medium);
  font-size: var(--fs-13);
  color: var(--hx-text-high);
  margin-bottom: 4px;
  line-height: var(--lh-20);
}

.hx-suggestion__body {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--hx-text-med);
  line-height: 1.55;
  margin-bottom: 10px;
}

.hx-suggestion__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Compact collapsible variant ─────────────────── */
.hx-suggestion--compact {
  padding: 7px 10px;
  cursor: default;
}

.hx-suggestion__row {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  min-width: 0;
}

.hx-suggestion__row-title {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-ubuntu-medium);
  color: var(--hx-text-high);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.hx-suggestion__row:hover .hx-suggestion__row-title {
  color: var(--hx-text-high);
}

.hx-suggestion__row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--hx-text-low);
}

.hx-suggestion__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--hx-text-low);
  transition: background 0.12s, color 0.12s;
}

.hx-suggestion__icon-btn:hover {
  background: var(--hx-state-hover);
  color: var(--hx-text-med);
}

.hx-suggestion__icon-btn--apply:hover {
  color: var(--green-400);
}

.hx-suggestion__detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s;
}

.hx-suggestion__detail--open {
  max-height: 300px;
  opacity: 1;
}

.hx-suggestion__detail .hx-suggestion__body {
  margin-bottom: 0;
}

/* ============================================================
   AI CONTENT FRAME
   ============================================================ */
.hx-ai-frame {
  position: relative;
  border-radius: 10px;
  padding: 12px 14px 14px 16px;
  background-color: var(--hx-tint-primary-subtle);
  border-left: 3px solid transparent;
  border-image: var(--gradient-progress) 1;
  border-image-slice: 1;
}

.hx-ai-frame__badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.hx-ai-frame__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.hx-ai-frame__header>div,
.hx-ai-frame__header>span {
  flex-shrink: 0;
}

.hx-ai-frame__header .hx-btn {
  flex-shrink: 0;
}

.hx-ai-frame__body {
  position: relative;
}

.hx-ai-frame__content {
  position: relative;
}

/* ============================================================
   CONTEXT CHIP
   ============================================================ */
.hx-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 100px;
  padding: 1px 6px;
  background-color: rgba(41, 190, 244, 0.07);
  border: 1px solid rgba(41, 190, 244, 0.15);
  color: var(--cap-lightblue-400);
  font-family: var(--font-body);
  font-size: var(--fs-10);
  font-weight: var(--fw-ubuntu-regular);
  letter-spacing: var(--ls-04);
  white-space: nowrap;
  animation: hx-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-context-chip__label {
  color: var(--hx-text-low);
}

.hx-context-chip__value {
  color: var(--cap-lightblue-400);
  font-weight: var(--fw-ubuntu-medium);
}

/* ============================================================
   COMMAND BAR
   ============================================================ */
.hx-command-bar-wrap {
  padding: 12px 24px 16px;
  background: var(--hx-cmd-fade);
  flex-shrink: 0;
}

.hx-command-bar-wrap--compact {
  padding: 8px 12px 12px;
  background: none;
}

.hx-command-bar__context-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.hx-command-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  padding: 8px 12px;
  box-shadow: var(--glass-shadow);
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-command-bar:focus-within {
  border-color: var(--cap-lightblue-400);
  box-shadow: var(--glass-shadow-hover), 0 0 0 3px var(--hx-tint-accent-bar);
  padding: 10px 14px;
}

.hx-command-bar__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--hx-text-high);
  min-width: 0;
}

.hx-command-bar__input::placeholder {
  color: var(--hx-text-low);
}

.hx-command-bar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.hx-command-bar__action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hx-text-med);
  padding: 6px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  transition: background-color 0.15s, color 0.15s;
}

.hx-command-bar__action-btn:hover {
  background-color: var(--hx-state-hover);
  color: var(--hx-text-high);
}

.hx-command-bar__submit {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background-color: var(--cap-blue-600);
  border: none;
  cursor: pointer;
  color: var(--grey-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

.hx-command-bar__submit:hover {
  background-color: var(--cap-blue-500);
}

.hx-command-bar__submit:disabled {
  opacity: 0.32;
}

/* ============================================================
   PROVENANCE BADGE
   ============================================================ */
.hx-provenance {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-label);
  font-weight: var(--fw-ubuntu-medium);
  font-size: 9px;
  letter-spacing: var(--ls-04);
  padding: 1px 6px;
  border-radius: 100px;
}

.hx-provenance--ai {
  background-color: var(--hx-tint-primary-soft);
  color: var(--cap-lightblue-400);
}

.hx-provenance--user {
  background-color: var(--hx-tint-success);
  color: var(--green-400);
}

.hx-provenance--system {
  background-color: var(--hx-state-default);
  color: var(--hx-text-med);
}

/* ============================================================
   SOURCE CITATION
   ============================================================ */
.hx-citation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-10);
  color: var(--hx-text-low);
  font-weight: var(--fw-ubuntu-regular);
}

.hx-citation__via {
  color: var(--hx-text-low);
  opacity: 0.7;
}

.hx-citation__engine {
  color: var(--hx-text-med);
  font-weight: var(--fw-ubuntu-medium);
}

.hx-citation__icon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--grey-white);
  flex-shrink: 0;
}

/* ============================================================
   DATA TABLE
   ============================================================ */
.hx-table {
  width: 100%;
  border-collapse: collapse;
}

.hx-table__header {
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-bold);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-05);
  text-transform: uppercase;
  color: var(--hx-text-low);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hx-state-border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.hx-table__header:hover {
  color: var(--hx-text-med);
}

.hx-table__header--sorted {
  color: var(--cap-lightblue-400);
}

.hx-table__header-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hx-table__row {
  transition: background-color 0.1s;
}

.hx-table__row:hover {
  background-color: var(--hx-state-hover);
}

.hx-table__row--selected {
  background-color: var(--hx-state-selected);
}

.hx-table__cell {
  padding: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--hx-text-high);
  border-bottom: 1px solid var(--hx-state-border);
  vertical-align: middle;
}

.hx-table__cell--secondary {
  color: var(--hx-text-med);
  font-size: var(--fs-12);
}

.hx-table__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--cap-blue-600);
  cursor: pointer;
}

.hx-table__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.hx-table__pagination-info {
  font-size: var(--fs-12);
  color: var(--hx-text-low);
}

.hx-table__pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hx-table__page-btn {
  background: none;
  border: 1px solid var(--hx-state-border);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--hx-text-med);
  transition: background-color 0.15s, color 0.15s;
  font-size: var(--fs-14);
}

.hx-table__page-btn:hover {
  background-color: var(--hx-state-hover);
  color: var(--hx-text-high);
}

.hx-table__page-btn--active {
  background-color: var(--cap-blue-600);
  border-color: var(--cap-blue-600);
  color: var(--grey-white);
}

.hx-table__page-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ============================================================
   ACTIVITY FEED
   ============================================================ */
.hx-activity {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hx-activity__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hx-state-border);
  animation: hx-fade-in-up 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.hx-activity__item:last-child {
  border-bottom: none;
}

.hx-activity__dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 4px;
  flex-shrink: 0;
}

.hx-activity__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hx-activity__dot--success {
  background-color: var(--green-500);
}

.hx-activity__dot--info {
  background-color: var(--cap-lightblue-400);
}

.hx-activity__dot--warning {
  background-color: var(--yellow-500);
}

.hx-activity__dot--error {
  background-color: var(--red-500);
}

.hx-activity__dot--neutral {
  background-color: var(--hx-surface-neutral);
}

.hx-activity__content {
  flex: 1;
  min-width: 0;
}

.hx-activity__message {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--hx-text-high);
  line-height: var(--lh-20);
  margin-bottom: 3px;
}

.hx-activity__time {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--hx-text-low);
}

/* ============================================================
   WORKFLOW STEPPER
   ============================================================ */
.hx-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}

.hx-stepper--vertical {
  flex-direction: column;
}

.hx-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.hx-stepper__step-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.hx-stepper__node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-10);
  font-weight: var(--fw-ubuntu-medium);
  position: relative;
  z-index: 1;
  transition: background-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.hx-stepper__node--completed {
  background-color: var(--cap-blue-600);
  color: var(--grey-white);
}

.hx-stepper__node--active {
  background-color: var(--cap-blue-600);
  color: var(--grey-white);
  box-shadow: 0 0 0 2px var(--hx-tint-primary-border);
}

.hx-stepper__node--pending {
  background-color: var(--hx-surface-2);
  color: var(--hx-text-low);
}

.hx-stepper__label {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  color: var(--hx-text-low);
  transition: color 0.2s;
  white-space: nowrap;
}

.hx-stepper__step--active .hx-stepper__label {
  color: var(--hx-text-high);
  font-weight: var(--fw-ubuntu-medium);
}

.hx-stepper__step--completed .hx-stepper__label {
  color: var(--hx-text-med);
}

.hx-stepper__connector {
  flex: 1;
  height: 1px;
  background-color: var(--hx-surface-2);
  position: relative;
  overflow: hidden;
}

.hx-stepper__connector::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--gradient-progress);
  animation: hx-fill-right 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hx-stepper__connector--pending::after {
  display: none;
}

/* ============================================================
   WIDGET BODY CONTAINER
   Establishes a named container context for workspace widget
   content areas. Children's cqi units resolve against this width.
   Can be applied by any wrapper — workspace widget body, preview
   slot, or future v2 layout — to enable outer-container queries.
   ============================================================ */
.hx-widget-body {
  container-type: inline-size;
  container-name: hx-widget;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: clamp(10px, 2.5cqi, 16px);
}

/* ============================================================
   VERSION TAG
   ============================================================ */
.hx-version-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-10);
  color: var(--hx-text-low);
  background-color: var(--hx-state-default);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
}

.hx-version-tag__sep {
  opacity: 0.4;
}

.hx-version-tag__user {
  color: var(--hx-text-med);
}

/* ============================================================
   TOAST — always dark per brand rule
   (helix-semantic-tokens.css re-declares dark tokens locally
   so .hx-light inheritance cannot reach these elements)
   ============================================================ */
.hx-toast-region {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: 360px;
  width: 100%;
}

.hx-toast {
  background: var(--glass-elevated-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: var(--elevation-05);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: hx-slide-in-right 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border-left: 3px solid transparent;
}

.hx-toast--success {
  border-left-color: var(--green-500);
}

.hx-toast--warning {
  border-left-color: var(--yellow-500);
}

.hx-toast--error {
  border-left-color: var(--red-500);
}

.hx-toast--info {
  border-left-color: var(--cap-lightblue-400);
}

.hx-toast--exiting {
  animation: hx-slide-out-right 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hx-toast__icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.hx-toast__content {
  flex: 1;
  min-width: 0;
}

.hx-toast__title {
  font-family: var(--font-body);
  font-weight: var(--fw-ubuntu-medium);
  font-size: var(--fs-14);
  color: var(--hx-text-high);
  margin-bottom: 2px;
}

.hx-toast__message {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--hx-text-med);
  line-height: var(--lh-16);
}

.hx-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hx-text-med);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  flex-shrink: 0;
}

.hx-toast__close:hover {
  color: var(--hx-text-high);
}

/* Light mode: tinted glass backgrounds per variant */
.hx-light .hx-toast--success {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.25);
}

.hx-light .hx-toast--warning {
  background: rgba(245, 158, 11, 0.07);
  border-color: rgba(245, 158, 11, 0.25);
}

.hx-light .hx-toast--error {
  background: rgba(240, 68, 56, 0.07);
  border-color: rgba(240, 68, 56, 0.25);
}

.hx-light .hx-toast--info {
  background: rgba(29, 184, 242, 0.07);
  border-color: rgba(29, 184, 242, 0.25);
}

.hx-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--gradient-progress);
}

/* ============================================================
   MODAL
   ============================================================ */
.hx-modal-scrim {
  position: fixed;
  inset: 0;
  background-color: var(--surface-screen-overlay);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hx-scrim-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 24px;
}

.hx-modal {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--elevation-06);
  max-width: 520px;
  width: 100%;
  position: relative;
  animation: hx-slide-up 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.hx-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-progress);
}

.hx-modal__header {
  padding: 20px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hx-modal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-ubuntu-light);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  color: var(--hx-text-high);
  margin: 0;
}

.hx-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hx-text-med);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.hx-modal__close:hover {
  background-color: var(--hx-state-hover);
  color: var(--hx-text-high);
}

.hx-modal__body {
  padding: 16px 24px;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--hx-text-med);
  line-height: var(--lh-20);
}

.hx-modal__footer {
  padding: 0 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Confirmation variant */
.hx-modal--confirm .hx-modal__title {
  font-size: var(--fs-20);
}

/* ============================================================
   INLINE ALERT
   ============================================================ */
.hx-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  position: relative;
  border-left: 3px solid transparent;
}

.hx-alert--success {
  background-color: var(--hx-tint-success);
  border-left-color: var(--green-500);
  color: var(--hx-text-high);
}

.hx-alert--warning {
  background-color: var(--hx-tint-warning);
  border-left-color: var(--yellow-500);
  color: var(--hx-text-high);
}

.hx-alert--error {
  background-color: var(--hx-tint-error);
  border-left-color: var(--red-500);
  color: var(--hx-text-high);
}

.hx-alert--info {
  background-color: var(--hx-tint-accent-soft);
  border-left-color: var(--cap-lightblue-400);
  color: var(--hx-text-high);
}

.hx-alert__icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.hx-alert__body {
  flex: 1;
}

.hx-alert__title {
  font-weight: var(--fw-ubuntu-medium);
  margin-bottom: 3px;
  color: var(--hx-text-high);
}

.hx-alert__message {
  color: var(--hx-text-med);
}

.hx-alert__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hx-text-med);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.hx-alert__dismiss:hover {
  opacity: 1;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.hx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 8px;
  animation: hx-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: var(--hx-state-default);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hx-text-low);
  margin-bottom: 8px;
}

.hx-empty__headline {
  font-family: var(--font-display);
  font-weight: var(--fw-ubuntu-light);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  color: var(--hx-text-high);
  margin-bottom: 4px;
}

.hx-empty__subtext {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--hx-text-med);
  line-height: var(--lh-20);
  max-width: 280px;
  margin-bottom: 16px;
}

/* ============================================================
   STAGGER ANIMATIONS (apply via .hx-stagger-{n} classes)
   ============================================================ */
.hx-stagger {
  animation: hx-fade-in-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hx-stagger-0 {
  animation-delay: 0ms;
}

.hx-stagger-1 {
  animation-delay: 60ms;
}

.hx-stagger-2 {
  animation-delay: 120ms;
}

.hx-stagger-3 {
  animation-delay: 180ms;
}

.hx-stagger-4 {
  animation-delay: 240ms;
}

.hx-stagger-5 {
  animation-delay: 300ms;
}

.hx-stagger-6 {
  animation-delay: 360ms;
}

/* ============================================================
   UTILITY
   ============================================================ */
.hx-divider {
  height: 1px;
  background-color: var(--hx-state-border);
  width: 100%;
}

.hx-gradient-text {
  background: var(--gradient-progress);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   BUTTONS — Pill variants
   Shared across all Helix pages.
   ============================================================ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-pill--primary {
  background: var(--cap-blue-600);
  color: #fff;
}
.btn-pill--primary:hover {
  background: var(--cap-blue-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,88,171,0.4);
}

.btn-pill--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.btn-pill--ghost:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.btn-pill--cta {
  background: var(--cap-lightblue-600);
  color: #fff;
}
.btn-pill--cta:hover {
  background: var(--cap-lightblue-400);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(29,184,242,0.4);
}
}