/* ----------------- AUTH LAYOUT ----------------- */

.auth-section {

  min-height: 82vh;

  display: flex;

  align-items: center;

  padding-top: 12rem;

}

.auth-grid,
.auth-dashboard,
.auth-admin-grid,
.auth-app-grid {

  display: grid;

  gap: 2rem;

}

.auth-grid {

  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);

  align-items: center;

  gap: 5rem;

}

.auth-dashboard {

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: end;

  margin-bottom: 3rem;

}

.auth-admin-grid {

  grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1.3fr);

  align-items: start;

  margin-bottom: 2rem;

}

.auth-app-grid {

  grid-template-columns: repeat(3, 1fr);

}

.auth-copy h1 {

  max-width: 780px;

  margin-bottom: 1.5rem;

  font-family: var(--font-heading);

  font-size:
    clamp(3rem, 6vw, 5.2rem);

  font-weight: 500;

  line-height: 1;

}

.auth-copy p {

  max-width: 620px;

}

/* ----------------- AUTH CARDS ----------------- */

.auth-card,
.auth-app-card,
.auth-user-summary,
.auth-copy-link {

  position: relative;

  border:
    1px solid rgba(201,168,76,0.14);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.016)
    );

  box-shadow:
    0 24px 70px rgba(0,0,0,0.20);

}

.auth-card {

  padding: 2.5rem;

}

.auth-card--narrow {

  max-width: 560px;

  margin-inline: auto;

}

.auth-card--wide {

  margin-top: 2rem;

}

.auth-card h1,
.auth-card h2 {

  margin-bottom: 1.5rem;

  font-family: var(--font-heading);

  font-size:
    clamp(2rem, 4vw, 3rem);

  font-weight: 500;

  line-height: 1.05;

}

.auth-card p {

  margin-bottom: 2rem;

}

.auth-card form,
.auth-form-stack {

  display: flex;

  flex-direction: column;

  gap: 1.2rem;

}

.auth-card label,
.auth-form-stack label,
.auth-copy-link label {

  display: flex;

  flex-direction: column;

  gap: 0.55rem;

  color: var(--color-gray-light);

  font-size: 0.72rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}

.auth-card input,
.auth-card select,
.auth-form-stack input,
.auth-copy-link input {

  width: 100%;

  padding: 0.95rem 1rem;

  border:
    1px solid rgba(201,168,76,0.18);

  background:
    rgba(8,16,28,0.56);

  color: var(--color-white);

  font: inherit;

  outline: none;

  transition: var(--transition-default);

}

.auth-card input:focus,
.auth-card select:focus,
.auth-form-stack input:focus,
.auth-copy-link input:focus {

  border-color:
    rgba(226,196,122,0.62);

  background:
    rgba(8,16,28,0.78);

}

.auth-card .primary-button,
.auth-form-stack .primary-button {

  margin-top: 0.6rem;

}

/* ----------------- AUTH MESSAGES ----------------- */

.auth-message {

  margin-bottom: 1.4rem;

  padding: 1rem 1.1rem;

  border:
    1px solid rgba(201,168,76,0.20);

  color: var(--color-gold-light);

  background:
    rgba(201,168,76,0.08);

  line-height: 1.7;

}

.auth-message--error {

  border-color:
    rgba(226,124,124,0.32);

  color:
    #f2b8b8;

  background:
    rgba(226,124,124,0.08);

}

.auth-copy-link {

  margin-bottom: 2rem;

  padding: 1.4rem;

}

/* ----------------- AUTH APP CARDS ----------------- */

.auth-app-card {

  display: flex;

  min-height: 230px;

  flex-direction: column;

  justify-content: space-between;

  padding: 2rem;

  transition: var(--transition-default);

}

.auth-app-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(201,168,76,0.34);

}

.auth-app-card span,
.auth-user-summary span {

  color: var(--color-gold);

  font-size: 0.68rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

}

.auth-app-card strong,
.auth-user-summary strong {

  display: block;

  margin-block: 1rem;

  font-family: var(--font-heading);

  font-size: 1.8rem;

  font-weight: 500;

  line-height: 1.1;

}

.auth-app-card p {

  margin: 0;

}

.auth-user-summary {

  min-width: 220px;

  padding: 1.5rem;

}

/* ----------------- AUTH TABLES ----------------- */

.auth-table-wrap {

  width: 100%;

  overflow-x: auto;

}

.auth-table {

  width: 100%;

  border-collapse: collapse;

}

.auth-table th,
.auth-table td {

  padding: 1rem 0.7rem;

  border-bottom:
    1px solid rgba(201,168,76,0.10);

  text-align: left;

  vertical-align: top;

}

.auth-table th {

  color: var(--color-gold);

  font-size: 0.65rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}

.auth-table td {

  color: var(--color-gray-light);

}

.auth-table td strong,
.auth-table td span {

  display: block;

}

.auth-table td strong {

  color: var(--color-white);

  font-weight: 500;

}

.auth-table td span {

  margin-top: 0.25rem;

  font-size: 0.82rem;

}

/* ----------------- AUTH RESPONSIVE ----------------- */

@media (max-width: 1024px) {

  .auth-grid,
  .auth-dashboard,
  .auth-admin-grid,
  .auth-app-grid {

    grid-template-columns: 1fr;

  }

  .auth-dashboard {

    align-items: start;

  }

}

@media (max-width: 768px) {

  .auth-section {

    padding-top: 9rem;

  }

  .auth-card,
  .auth-app-card {

    padding: 1.8rem;

  }

  .auth-copy h1 {

    font-size:
      clamp(2.5rem, 11vw, 4rem);

  }

}