/*
 * Shared ChippeX primitives.
 * This file is intentionally opt-in and uses only chx-prefixed selectors.
 * During the overnight pass it may be linked only by Hub and ChippeX News.
 */

.chx-brand-lockup {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 11px;
  color: var(--chx-text-primary);
  text-decoration: none;
}

.chx-brand-emblem {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: var(--chx-accent);
}

.chx-brand-emblem svg {
  width: 27px;
  height: 27px;
}

.chx-brand-emblem--orbit {
  perspective: 90px;
  transform-style: preserve-3d;
}

.chx-brand-emblem--orbit svg {
  animation: chx-brand-emblem-orbit 26s linear infinite;
  backface-visibility: visible;
  transform-origin: center;
  transform-style: preserve-3d;
}

@keyframes chx-brand-emblem-orbit {
  0%, 100% { transform: rotateX(2deg) rotateY(-8deg) rotateZ(-1deg); }
  25% { transform: rotateX(-5deg) rotateY(10deg) rotateZ(.8deg); }
  50% { transform: rotateX(4deg) rotateY(6deg) rotateZ(1.4deg); }
  75% { transform: rotateX(-2deg) rotateY(-10deg) rotateZ(-.6deg); }
}

@keyframes chx-brand-emblem-orbit-mobile {
  0%, 100% { transform: rotateX(1deg) rotateY(-5deg) rotateZ(-.6deg); }
  33% { transform: rotateX(-3deg) rotateY(6deg) rotateZ(.5deg); }
  66% { transform: rotateX(2deg) rotateY(4deg) rotateZ(.8deg); }
}

.chx-icon-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--chx-border-subtle);
  border-radius: var(--chx-radius-control);
  color: var(--chx-text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--chx-motion-fast) ease,
    border-color var(--chx-motion-fast) ease,
    background var(--chx-motion-fast) ease;
}

.chx-icon-button:hover {
  color: var(--chx-text-primary);
  border-color: var(--chx-border-accent);
  background: rgba(241, 234, 220, .035);
}

.chx-system-message {
  padding: 16px 18px;
  border: 1px solid var(--chx-border-subtle);
  border-radius: var(--chx-radius-control);
  color: var(--chx-text-secondary);
  background: var(--chx-bg-surface-1);
  font: 500 .86rem/1.6 var(--chx-font-ui);
}

.chx-system-message[data-tone="success"] { border-color: color-mix(in srgb, var(--chx-success) 50%, transparent); }
.chx-system-message[data-tone="warning"] { border-color: color-mix(in srgb, var(--chx-warning) 50%, transparent); }
.chx-system-message[data-tone="danger"] { border-color: color-mix(in srgb, var(--chx-danger) 50%, transparent); }

.chx-dialog-surface {
  width: min(100% - 32px, 620px);
  max-height: min(86svh, 760px);
  overflow: auto;
  border: 1px solid var(--chx-border-subtle);
  border-radius: var(--chx-radius-media);
  color: var(--chx-text-primary);
  background: var(--chx-bg-surface-1);
  box-shadow: var(--chx-shadow);
}

.chx-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .chx-icon-button { transition: none; }
  .chx-brand-emblem--orbit svg { animation: none; transform: none; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .chx-brand-emblem--orbit svg { animation-name: chx-brand-emblem-orbit-mobile; }
}