/* Sign in frame: the app shell with nothing in it yet. Signing in fills the frame. */

.login {
  position: relative;
  height: 100svh;
}

/* The rail overlays rather than occupying a column, so the form centres on the screen and not on the leftover space. */
.login-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-2);
  border-right: 1px solid var(--sidebar-border);
  background: var(--sidebar);
  color: var(--sidebar-foreground);
}

.login-note {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  color: var(--muted-foreground);
  font: var(--type-caption);
}

.login-note p {
  margin: 0;
}

.login-note a {
  color: var(--foreground);
  font-weight: var(--font-medium);
}

.login-panel {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  background: var(--background);
  overflow-y: auto;
}

/* Sign in is the only thing on the page, so it gets the top of the type scale. */
.login .auth-title {
  font-size: var(--text-4xl);
}

/* Collapses before the centred form could reach the rail. */
@media (max-width: 960px) {
  .login {
    height: auto;
    min-height: 100svh;
  }

  .login-rail {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .login-panel {
    height: auto;
    align-items: flex-start;
    padding: var(--space-10) var(--space-4);
  }
}

@media (max-width: 480px) {
  /* The rail is a top bar at this width, so the explanation drops and only the route out stays. */
  .login-note p {
    display: none;
  }
}