/* ──────────────────────────────────────────────────────────────
   DΛREΛKT_ — AUTH SIGNUP ATOM
   File: /tools/modules/auth.signup/auth.signup.css
   Purpose: visual skin for auth.signup form (token-driven)
   Compatible: auth.signup.js v1.1.0 | modal-agnostic
   ────────────────────────────────────────────────────────────── */

@layer atoms {
  [data-atom="auth.signup"] .as {
    display: grid;
    gap: var(--as-gap, 10px);
    padding: var(--as-pad, 0);
    color: var(--as-fg, inherit);
    background: var(--as-bg, transparent);
  }

  [data-atom="auth.signup"] .as .row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  [data-atom="auth.signup"] .as label {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
  }

  [data-atom="auth.signup"] .as input {
    border: 1px solid var(--as-bd, rgba(255,255,255,.2));
    border-radius: var(--as-radius, 10px);
    background: var(--as-bg, transparent);
    color: var(--as-fg, inherit);
    font-size: 1rem;
    padding: 0.55rem 0.75rem;
    outline: none;
    transition: border-color 0.2s ease;
  }

  [data-atom="auth.signup"] .as input:focus {
    border-color: var(--as-btn-bg, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--as-btn-bg, #fff) 25%, transparent);
  }

  [data-atom="auth.signup"] .as .actions {
    margin-top: 0.75rem;
  }

  [data-atom="auth.signup"] .as .btn {
    background: var(--as-btn-bg, #fff);
    color: var(--as-btn-fg, #111);
    border: none;
    border-radius: var(--as-radius, 10px);
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  [data-atom="auth.signup"] .as .btn:hover {
    background: color-mix(in srgb, var(--as-btn-bg, #fff) 90%, #ddd);
  }

  [data-atom="auth.signup"] .as .msg {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: tomato;
  }

  [data-atom="auth.signup"] .as .msg[hidden] {
    display: none;
  }
}