/* ============================================================
   ps-components.css — Shared operator-shell components
   Dark glassmorphic, cyan accent. Consumes --ps-* tokens from
   design-tokens.css (loaded as a sibling stylesheet).
   CSP-clean: no @import, no url() to external hosts, no inline JS.
   Token prefix --ps-* avoids colliding with --cc-/--dc-/--color-mc-/--bg/--ta-.
   ============================================================ */

/* ---------- Button ---------- */
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-s1);
  font-family: var(--ps-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  padding: var(--ps-s2) var(--ps-s4);
  border-radius: var(--ps-radius);
  border: 1px solid var(--ps-border);
  background: var(--ps-surface-2);
  color: var(--ps-text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease, box-shadow 0.16s ease, transform 0.06s ease;
}

.ps-btn:hover {
  border-color: var(--ps-primary-dim);
  background: color-mix(in srgb, var(--ps-surface-2) 80%, var(--ps-primary) 20%);
}

.ps-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ps-bg), 0 0 0 4px var(--ps-primary-dim);
}

.ps-btn:active {
  transform: translateY(1px);
}

.ps-btn:disabled,
.ps-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — solid cyan accent on dark text */
.ps-btn--primary {
  background: var(--ps-primary);
  border-color: var(--ps-primary);
  color: var(--ps-bg);
}

.ps-btn--primary:hover {
  background: color-mix(in srgb, var(--ps-primary) 85%, white 15%);
  border-color: color-mix(in srgb, var(--ps-primary) 85%, white 15%);
}

.ps-btn--primary:active {
  background: var(--ps-primary-dim);
}

/* Ghost — transparent, accent on hover */
.ps-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ps-text-dim);
}

.ps-btn--ghost:hover {
  background: color-mix(in srgb, var(--ps-primary) 12%, transparent);
  border-color: transparent;
  color: var(--ps-primary);
}

/* Outline — cyan border, transparent fill */
.ps-btn--outline {
  background: transparent;
  border-color: var(--ps-primary);
  color: var(--ps-primary);
}

.ps-btn--outline:hover {
  background: color-mix(in srgb, var(--ps-primary) 14%, transparent);
  border-color: var(--ps-primary);
  color: var(--ps-primary);
}

/* ---------- Card ---------- */
.ps-card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  padding: var(--ps-s4);
  color: var(--ps-text);
  box-shadow: var(--ps-shadow-sm);
}

/* ---------- Glass surface ---------- */
.ps-glass {
  background: color-mix(in srgb, var(--ps-surface) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--ps-border) 70%, transparent);
  border-radius: var(--ps-radius);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--ps-shadow-md);
  color: var(--ps-text);
}

/* ---------- Badge ---------- */
.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-s1);
  font-family: var(--ps-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  padding: var(--ps-s1) var(--ps-s2);
  border-radius: var(--ps-radius-sm);
  border: 1px solid color-mix(in srgb, var(--ps-primary) 40%, transparent);
  background: color-mix(in srgb, var(--ps-primary) 14%, transparent);
  color: var(--ps-primary);
  white-space: nowrap;
}

/* ---------- Input ---------- */
.ps-input {
  display: block;
  width: 100%;
  font-family: var(--ps-font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: var(--ps-s2) var(--ps-s3);
  border-radius: var(--ps-radius-sm);
  border: 1px solid var(--ps-border);
  background: var(--ps-surface-2);
  color: var(--ps-text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease,
    background-color 0.16s ease;
}

.ps-input::placeholder {
  color: var(--ps-text-dim);
  opacity: 1;
}

.ps-input:hover {
  border-color: var(--ps-primary-dim);
}

.ps-input:focus,
.ps-input:focus-visible {
  outline: none;
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ps-primary) 30%, transparent);
}

.ps-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}