/*
 * UMN Slate account login page.
 */

/* Login page layout */
form:has(.umn-account-login) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 0;
  align-items: stretch;
}

form:has(.umn-account-login) > h1 {
  grid-column: 1 / -1;
  margin-bottom: 2rem;
}

/* Match panel tops and heading positions */
.umn-account-login,
.umn-account-login__native-heading {
  margin: 0;
}

.umn-account-login h2,
.umn-account-login__native-heading > h2 {
  margin: 0;
  line-height: 1.25;
}

/* University of Minnesota panel */
.umn-account-login {
  display: flex;
  flex-direction: column;
  grid-row: 2 / span 2;
  padding: 2rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.umn-account-login .umn-stack {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.umn-account-login .umn-account-login__button {
  width: 100%;
  margin: 0;
}

/* Override Slate's button text styling, including nested spans. */
.umn-account-login .umn-account-login__button,
.umn-account-login .umn-account-login__button span {
  color: #fff !important;
}

.umn-account-login .umn-account-login__note {
  display: block;
  margin: 0.75rem 0 0;
  color: var(--umn-color-text);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}

/* Non-UofM panel heading */
.umn-account-login__native-heading {
  grid-column: 2;
  grid-row: 2;
  padding: 2rem 2rem 0.5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

/* Hide only the generic instructions immediately after the heading. */
.umn-account-login__native-heading + p.success {
  display: none;
}

/* Slate-generated native login form */
.umn-account-login__native-heading ~ table.fixed {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  border-collapse: separate;
  border-spacing: 0;
}

.umn-account-login__native-heading ~ table.fixed table.plain {
  padding-left: 1.5em;
  table-layout: auto;
}

.umn-account-login__native-heading ~ table.fixed .action {
  padding: 0 0 2em 2em;
}

/* Stack the panels on smaller screens. */
@media (max-width: 768px) {
  form:has(.umn-account-login) {
    display: block;
  }

  .umn-account-login {
    margin-bottom: 2rem;
  }
}