/* ============================================================
   ID.AURA — Design system (Phase C5)
   Generic, reusable component primitives — decoupled from the
   bespoke per-surface classes (.aura-*, .cluster-*, .auto-*)
   elsewhere in styles.css, which remain page compositions built
   ON TOP of these primitives. Consumes css/tokens.css + the
   existing :root palette in styles.css (--cyan/--ink/--glass/…).
   Used live by: console scenario scrubber (.ui-tabdock/.ui-chip),
   ambience color picker (.ui-chip/.ui-slider), card density
   system (.ui-card[data-size]) driven by js/console/layout.js.
   ============================================================ */

.ui-card,
.ui-dialog,
.btn,
.ui-chip,
.ui-toggle,
.ui-tabdock {
  font-family: var(--font-display);
}

/* ---------- button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: var(--stroke-1);
  border-radius: var(--r-sm);
  background: var(--glass-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { border-color: var(--cyan-dim); color: var(--ink-bright); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04141a;
  font-weight: 600;
}
.btn--primary:hover { background: color-mix(in srgb, var(--cyan) 88%, white); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
}
.btn--ghost:hover { background: var(--cyan-soft); }

.btn--icon {
  padding: var(--sp-2);
  border-radius: var(--r-full);
  aspect-ratio: 1;
}
.btn--icon .ph-icon { width: 15px; height: 15px; }

.ui-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: var(--stroke-1);
  border-radius: var(--r-full);
  background: var(--glass);
}
.ui-segmented .btn {
  padding: 6px var(--sp-3);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  font-size: 10.5px;
}
.ui-segmented .btn.active {
  background: var(--cyan-soft);
  color: var(--cyan);
}

/* ---------- card (S/M/L density) ---------- */
.ui-card {
  position: relative;
  padding: var(--density-m-pad);
  border: var(--stroke-1);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgba(9, 19, 24, 0.78), rgba(2, 6, 9, 0.84));
  box-shadow: var(--ev-2);
  overflow: hidden;
}
.ui-card[data-size="s"] {
  padding: var(--density-s-pad);
  font-size: 11px;
}
.ui-card[data-size="l"] {
  padding: var(--density-l-pad);
  font-size: 13px;
}
.ui-card-title {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  color: rgba(124, 158, 165, 0.52);
}
.ui-card[data-size="s"] .ui-card-title { font-size: var(--density-s-title); }
.ui-card[data-size="l"] .ui-card-title { font-size: var(--density-l-title); }
/* density-driven content trims — cards can mark secondary content so it
   only shows at M/L (never on the compact S variant used when a card
   loses priority but still earns a rail slot) */
.ui-card[data-size="s"] [data-density-hide] { display: none; }

/* ---------- list ---------- */
.ui-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.ui-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink-dim);
  font-size: 12px;
  transition: background var(--dur-fast) var(--ease-out);
}
.ui-list-item:hover { background: var(--glass-2); }
.ui-list-item.active { color: var(--cyan); background: var(--cyan-soft); }

/* ---------- dialog ---------- */
.ui-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ui-dialog-scrim.on { opacity: 1; pointer-events: auto; }
.ui-dialog {
  min-width: 320px;
  padding: var(--sp-6);
  border: var(--stroke-2);
  border-radius: var(--r-lg);
  background: var(--bg-3);
  box-shadow: var(--ev-4);
  transform: scale(0.96) translateY(6px);
  transition: transform var(--dur-base) var(--ease-spring);
}
.ui-dialog-scrim.on .ui-dialog { transform: none; }

/* ---------- slider ---------- */
.ui-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(150, 190, 210, 0.16);
  outline: none;
}
.ui-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-dim);
  cursor: pointer;
}
.ui-slider::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan-dim); cursor: pointer;
}

/* ---------- toggle ---------- */
.ui-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 19px;
  border: var(--stroke-1);
  border-radius: var(--r-full);
  background: var(--glass-2);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.ui-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-out);
}
.ui-toggle.on { background: var(--cyan-soft); border-color: var(--cyan-dim); }
.ui-toggle.on::after { transform: translateX(15px); background: var(--cyan); }

/* ---------- chip ---------- */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: var(--stroke-1);
  border-radius: var(--r-full);
  background: var(--glass-2);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.ui-chip:hover { border-color: var(--cyan-dim); color: var(--ink); }
.ui-chip.active {
  color: var(--cyan);
  border-color: var(--cyan-dim);
  background: var(--cyan-soft);
}
.ui-chip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

/* ---------- progress ---------- */
.ui-progress {
  position: relative;
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(150, 190, 210, 0.14);
  overflow: hidden;
}
.ui-progress > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: var(--r-full);
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-dim);
  transition: width var(--dur-base) var(--ease-out);
}

/* ---------- tab-dock ---------- */
.ui-tabdock {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: var(--stroke-1);
  border-radius: var(--r-full);
  background: rgba(2, 7, 10, 0.72);
  backdrop-filter: blur(20px);
}
.ui-tabdock .ui-chip {
  border: 0;
  background: transparent;
}
.ui-tabdock .ui-chip.active {
  background: var(--cyan-soft);
  border: 0;
}