/* ============================================
   SIGNIN PAGE
   ============================================ */

@layer components {
  .signin-page {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xl);
    padding: var(--space-3xl) clamp(1rem, 4vw, 3rem);
    justify-content: center;
    align-items: center;
    min-block-size: calc(100dvb - 60px);
    overflow: hidden;
    --orb-1-size: 500px;
    --orb-2-size: 400px;
    --orb-2-left: -100px;

    .signin-info {
      position: relative;
      z-index: 1;
      flex: 1;
      min-inline-size: 280px;
      max-inline-size: 500px;
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
      animation: entrance-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;

      h1 {
        font-family: var(--font-display);
        font-size: clamp(1.75rem, 4vw, 2.25rem);
        font-weight: 800;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        line-height: 1.2;
      }

      .features {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);

        li {
          display: flex;
          gap: var(--wire-gap);
          align-items: flex-start;
          padding: var(--space-md);
          border-radius: 12px;
          transition: all 0.2s ease-out;

          &:hover {
            transform: translateX(4px);
          }
        }

        .feature-icon {
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          inline-size: 44px;
          block-size: 44px;
          border-radius: 12px;
          transition: all 0.25s ease-out;
        }

        strong {
          display: block;
          margin-block-end: var(--space-3xs);
        }

        p {
          font-size: var(--fs-small);
        }
      }

      .stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xl);

        li {
          display: flex;
          gap: var(--space-xs);
          font-size: var(--fs-small);
        }

        .stat-value {
          font-weight: var(--fw-bold);
          font-family: var(--font-heading);
        }
      }
    }

    .signin-card {
      position: relative;
      z-index: 1;
      overflow: hidden;
      flex-shrink: 0;
      inline-size: 100%;
      max-inline-size: 380px;
      padding: var(--space-2xl);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
      animation: entrance-slide-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;

      &::before {
        content: '';
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: 3px;
      }

      h2 {
        text-align: center;
        font-size: var(--fs-xl);
      }

      .subtitle {
        text-align: center;
        font-size: var(--fs-small);
      }

      .signin-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
      }

      .oauth-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        padding: var(--space-compact) var(--space-lg);
        border-radius: 100px;
        cursor: pointer;
        text-decoration: none;
        font-weight: var(--fw-medium);
        transition: all 0.25s ease-out;

        svg:first-child {
          flex-shrink: 0;
        }

        .btn-arrow {
          margin-inline-start: auto;
          opacity: 0;
          transform: translateX(-4px);
          transition: all 0.25s ease-out;
        }

        &:hover .btn-arrow {
          opacity: 1;
          transform: translateX(0);
        }

        &:hover {
          transform: translateY(-2px);
        }
      }

      .signin-divider {
        display: flex;
        align-items: center;
        gap: var(--space-md);

        &::before,
        &::after {
          content: '';
          flex: 1;
          block-size: 1px;
        }

        span {
          font-size: var(--fs-small);
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
      }

      .email-verify-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);

        .ev-step {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--space-sm);

          &[hidden] {
            display: none;
          }
        }

        .ev-label {
          font-size: var(--fs-small);
          font-weight: var(--fw-medium);
          align-self: flex-start;
        }

        .ev-email {
          align-self: stretch;
        }

        .ev-code-row {
          display: flex;
          gap: var(--space-xs);
          align-self: stretch;
        }

        input {
          inline-size: 100%;
          padding: var(--space-compact) var(--space-md);
          border-radius: 100px;
          border: 1px solid;
          font-size: var(--fs-body);
          outline: none;
          transition: border-color 0.2s;
          box-sizing: border-box;
        }

        .ev-code-row input {
          flex: 1;
          min-inline-size: 0;
        }

        .ev-code {
          text-align: center;
          font-family: 'Courier New', monospace;
          font-size: var(--fs-lg);
          letter-spacing: 4px;
          font-weight: var(--fw-bold);
        }

        .ev-send-btn,
        .ev-verify-btn {
          padding: var(--space-compact) var(--space-lg);
          border-radius: 100px;
          border: none;
          cursor: pointer;
          font-weight: var(--fw-medium);
          font-size: var(--fs-body);
          transition: all 0.25s ease-out;

          &:hover {
            transform: translateY(-1px);
          }
          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
          }
        }

        .ev-verify-btn {
          flex-shrink: 0;
        }

        .ev-error {
          font-size: var(--fs-xsmall);
          margin: 0;
        }

        .ev-sent-msg {
          font-size: var(--fs-small);
          margin: 0;
        }

        .ev-resend {
          background: none;
          border: none;
          cursor: pointer;
          font-size: var(--fs-xsmall);
          padding: 0;
          text-decoration: underline;
          transition: opacity 0.2s;

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .terms-text {
        text-align: center;
        font-size: var(--fs-xsmall);
      }

      .dev-login-section {
        .divider {
          display: flex;
          align-items: center;
          gap: var(--space-md);
          font-size: var(--fs-small);
          color: var(--text-secondary);

          &::before,
          &::after {
            content: '';
            flex: 1;
            block-size: 1px;
            background: currentColor;
            opacity: 0.3;
          }
        }

        .dev-login-form {
          display: flex;
          flex-direction: column;
          gap: var(--space-sm);

          label {
            font-size: var(--fs-small);
            font-weight: var(--fw-medium);
          }
        }

        .dev-login-row {
          display: flex;
          gap: var(--space-xs);

          input {
            flex: 1;
            padding: var(--space-sm) var(--space-md);
            border-radius: 8px;
            border: 1px solid light-dark(oklch(0% 0 0 / 0.15), oklch(100% 0 0 / 0.15));
            background: light-dark(oklch(100% 0 0 / 0.8), oklch(100% 0 0 / 0.06));
            color: var(--text-primary);
            font-size: var(--fs-body);

            &::placeholder {
              color: var(--text-secondary);
            }
          }

          button {
            padding: var(--space-sm) var(--space-lg);
            border-radius: 8px;
            border: none;
            background: var(--accent-primary);
            color: white;
            font-weight: var(--fw-medium);
            cursor: pointer;
            white-space: nowrap;

            &:hover {
              filter: brightness(1.1);
            }
          }
        }
      }
    }
  }
}

