/* ============================================================
   components.css — reusable UI primitives (Dala language)
   Buttons, links, fields, tags, badges, panels.
   ============================================================ */

/* --- Primary action: filled violet pill (the sole CTA) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  border: none;
  cursor: pointer;
  font-weight: var(--weight-semibold);
  font-size: var(--text-nav-label);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-full);
  padding: 15px 22px;
  background: var(--accent);
  color: var(--color-bone-white);
  transition: transform var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.btn--lg {
  padding: 18px 30px;
  font-size: 15px;
}
.btn--block {
  width: 100%;
}

/* --- Ghost / text button (secondary) --- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-nav-label);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  transition: color var(--dur-fast) var(--ease-out);
  padding: 6px 2px;
}
.btn-ghost:hover {
  color: var(--text-primary);
}
.btn-ghost--upper {
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: var(--weight-semibold);
}

/* Inline link — amber or white, never browser-blue */
.link {
  color: var(--emphasis);
  transition: opacity var(--dur-fast) var(--ease-out);
  text-underline-offset: 3px;
}
.link:hover {
  text-decoration: underline;
}

/* --- Form fields --- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.field__label {
  font-size: var(--text-nav-label);
  letter-spacing: var(--tracking-nav-label);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--text-primary);
  font-size: var(--text-heading-2xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading-2xs);
  padding: var(--space-12) 0;
  transition: border-color var(--dur) var(--ease-out);
}
.field__input::placeholder {
  color: var(--text-secondary);
  opacity: 0.5;
  font-weight: var(--weight-extralight);
}
.field__input:focus {
  outline: none;
  border-color: var(--accent);
}
.field__hint {
  font-size: var(--text-caption);
  color: var(--text-secondary);
}
.field--error .field__input {
  border-color: var(--score-poor);
}
.field--error .field__hint {
  color: var(--score-poor);
}

/* --- Tag / pill --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--iris-08);
}
.tag--accent {
  color: var(--accent);
  background: var(--iris-14);
}
.tag--muted {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

/* --- Mode badge (Demo / Live) --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.badge--demo {
  color: var(--emphasis);
  background: rgba(255, 184, 41, 0.1);
}
.badge--live {
  color: var(--color-deep-verdant);
  background: rgba(21, 132, 110, 0.14);
}
.badge--live .badge__dot {
  animation: pulse 2s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(21, 132, 110, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(21, 132, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 132, 110, 0); }
}

/* --- Panel — the density compromise: whitespace + hairline grouping, NO shadows ---
   Kept flat (transparent) on the void; a hairline and radius group content on data views. */
.panel {
  border-radius: var(--radius);
  padding: var(--space-30);
}
.panel--grouped {
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.015);
}
.panel__label {
  font-size: var(--text-nav-label);
  letter-spacing: var(--tracking-nav-label);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--accent);
  margin-bottom: var(--space-18);
}

/* Divider hairline */
.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin-block: var(--space-30);
}

/* Spinner dots. Fixed width so the growing/shrinking dots can never re-wrap
   the line and make the text above them jump around. */
.dots {
  display: inline-block;
  width: 1.4em;
  text-align: left;
}
.dots::after {
  content: '';
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}