/* --- THEME --- */
@layer theme {
  .signin-page {
    .page-bg-orb {
      opacity: 0.15;
    }

    .page-bg-orb--1 {
      background: oklch(55% 0.2 270);
    }

    .page-bg-orb--2 {
      background: oklch(65% 0.2 25);
    }

    .signin-info {
      .tagline {
        color: var(--text-secondary);
      }

      .features li {
        background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
        border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px light-dark(oklch(0% 0 0 / 0.04), oklch(0% 0 0 / 0));

        &:hover {
          border-color: oklch(from var(--accent-primary) l c h / 0.3);
          background: oklch(from var(--glass-tint) l c h / 0.06);
        }

        p {
          color: var(--text-secondary);
        }
      }

      .feature-icon {
        background: linear-gradient(
          135deg,
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.15),
            oklch(from var(--accent-primary) l c h / 0.25)
          ),
          light-dark(
            oklch(from var(--accent-warm) l c h / 0.08),
            oklch(from var(--accent-warm) l c h / 0.15)
          )
        );
        border: 1px solid
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.2),
            oklch(from var(--accent-primary) l c h / 0.35)
          );
        color: var(--accent-primary);
        box-shadow: 0 4px 16px
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.08),
            oklch(from var(--accent-primary) l c h / 0.15)
          );
      }

      .stats li {
        color: var(--text-secondary);
      }
    }

    .signin-card {
      background: light-dark(oklch(100% 0 0 / 0.8), oklch(100% 0 0 / 0.04));
      border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 32px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.2));

      &::before {
        background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
      }

      .subtitle {
        color: var(--text-secondary);
      }

      .oauth-button {
        background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.06));
        border: 1px solid light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.1));
        color: var(--text-primary);

        &:hover {
          background: light-dark(oklch(0% 0 0 / 0.05), oklch(100% 0 0 / 0.1));
          border-color: light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.2));
          box-shadow: 0 4px 16px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.15));
        }
      }

      .google-button:hover {
        border-color: oklch(62% 0.16 260 / 0.4);
      }

      .microsoft-button:hover {
        border-color: oklch(65% 0.18 230 / 0.4);
      }

      .signin-divider {
        &::before,
        &::after {
          background: light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.1));
        }

        span {
          color: var(--text-secondary);
        }
      }

      .email-verify-form {
        .ev-label {
          color: var(--text-secondary);
        }

        input {
          background: light-dark(oklch(100% 0 0), oklch(100% 0 0 / 0.06));
          border-color: light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.12));
          color: var(--text-primary);

          &::placeholder {
            color: var(--text-secondary);
            opacity: 0.6;
          }
          &:focus {
            border-color: var(--accent-primary);
          }
        }

        .ev-send-btn,
        .ev-verify-btn {
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
          color: white;

          &:hover {
            box-shadow: 0 4px 16px oklch(from var(--accent-primary) l c h / 0.3);
          }
        }

        .ev-error {
          color: oklch(65% 0.2 25);
        }
        .ev-sent-msg {
          color: var(--text-secondary);
        }
        .ev-resend {
          color: var(--accent-primary);
        }
      }

      .terms-text {
        color: var(--text-secondary);

        a {
          color: var(--accent-primary);
        }
      }
    }
  }
}